วิธีสร้างร้านค้าออนไลน์ที่ยอดเยี่ยมด้วย WooCommerce, Divi และ SiteGround (2023)

ไซต์กว่า 74 ล้านแห่งขึ้นอยู่กับแพลตฟอร์ม WordPress เพื่อโฮสต์บล็อกขายผลิตภัณฑ์ของพวกเขาหรือเพียงแค่เขียนเพลงประจำวันเพื่อให้โลกเห็น เมื่อคุณเริ่มสร้างของคุณ เว็บไซต์อีคอมเมิร์ซ คุณมีตัวเลือกมากมายให้เลือกและ WordPress เชื่อมโยงกับสิ่งนี้

อันไหนที่โดดเด่น แพลตฟอร์มอีคอมเมิร์ซ คุณจะเลือก คุณวางแผนที่จะคว้าธีมเพื่อขายผลิตภัณฑ์ของคุณหรือมีใครบางคนที่คุณสามารถจ่ายเงินเพื่อสร้างเว็บไซต์ตั้งแต่เริ่มต้น? เฮ้คุณวางแผนจะขายอะไรผ่านเว็บไซต์อีคอมเมิร์ซของคุณ?

หมายเหตุบรรณาธิการ: โพสต์นี้เผยแพร่ครั้งแรกเมื่อวันที่ 15 มกราคม 2015 และได้รับการปรับปรุงและปรับปรุงใหม่ทั้งหมดเพื่อความถูกต้องและครอบคลุม

มีธีม WordPress หลายพันถึงล้านชุดให้เลือกเมื่อคุณมองหาโครงสร้างส่วนหน้าและส่วนหลังเพื่อเริ่มขายออนไลน์ เกือบจะเหมือนกันกับโฮสติ้ง (แต่เราชอบ SiteGround or Bluehost).

ชุดรูปแบบที่ดีที่สุด ได้แก่ เครื่องมือการจัดการอีคอมเมิร์ซที่ง่ายและรวดเร็วเพื่อให้คุณสามารถอัปโหลดผลิตภัณฑ์และจัดการสิ่งต่าง ๆ เช่นส่วนลดรางวัลปุ่มและหน้าผลิตภัณฑ์ ธีมของคุณเป็นสิ่งแรกที่ผู้คนจะเห็นเมื่อพวกเขาเยี่ยมชมเว็บไซต์ของคุณ มันแนะนำพวกเขาตลอดกระบวนการและนำความแตกต่างระหว่างคนที่พอใจกับประสบการณ์จริง ๆ หรือไม่

ในระยะสั้นธีม WordPress มีความสำคัญและ Divi เวิร์ดเพรสธีมจาก Elegant Themes เป็นตัวเลือกที่ค่อนข้างดูดีสำหรับคุณที่จะต้องพิจารณา สามารถใช้สำหรับเว็บไซต์ธุรกิจมาตรฐาน แต่ยังรวมถึงการผสานรวมสำหรับการขายอีคอมเมิร์ซและกระบวนการขายที่รวดเร็ว มาเรียนรู้วิธีสร้างร้านค้าออนไลน์ด้วยไฟล์ Divi ธีม WordPress

รับโดเมนและโฮสติ้งของคุณก่อน

💡ขั้นตอนแรกในกระบวนการสร้างเว็บไซต์ใด ๆ คือการคว้าบัญชีโฮสติ้งชื่อโดเมนและติดตั้ง WordPress บนเว็บไซต์ Divi ไม่แตกต่างกัน มีหลายวิธีในการรับโฮสติ้งและชื่อโดเมน แต่โดยส่วนตัวแล้วฉันคิดว่า SiteGround เป็นหนึ่งในตัวเลือกที่ปลอดภัยและเชื่อถือได้มากที่สุด (สำหรับรายละเอียดเพิ่มเติมโปรดดูข้อมูลที่ครอบคลุมของเรา SiteGround ทบทวน).

สิ่งที่เจ๋งจริงๆคือ SiteGround มีความเชี่ยวชาญ การจัดการ WooCommerce โฮสติ้ง แพ็คเกจบริการพร้อมทุกสิ่งที่คุณต้องการเพื่อเริ่มขายออนไลน์ ภายในแพ็คเกจคุณสามารถเลือกได้ทั้ง StartUp แพ็กเกจ สำหรับผู้เริ่มต้น แผน GrowBig สำหรับธุรกิจที่กำลังเติบโตหรือ GoGeek สำหรับการจัดตั้ง WooCommerce ร้านค้า

