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

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

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

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

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

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

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

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

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

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

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

ที่กล่าวถึงอีกหนึ่งบริการโฮสติ้งที่เราขอแนะนำสำหรับร้าน Divi WooCommerce คือ BlueHost. แม้ว่าฟีเจอร์ที่นี่จะไม่ตรงกับ SiteGround's แต่คุณยังคงได้รับโฮสติ้งที่เน้น 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 ในการต่ออายุในอนาคตซึ่งยังคงเป็นค่าใช้จ่ายที่เหมาะสมหากคุณพิจารณาคุณสมบัติทั้งหมดที่คุณได้รับในระยะยาว

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

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

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

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

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

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

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

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

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

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

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

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

Divi คืออะไร

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

ดังนั้นสิ่งที่พิเศษเกี่ยวกับชุดรูปแบบนี้ และมีอะไรที่โดดเด่นเกี่ยวกับ Divoo WooCommerce หรือไม่?

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

Divi คืออะไร

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

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

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

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

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

เครื่องมือสร้างลากและวางหน้า Divi

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

แต่ก็น่าสังเกตว่าผู้สร้างนี้ไม่ได้เชื่อมโยงกับธีม Divi โดยเฉพาะ มันมาเป็นปลั๊กอินเพิ่มเติมสำหรับทุกธีมเดียวที่ได้จาก Elegant Themes

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

การตั้งค่า divi

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

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

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

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

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

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

เลย์เอาต์เว็บไซต์ Divi WooCommerce ที่ออกแบบไว้ล่วงหน้า

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

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

เค้าโครงเว็บไซต์ divi

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

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

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

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

Divi เหมาะสำหรับ WooCommerce หรือไม่

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

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

???? สรุป Divi เป็นตัวเลือกที่คุ้มค่าที่จะพิจารณาสำหรับเว็บไซต์ WooCommerce ของคุณเพราะ:

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

ขั้นตอนที่ 1: ลงทะเบียนด้วย Elegant Themes เพื่อเข้าถึง Divi

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

ชุดรูปแบบ Divi WordPress

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

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

Wordpress ชุดรูปแบบใหม่

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

Wordpress เพิ่มชุดรูปแบบใหม่

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

อัปโหลดชุดรูปแบบ Wordpress

ขั้นตอนที่ 4: ตั้งค่า WooCommerce Store ของคุณ

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

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

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

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

WooCommerce เพิ่มผลิตภัณฑ์ใหม่

6 ขั้นตอน

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

อีคอมเมิร์ซเพิ่มเขตข้อมูลผลิตภัณฑ์ใหม่

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

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

คุณสมบัติ WooCommerce

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

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

Wordpress หน้าใหม่

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

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

WordPress สร้างหน้า

10 ขั้นตอน

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

เพิ่มส่วนหัว

11 ขั้นตอน

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

การปรับแต่งส่วนหัว

12 ขั้นตอน

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

การติดตั้ง WordPress woocommerce

13 ขั้นตอน

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

บิดปุ่มเหล่านี้ไปรอบ ๆ

14 ขั้นตอน

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

การตั้งค่าอีคอมเมิร์ซ Wordpress

15 ขั้นตอน

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

การตั้งค่าอีคอมเมิร์ซ Wordpress

16 ขั้นตอน

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

การตั้งค่าอีคอมเมิร์ซ Wordpress

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

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

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

สรุป

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

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

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

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

Divi
Rating: 5.0 - ตรวจสอบโดย

คาทาลินซอร์ซินี

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