วิธีสร้างไซต์ WooCommerce ที่ขับเคลื่อนด้วย Elementor

ไม่เพียงพอที่แพลตฟอร์ม WordPress เองเป็นระบบจัดการเนื้อหา (CMS) ที่ได้รับความนิยมมากที่สุดในโลก เรายังมีเครื่องมือสร้างเพจและแพลตฟอร์มอีคอมเมิร์ซที่ได้รับความนิยมมากที่สุดใน Elementor และ WooCommerce ด้วย ด้วยเหตุนี้ การใช้ทั้งสามอย่างเพื่อสร้างร้านค้าออนไลน์ที่ดูโดดเด่นและมีประสิทธิภาพจึงเป็นเรื่องที่สมเหตุสมผล

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

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

ทำไม WordPress, Elementor และ WooCommerce จึงทำงานร่วมกันได้ดี

ควรพิจารณาให้ละเอียดยิ่งขึ้นว่า WordPress, Elementor และ WooCommerce สามารถรวมกันได้อย่างไร เพื่อช่วยคุณสร้างร้านค้าออนไลน์ระดับแนวหน้า

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

คุณยังมี WooCommerce อีกด้วย เนื่องจาก Automattic พัฒนาปลั๊กอิน จึงมีการรวมเข้ากับแกนหลักของ WordPress ได้ดีเยี่ยม แต่นั่นไม่ใช่ทั้งหมด

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

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

ในการถักสิ่งเหล่านี้เข้าด้วยกัน คุณมี Elementor นอกจากนี้ยังมีส่วนแบ่งการตลาดขนาดใหญ่ในสาขาของตนและมีฐานผู้ใช้จำนวนมาก

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

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

สิ่งที่เว็บไซต์ WooCommerce ต้องการจากตัวสร้างเพจ

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

โดยทั่วไปแล้ว ไซต์ WooCommerce ต้องการสิ่งต่อไปนี้จากตัวสร้างเพจ:

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

คุณควร (แน่นอน) ทราบความต้องการส่วนบุคคลของคุณด้วย ตัวอย่างเช่น คุณอาจพบว่าแบบฟอร์มและป๊อปอัปมีความสำคัญต่อร้านค้าและกลยุทธ์การขายของคุณ ข่าวดีก็คือ Elementor นั้นสามารถตอบสนองความต้องการของคุณได้มากกว่า

ตัวอย่างเช่น มีตัวสร้างป๊อปอัปที่ยอดเยี่ยมซึ่งทำงานได้ดีสำหรับการขาย ข้อเสนอที่จำกัดเวลา คูปอง และอื่นๆ อีกมากมาย:

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

วิธีการเลือกธีม WooCommerce ที่เหมาะสม

เราจะไม่ลงรายละเอียดมากมายในที่นี้ เนื่องจากเราจะกล่าวถึงสิ่งนี้ในบทช่วยสอนของเรา และยังรวบรวมธีมบางส่วนในบทความเฉพาะอีกด้วย

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

ถึงกระนั้น ยังมีธีมที่โดดเด่นอยู่สองสามข้อที่เราสามารถพูดถึงได้:

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

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

วิธีสร้างเว็บไซต์ WooCommerce ที่ขับเคลื่อนด้วย Elementor ใน 3 ขั้นตอน

ในส่วนที่เหลือของบทความนี้ เราจะแสดงวิธีใช้ Elementor และ WooCommerce ร่วมกันเพื่อสร้างไซต์อีคอมเมิร์ซ มีสามขั้นตอนที่ควรทราบ:

• ติดตั้งและตั้งค่า WooCommerce
• สร้างกลุ่มผลิตภัณฑ์ WooCommerce ของคุณ และใช้ Elementor เพื่อสร้างหน้าผลิตภัณฑ์
• ออกแบบหน้าร้านค้าโดยเฉพาะ อีกครั้งโดยใช้ Elementor

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

1. ติดตั้ง WooCommerce และตั้งค่า

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

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

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

2. สร้างผลิตภัณฑ์ WooCommerce ของคุณ

เมื่อคุณได้ติดตั้ง WooCommerce แล้ว คุณควรมองหาการสร้างผลิตภัณฑ์ในส่วนหลัง อีกครั้ง บทช่วยสอน WooCommerce ของเราครอบคลุมวิธีการทำอย่างละเอียด แต่นี่คือหมายเหตุของ Cliff:

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

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

ในการเริ่มต้น ให้คลิก เทมเพลต > เพิ่มใหม่ ภายใน WordPress:

จากที่นี่ เลือก ผลิตภัณฑ์เดียว จากเมนูดรอปดาวน์ ประเภทเทมเพลต และป้อนชื่อเพิ่มเติม:

ซึ่งจะเปิด ไลบรารีเทมเพลต เพื่อแสดงทุกบล็อกที่สร้างไว้ล่วงหน้าภายใน:

เมื่อคุณเห็นการออกแบบที่คุณชอบแล้ว ให้คลิกปุ่ม แทรก และ Elementor จะนำเข้าบล็อก:

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

เมื่อคุณมีเค้าโครงหน้าที่ต้องการแล้ว ให้คลิกปุ่มเผยแพร่สีเขียวที่ด้านล่างของหน้าจอ:

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

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

3. ออกแบบหน้าร้านค้าเฉพาะของคุณโดยใช้ Elementor และ WooCommerce

ประสบการณ์ผู้ใช้ (UX) ที่มีประโยชน์อย่างหนึ่งของ WooCommerce คือวิธีสร้างหน้าที่จำเป็นส่วนใหญ่ที่คุณต้องการสำหรับร้านค้าของคุณ หน้าร้านค้าระดับบนสุดเป็นสิ่งสำคัญที่สุด เนื่องจากเป็นกันสาดด้านหน้าที่ประดับประตู

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

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

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

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

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

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

บันทึกย่อเกี่ยวกับหน้าอื่น ๆ ที่สร้างขึ้นของ WooCommerce

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

มันน่าผิดหวัง แต่ก็เข้าใจ ถึงกระนั้น คุณยังสามารถใช้ Elementor เพื่อพัฒนาองค์ประกอบโดยรอบ แล้ววางฟังก์ชันเฉพาะของหน้าด้วยรหัสย่อ แม้ว่าจะไม่เหมาะ

หากการแก้ไขหน้าเหล่านี้ทั้งหมดมีความสำคัญสำหรับคุณ คุณจะต้องดูที่ Checkout Field Editor ($49 ต่อปี) และส่วนขยาย Custom Thank You Pages (เช่น $49 ต่อปี)

สรุปแล้ว

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

ตลอดโพสต์นี้ เราได้ดูวิธีใช้ Elementor และ WooCommerce ร่วมกันเพื่อสร้างร้านค้า เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอินทั้งสองแล้ว ภารกิจแรกของคุณคือการสร้างผลิตภัณฑ์พร้อมกับเพจที่เกี่ยวข้อง จากที่นั่น คุณต้องมีหน้าร้านค้าเฉพาะ – สิ่งที่ Elementor สามารถจัดการได้ ยิ่งไปกว่านั้น ฟังก์ชันพิเศษของปลั๊กอินตัวสร้างเพจ (เช่น ตัวสร้างป๊อปอัป และอื่นๆ) สามารถช่วยนำร้านค้าของคุณเข้าสู่สตราโตสเฟียร์ได้

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