แต่ละข้อเสนอคุณสมบัติขั้นสูงสำหรับการเพิ่มประสิทธิภาพไฟล์ WooCommerce ไซต์ในราคาที่เหมาะสม

นั่นคือบริการโฮสติ้งอื่นที่เราขอแนะนำเป็นอย่างยิ่ง Divi WooCommerce ร้านค้าคือ BlueHost. แม้ว่าคุณสมบัติที่นี่จะไม่ตรงกับ SiteGroundคุณยังคงได้รับ WooCommerce- เน้นโฮสติ้งผ่านแพ็คเกจอีคอมเมิร์ซ WordPress แผนสามารถจัดการกับไฟล์ Divi WooCommerce จัดเก็บ แต่น่าเศร้าที่คุณจะไม่ได้รับบริการที่มีการจัดการ

???? ตอนนี้เพื่อความชัดเจนเรามาดำเนินการต่อ SiteGround...

คุณเริ่มต้นอย่างไร

ไปที่ SiteGround การจัดการ WooCommerce โฮสติ้ง หน้าเลือกแผนในอุดมคติแล้วคลิก รับแผน

ในความคิดของฉัน แผน GoGeek ดูเหมือนจะเป็นตัวเลือกที่เหมาะสมที่สุดเนื่องจากรองรับได้ไม่ จำกัด WooCommerce เว็บไซต์ที่มีความสามารถด้านอีคอมเมิร์ซขั้นสูง นอกเหนือจากการใช้พลังงานของเซิร์ฟเวอร์ที่มากขึ้นคุณจะได้รับการสนับสนุนลำดับความสำคัญ, การจัดเตรียม WordPress, การสำรองข้อมูลตามความต้องการ, และทรัพยากรที่ยอดเยี่ยมเช่นเดียวกับการถ่ายโอนเว็บไซต์ฟรีและ Cloudflare CDN ท่ามกลางคุณสมบัติที่แข็งแกร่งอื่น ๆ

???? และเท่าที่ทรัพยากรมีความกังวลแผนนี้รองรับ:

• กล่องจดหมายขนาด 6GB
• พื้นที่เก็บข้อมูล 1 GB
• ที่จัดเก็บ SSD
• การถ่ายโอนข้อมูลที่ไม่มีการตรวจสอบ
• พื้นที่เก็บข้อมูล 30GB
• มากถึง 100,000 ครั้งต่อเดือน

โปรดจำไว้ว่า บริการนี้เริ่มต้นที่ $ 11.95 ต่อเดือนและมันคล้ายกันมากกับวิธีที่คุณจะติดตั้งไซต์ WordPress ปกติในบัญชีโฮสติ้ง BlueHost

แต่จำไว้ว่านั่นเป็นราคาพิเศษสำหรับผู้เริ่มต้น คาดว่าจะเพิ่มขึ้นเป็น $ 34.95 ในการต่ออายุในอนาคตซึ่งยังคงเป็นค่าใช้จ่ายที่เหมาะสมหากคุณพิจารณาคุณสมบัติทั้งหมดที่คุณได้รับในระยะยาว

ตอนนี้เมื่อคุณเลือกแผนที่คุณต้องการแล้ว SiteGround จะนำคุณไปที่หน้าการลงทะเบียนโดเมน หากคุณเป็นเจ้าของโดเมนอยู่แล้ว ให้เลือกตัวเลือกที่สองและป้อนรายละเอียดของโดเมน มิฉะนั้น ให้ดำเนินการลงทะเบียนชื่อโดเมนใหม่ในราคา 15.95 ดอลลาร์ต่อปี

ถัดไปคือขั้นตอนสุดท้ายที่คุณเลือกตัวเลือกการโฮสต์ที่คุณต้องการรวมถึงป้อนข้อมูลการชำระเงินและรายละเอียดส่วนบุคคลของคุณก่อนสร้างบัญชี

แน่นอนว่าสิ่งเหล่านี้เป็นสิ่งพื้นฐานที่คุณเคยจัดการมาแล้วหลายครั้ง ดังนั้นคุณไม่ควรมีปัญหาในการป้อนหมายเลขโทรศัพท์ประเทศชื่ออีเมลรหัสผ่านบัญชี ฯลฯ

ส่วนการชำระเงินกำหนดให้คุณป้อนรายละเอียดบัตรเครดิต คุณสามารถดำเนินการต่อด้วย ค้นพบ MasterCard or วีซ่า

อย่างไรก็ตามและค่อนข้างน่าสนใจ SiteGround ไม่แสดงรายชื่อ PayPal แม้ว่าจะได้รับความนิยมเพิ่มขึ้นในหมู่ก็ตาม WooCommerce พ่อค้า. แต่โชคดีที่พวกเขาสามารถรับการชำระเงินผ่าน PayPal ได้แม้ว่าจะเป็นทางอ้อมก็ตาม

หากนี่เป็นโหมดที่คุณต้องการดังนั้นให้เว้นช่องว่างไว้และติดต่อ SiteGroundตัวแทนขายของผ่านเครื่องมือแชทสด พวกเขาจะช่วยคุณดำเนินการผ่าน PayPal

ส่วนสุดท้ายมีหลายตัวเลือกสำหรับบริการโฮสติ้งของคุณรวมถึงตำแหน่งศูนย์ข้อมูลที่คุณต้องการรวมถึงระยะเวลาการสมัคร

ตอนนี้เพื่อลดระยะการถ่ายโอนข้อมูลระหว่าง Sitegroundเซิร์ฟเวอร์ของคุณและไฟล์ WooCommerce ผู้เยี่ยมชมไซต์เลือกตำแหน่งศูนย์ข้อมูลที่ใกล้กับพื้นที่ตลาดเป้าหมายของคุณมากที่สุด

จากนั้นเลือกบริการเสริมพิเศษที่คุณต้องการรวมไว้ในแพ็คเกจของคุณและ voila! นั่นคือทั้งหมดที่ต้องใช้ในการตั้งค่าไฟล์ Siteground บัญชี

เมื่อคุณทำเสร็จแล้วเข้าสู่บัญชีของคุณและตรงไปที่พื้นที่ cPanel ของคุณ คุณจะพบโปรแกรมติดตั้งอัตโนมัติของ WordPress เริ่มต้น ดังนั้นให้เลือกป้อนรายละเอียดการเข้าสู่ระบบ WordPress ของคุณแล้วกดปุ่มติดตั้ง

คุณจะสังเกตเห็นว่ากระบวนการติดตั้ง WordPress ใช้เวลาสองสามวินาทีเนื่องจากเป็นแบบอัตโนมัติทั้งหมด และหลังจากตั้งค่าทุกอย่างแล้ว SiteGround จะให้ชื่อโดเมนที่เหมาะสมแก่คุณในการเข้าถึงหากคุณต้องการเปลี่ยนแปลงสิ่งต่างๆในแบ็กเอนด์ของไซต์ของคุณ

การสร้างร้านค้าออนไลน์ของคุณด้วย Divi

คืออะไร Divi?

ตกลงถ้าคุณยังไม่ได้ลองฉันเดิมพันคุณเคยได้ยินเกี่ยวกับมันแล้ว Divi ไม่ธรรมดา WooCommerce ธีม ตามความเป็นจริงแล้วหนึ่งในธีม WordPress ที่ได้รับความนิยมมากที่สุดใน Elegant Themes และที่น่าสนใจคือ Divi is ธีมที่สง่างามผลิตภัณฑ์เรือธงของ

แล้วธีมนี้มีอะไรพิเศษ? และมีอะไรที่โดดเด่นเกี่ยวกับ Divi's WooCommerce?

ไม่เหมือนธีม WordPress ทั่วไป Divi เป็นแพ็คที่ครอบคลุมมากกว่า นั่นหมายความว่าจะรวมคุณสมบัติของธีมมาตรฐานเข้ากับฟังก์ชันพิเศษที่มีประโยชน์สำหรับ Divi WooCommerce ร้านค้า

อย่าเข้าใจฉันผิด แม้ว่า Divi's WooCommerce การสนับสนุนเป็นจุดสนใจหลักที่นี่ชุดรูปแบบสามารถทำได้มากกว่านั้น ในสาระสำคัญ, Divi สามารถรวมเข้ากับไซต์ทุกประเภทได้อย่างราบรื่นด้วยรูปแบบเว็บไซต์ที่หลากหลาย ไม่ใช่แค่อีคอมเมิร์ซ

จากนั้นไปด้านบนมันออก Divi มาพร้อมกับตัวสร้างเพจ WordPress ที่ใช้งานง่าย plugin. คุณสามารถใช้มันเพื่อปรับแต่ง .ของคุณได้อย่างอิสระ Divi WooCommerce จัดเก็บโดยไม่ต้องเข้ารหัสใด ๆ เลย

ในความเป็นจริง Divi ได้รับการพัฒนาสำหรับผู้เริ่มต้น ดังนั้นคุณสามารถคาดหวังว่าจะพบแผงควบคุมที่เรียบร้อยและแทบจะไม่มีช่วงการเรียนรู้ ใช้เวลาเพียงไม่กี่นาทีในการจัดการทั้งหมด Divi ระบบนิเวศตั้งค่าและปรับแต่ง Divi's WooCommerce เค้าโครง

???? ในท้ายที่สุดคุณจะสามารถใช้ประโยชน์จาก Divi's:

• อาร์เรย์ของเลย์เอาต์ที่ปรับแต่งได้สำหรับเว็บไซต์ WordPress ทุกประเภทรวมถึง WooCommerce ร้านค้าออนไลน์
• Page Builder ที่ใช้งานง่ายซึ่งมีโฮสต์ขององค์ประกอบเว็บไซต์และความสามารถในการออกแบบ
• กระบวนการปรับแต่งที่ยืดหยุ่นโดยไม่มีการเข้ารหัสรูปแบบใด ๆ แม้แต่มือใหม่ก็สามารถตั้งค่าและปรับแต่งการใช้งานได้อย่างสะดวกสบาย Divi WooCommerce ร้านค้า
• การรวม WordPress ที่ตรงไปตรงมา Divi เป็นหนึ่งในธีม WordPress ภายนอกไม่กี่ธีมที่สามารถติดตั้งได้อย่างราบรื่นโดยไม่ต้องปรับแต่งใด ๆ ที่ซับซ้อน
• ปรับให้เหมาะสมกับอีคอมเมิร์ซ WooCommerce แม่แบบ

Divi ลากแล้วปล่อยตัวสร้างหน้า

อย่างที่เราเคยพูดไป Divi มีสองรสชาติที่แตกต่างกัน เมื่อคุณชำระค่าสมาชิกเมื่อวันที่ ธีมที่สง่างาม คุณจะพบกับมาตรฐาน Divi ธีมบนแดชบอร์ดพร้อมด้วยไฟล์ Divi ตัวสร้างเพจ WordPress plugin.

แต่เป็นที่น่าสังเกตว่าตัวสร้างนี้ไม่ได้เชื่อมโยงกับไฟล์ Divi ธีม. มันมาเป็นส่วนเสริม plugin ให้กับทุกธีมเดียวที่ได้มาจากธีมที่หรูหรา

ที่กล่าวว่า Divi WordPress Page Builder เป็นเครื่องมือแก้ไขแบบลากแล้ววางที่มีความสามารถในการปรับแต่งขั้นสูง ช่วยให้คุณสามารถย้ายและกำหนดองค์ประกอบคอลัมน์แถวและโมดูลได้โดยไม่ต้องมีประสบการณ์ในการเขียนโค้ด กล่าวอีกนัยหนึ่งก็คือประเภทของเครื่องมือสร้างก Divi WooCommerce มือใหม่ก็หวังว่าจะได้

แต่อย่าพลาด แม้ว่า Divi Page Builder กำหนดเป้าหมายผู้เริ่มต้นเป็นตัวแก้ไขที่อำนวยความสะดวกให้กับนักพัฒนาที่มีประสบการณ์ พวกเขาสามารถรวมคุณลักษณะด้านภาพเข้ากับการควบคุม CSS อย่างเป็นระบบเพื่อผลักดัน Divi WooCommerce เว็บไซต์ไปอีกระดับ

ลองคิดดูสิ คุณไม่จำเป็นต้องมีนักพัฒนาเพื่อออกแบบองค์ประกอบทั้งหมดในไฟล์ Divi WooCommerce จัดเก็บ. คุณสามารถพึ่งพาฟังก์ชั่นการมองเห็นเพียงอย่างเดียว

และคุณรู้อะไรไหม

Divi แม้จะพยายามทำให้กระบวนการทั้งหมดง่ายขึ้นโดยการทำฉลากและการกำหนดสีของโมดูลเลย์เอาต์

และเมื่อพูดถึงข้อกำหนดที่น่าสังเกตอีกประการหนึ่งก็คือ Diviความเรียบง่ายโดยรวมของกระบวนการปรับแต่งเค้าโครง ตัวอย่างเช่นหากคุณต้องการแนะนำส่วนใหม่ให้คลิกเพียงครั้งเดียว จากนั้นทำซ้ำถอดและใส่โมดูลสำหรับไฟล์ Divi WooCommerce ร้านค้าจะทำให้คุณคลิกเพียงไม่กี่ปุ่ม

ในขณะเดียวกัน Diviหน้าต่างแก้ไขจะแสดงการเปลี่ยนแปลงเค้าโครงไซต์ของคุณแบบเรียลไทม์ คุณจะสามารถติดตามการปรับแต่งทุกรายการได้ด้วยสายตาและดูว่าการปรับเปลี่ยนนี้ส่งผลต่อการออกแบบโดยรวมของ Divi WooCommerce จัดเก็บ

ออกแบบไว้ล่วงหน้า Divi WooCommerce รูปแบบเว็บไซต์

เพื่อช่วยให้คุณไม่ต้องยุ่งยากในการสร้างเว็บไซต์ตั้งแต่เริ่มต้นไฟล์ Divi WordPress Theme มาพร้อมกับโฮสต์ของเทมเพลตไซต์ที่ออกแบบไว้ล่วงหน้า และเนื่องจากคุณอาจต้องการตัวเลือกเค้าโครงที่แตกต่างกันของเทมเพลตเดียวกัน Divi เสนอการออกแบบเว็บไซต์เป็นแพ็คที่ครอบคลุม ดังนั้นคุณจะได้รับเค้าโครงและสีแม่แบบที่แตกต่างกัน

เพื่อให้แม่นยำยิ่งขึ้น Divi มีเค้าโครงที่ออกแบบไว้ล่วงหน้าประมาณ 7-8 แบบในทุกชุดของเว็บไซต์ เมื่อพิจารณาว่าแต่ละอย่างถูกสร้างขึ้นอย่างสมบูรณ์คุณสามารถปรับใช้เค้าโครงได้อย่างง่ายดายโดยไม่ต้องปรับโครงสร้างพื้นฐานซ้ำ คุณแค่ปรับแต่งสองสามอย่างที่นี่และที่นั่น

ตอนนี้เพื่อค้นหาตัวเองที่สมบูรณ์แบบสำหรับคุณ WooCommerce ร้านค้าออนไลน์เพียงแค่เลื่อนดูหมวดหมู่ไซต์ต่างๆบนไฟล์ Divi ธีม หรือใช้คำหลักเพื่อค้นหาตัวเลือกทั้งหมดพร้อมกัน

ในที่สุดมันใช้เวลาไม่นานในการระบุสิ่งที่เหมาะสม Divi รูปแบบร้านค้าออนไลน์ คุณต้องรวมเข้ากับไฟล์ WooCommerceและคุณจะสามารถสร้างไซต์อีคอมเมิร์ซ WordPress ที่น่าสนใจได้

สิ่งที่โดดเด่นอย่างยิ่งอย่างหนึ่งที่คุณจะสังเกตเห็นได้ก็คือ Divi ไม่ได้เน้นที่รูปลักษณ์เพียงอย่างเดียว WooCommerce เค้าโครงที่มาพร้อมกับ Divi ธีมถูกสร้างขึ้นโดยคำนึงถึงฟังก์ชันการทำงานด้วยเช่นกัน

ดังนั้นนอกจากหน้าร้านค้าทั่วไปเช่นการชำระเงินสินค้าและรถเข็นแล้ว Divi รวมโมดูลอีคอมเมิร์ซโดยค่าเริ่มต้น โดยเฉพาะอย่างยิ่งคุณจะได้รับส่วนต่างๆเช่นผลิตภัณฑ์แนะนำสินค้าลดราคาและอื่น ๆ อีกมากมาย

Is Divi เหมาะสำหรับ WooCommerce?

ทุกสิ่งพิจารณา, Divi ได้รับความนิยมมากขึ้นเรื่อย ๆ เนื่องจากโดยพื้นฐานแล้วเป็นโซลูชันธีม WordPress แบบ all-in-one

รวมกัน Divi Page Builder และ Divi กระทู้ เสนอทุกอย่างที่คุณต้องการในการตั้งค่าไซต์ WordPress ประเภทใดก็ได้ และนั่นรวมถึงฟังก์ชั่นการใช้งานที่ครบครัน WooCommerce จัดเก็บด้วยความสามารถหลักของอีคอมเมิร์ซ

???? โดยสังเขป, Divi เป็นตัวเลือกที่ควรค่าแก่การพิจารณาสำหรับไฟล์ WooCommerce ไซต์เนื่องจาก:

• คุณสามารถปรับแต่งของคุณ WooCommerce เว็บไซต์ผ่านโปรแกรมแก้ไขภาพแบบลากแล้ววาง
• Divi ช่วยให้คุณสามารถบันทึกการปรับแต่งของคุณเป็นองค์ประกอบส่วนกลางในทุกเลย์เอาต์
• มันมาพร้อมกับรูปแบบเว็บไซต์ที่สร้างไว้ล่วงหน้ากว่า 20 แบบ
• คุณสามารถส่งออกเลย์เอาต์ได้อย่างง่ายดายและต่อมาใช้ประโยชน์จากพวกเขาในเว็บไซต์อื่น ๆ
• คุณสามารถออกแบบไฟล์ WooCommerce จัดเก็บด้วยคอลัมน์แถวและองค์ประกอบเนื้อหาหลายรายการ
• ทั้งหมด WooCommerce เค้าโครงได้รับการปรับให้เหมาะสมสำหรับอุปกรณ์เคลื่อนที่
• เช่นเดียวกับ MS Word การแก้ไขเนื้อหาข้อความทำได้ง่ายเพียงคลิกแล้วพิมพ์
• กระบวนการปรับแต่งเว็บไซต์ทั้งหมดจะถูกติดตามแบบเรียลไทม์ดังนั้นจึงให้ตัวอย่างสดของการเปลี่ยนแปลงการออกแบบทั้งหมด
• WooCommerce เค้าโครงมาพร้อมกับหน้าร้านค้าออนไลน์หลักและโมดูล

ขั้นตอนที่ 1: ลงทะเบียนด้วยธีมสุดหรูเพื่อเข้าถึง Divi

เริ่มต้นด้วยการไปที่ หน้าผลิตภัณฑ์ Elegant Themes สำหรับ Divi ธีม WordPress หน้านี้มีตัวเลือกสำหรับการสาธิตธีมและปุ่มดาวน์โหลดด่วน Elegant Themes ขายธีมโดยใช้โครงสร้างการชำระเงินแบบรายปีหรือแบบครั้งเดียวซึ่งเหมาะสำหรับนักพัฒนาที่มีไซต์ไคลเอ็นต์หลายแห่งหรือผู้ที่ใช้งานเว็บไซต์อีคอมเมิร์ซ คุณไม่สามารถซื้อเพียงธีมเดียว แต่เป็นไฟล์ แผนส่วนบุคคล สำหรับ $ 67 ต่อปีจะคล้ายกับสิ่งที่คุณอาจจ่ายสำหรับชุดรูปแบบปกติและคุณสามารถหยุดการชำระเงินรายปีหากคุณไม่ต้องการการสนับสนุนอีกต่อไป อย่าลังเลที่จะเล่นกับชุดรูปแบบก่อนที่คุณจะยอมรับการชำระเงิน

ขั้นตอนที่ 2: ติดตั้ง Divi บนไซต์ WordPress ของคุณ

เมื่อคุณสมัครใช้งานคลิกที่ปุ่มดาวน์โหลดสำหรับธีม สิ่งนี้ทำให้ธีมเป็นไฟล์ซิปบนคอมพิวเตอร์ของคุณ ไปที่แท็บลักษณะที่ด้านหลังของไซต์ WordPress ของคุณและคลิกที่ตัวเลือกชุดรูปแบบ

ขั้นตอนที่ 3: คลิกที่ปุ่มเพิ่มใหม่

คลิกที่ปุ่มอัปโหลดธีม ค้นหาและอัปโหลดไฟล์ zip ของธีม ทำตามขั้นตอนเพื่อเปิดใช้งานชุดรูปแบบโดยสมบูรณ์แล้วคุณควรจะเห็นชุดรูปแบบที่ส่วนหน้าของไซต์ของคุณ

ขั้นตอนที่ 4: ตั้งค่าไฟล์ WooCommerce เก็บที่อุณหภูมิ:

ถ้าคุณไปที่ Divi หน้าเอกสารเกี่ยวกับธีม คุณจะพบกับเกือบทุกเครื่องมือและคุณสมบัติที่คุณสามารถใช้กับธีม แต่เราจะมุ่งเน้นที่การตั้งค่าเว็บไซต์อีคอมเมิร์ซเป็นหลัก รางวัล Divi ชุดรูปแบบ เข้ากันได้กับ WooCommerce เพื่อให้คุณสามารถแสดงผลิตภัณฑ์ทั้งหมดของคุณได้

สิ่งที่ยอดเยี่ยมคือการเริ่มต้น SiteGround ติดตั้งลงทะเบียนแล้ว WooCommerce บนเว็บไซต์ WordPress ของคุณคุณจึงไม่ต้องกังวลกับการติดตั้งหรือตั้งค่า ควรมีอยู่แล้วในแดชบอร์ดของคุณ

ขั้นตอนที่ 5: เพิ่มผลิตภัณฑ์แรกของคุณไปที่ WooCommerce

ในทางเทคนิคคุณมีการตั้งค่าไซต์อีคอมเมิร์ซทั้งหมดแล้ว แต่เราต้องการเพิ่มผลิตภัณฑ์บางอย่างเพื่อให้ดูเหมือนไซต์อีคอมเมิร์ซที่ส่วนหน้า ไปที่แดชบอร์ด WordPress ของคุณคลิกที่แท็บผลิตภัณฑ์ด้านล่าง WooCommerce และคลิกที่รายการเพิ่มผลิตภัณฑ์

ขั้นตอนที่ 6

นี่จะแสดงหน้าผลิตภัณฑ์ใหม่ให้คุณกรอก มันดูคล้ายกับโปรแกรมแก้ไขหน้า WordPress ใด ๆ ยกเว้นคุณสามารถเพิ่มชื่อผลิตภัณฑ์คำอธิบายและรูปภาพเด่นเพื่อให้ผู้คนเห็นว่าผลิตภัณฑ์มีลักษณะอย่างไรในเว็บไซต์ของคุณ

ขั้นตอนที่ 7: สำรวจไฟล์ WooCommerce คุณสมบัติ

หากคุณเลื่อนลงมาด้านล่างของพื้นที่คำอธิบายคุณจะพบทุกสิ่งที่เป็นไปได้ WooCommerce คุณสมบัติในการเล่นด้วย อย่าลังเลที่จะแก้ไขสิ่งต่างๆเช่นหมายเลข SKU สินค้าคงคลังการกำหนดราคาการจัดส่งและแอตทริบิวต์ คุณสมบัตินั้นกว้างใหญ่เกินกว่าที่ฉันจะร่างทั้งหมดได้ที่นี่ แต่คุณสามารถไปที่ไฟล์ WooCommerce หน้าเอกสารประกอบ เพื่อทำความเข้าใจทุกสิ่งที่คุณสามารถตั้งค่าบนไซต์อีคอมเมิร์ซของคุณ

ขั้นตอนที่ 8: สร้างโฮมเพจ

ประเด็นทั้งหมดนี้คือการ สร้างโฮมเพจ หรือหน้าปกติที่แสดงผลิตภัณฑ์ทั้งหมดของคุณเมื่อมีผู้เข้าชมไซต์ของคุณ ดังนั้นคุณควรไปที่ Pages> Add New ทางด้านซ้ายมือของแดชบอร์ด WordPress ของคุณ

ขั้นตอนที่ 9: เพิ่มชื่อเรื่องสำหรับคุณ Divi หน้า

สร้างชื่อสำหรับหน้าของคุณ คลิกปุ่มใช้ตัวสร้างหน้าเว็บที่ด้านบนและแตะที่พื้นที่แทรกโมดูลเพื่อรวมส่วนหัวแบบเต็มความกว้าง คุณไม่ต้องเลือกส่วนหัวแบบเต็มความกว้าง แต่เราจะไปที่บทช่วยสอนนี้

ขั้นตอนที่ 10

คลิกปุ่มส่วนหัวแบบเต็มความกว้าง

ขั้นตอนที่ 11

กรอกรายละเอียดสำหรับชื่อไซต์ของคุณหัวข้อย่อยข้อความและสีข้อความ คุณสามารถเปลี่ยนป้ายชื่อผู้ดูแลระบบซึ่งส่วนใหญ่ใช้สำหรับการอ้างอิงของคุณเอง กดปุ่มบันทึกเมื่อเสร็จสิ้น

ขั้นตอนที่ 12

แตะที่แถบสามแถบทางด้านซ้ายของโมดูลส่วนหัวแบบเต็มความกว้างเพื่อเปลี่ยนการตั้งค่าเพิ่มเติม

ขั้นตอนที่ 13

ที่นี่คุณสามารถให้สีพื้นหลังที่สวยงามและรวมถึงวิดีโอสำหรับ บริษัท ของคุณ

ขั้นตอนที่ 14

เมื่อส่วนหัวเสร็จสมบูรณ์เราสามารถรวมโมดูลอีคอมเมิร์ซโดยคลิกที่ส่วนแทรกคอลัมน์

ขั้นตอนที่ 15

เลือกจำนวนคอลัมน์ที่คุณต้องการจากนั้นคลิกที่ตัวเลือกแทรกโมดูลที่ปรากฏขึ้น เลือกปุ่มช็อปใกล้ด้านล่าง

ขั้นตอนที่ 16

อย่าลังเลที่จะปรับเปลี่ยนวิธีที่คุณต้องการแสดงผลิตภัณฑ์ของคุณ ดังนั้นคุณอาจต้องการแสดงผลิตภัณฑ์ล่าสุดของคุณพร้อมกับ 12 รายการในหน้าเว็บ, คอลัมน์ไม่กี่คอลัมน์และวิธีการสั่งซื้อสินค้า คลิกปุ่มบันทึก

ขั้นตอนที่ 17: ดูตัวอย่างและเผยแพร่

เมื่อเสร็จแล้วคุณสามารถกดปุ่มดูตัวอย่างหรือเผยแพร่เพื่อดูการเปลี่ยนแปลงในส่วนหน้า อย่างที่คุณเห็นผลิตภัณฑ์แสดงอย่างชัดเจนและคุณสามารถกลับไปเปลี่ยนผลิตภัณฑ์หรือการตั้งค่าหน้าร้านของคุณบนแบ็กเอนด์ WordPress ได้ตลอดเวลา ขอแสดงความยินดี!

หากคุณมีคำถามใด ๆ เกี่ยวกับการตั้งค่า Divi ธีม WordPressโปรดแจ้งให้เราทราบในส่วนความเห็นด้านล่าง

สรุป

และนั่นคือทั้งหมดที่จะได้รับของคุณ Divi WooCommerce ร้านค้าออนไลน์เปิดใช้งานโดยใช้ไฟล์ SiteGround บัญชีโฮสติ้ง

ก้าวต่อไปคุณสามารถมั่นใจได้ว่า SiteGround จะจัดการกับข้อมูลทางเทคนิคที่สำคัญทั้งหมดเช่นการอัปเดต WordPress และ WooCommerce ความปลอดภัย. นั่นคือความแตกต่างพื้นฐานระหว่างการจัดการ WooCommerce โฮสติ้งและโซลูชันโฮสติ้งที่ใช้ร่วมกันทั่วไป ดังนั้นจึงช่วยให้คุณมีเวลาและพื้นที่ที่จำเป็นมากในการมุ่งเน้นไปที่ WooCommerce การจัดการร้านค้า.

และอย่างที่เราเคยเห็นมาแล้วนั่นน่าจะเป็นเรื่องง่ายกับไฟล์ Divi ธีม คุณสามารถเข้าถึงไฟล์ Divi WooCommerce เค้าโครงจากแบ็กเอนด์ WordPress ของคุณเพื่อปรับแต่งเพิ่มเติม หากต้องการ คุณสามารถเปลี่ยนการออกแบบทั้งหมดได้โดยการเปลี่ยนไปใช้เค้าโครงอื่นที่สามารถจัดการได้ WooCommerce จัดเก็บเช่นกัน. ทางเลือกเป็นของคุณ

หากคุณมีคำถามใด ๆ เกี่ยวกับการตั้งค่า Divi ธีม WordPress โปรดแจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง