Elementor และ WooCommerce ร่วมกันสร้างหนึ่งในชุดการรวมที่ยืดหยุ่นที่สุดสำหรับการสร้างร้านค้าออนไลน์ที่กำหนดเองบน WordPress ขณะที่ WooCommerce จัดการฟังก์ชันการค้าอิเล็กทรอนิกส์ (ผลิตภัณฑ์, รถเข็น, การชำระเงิน) Elementor ให้คุณควบคุมการแสดงผลของหน้าเว็บร้านค้าเหล่านั้นได้ ในคู่มือนี้ เราจะพาคุณไปสร้างหน้า WooCommerce ที่สำคัญด้วย Elementor รวมถึงหน้าแสดงผลิตภัณฑ์, สินค้าในร้าน, และประสบการณ์การใช้รถเข็น
บทเรียนนี้ถือว่าคุณได้ติดตั้ง WordPress, WooCommerce, และ Elementor Pro แล้ว Elementor Pro จำเป็นสำหรับวิดเจ็ต WooCommerce—เวอร์ชันฟรีของ Elementor ไม่มีวิดเจ็ตเหล่านี้
สิ่งที่คุณต้องการก่อนเริ่มต้น
| ข้อกำหนด | ทำไมถึงจำเป็น | จะหามันได้ที่ไหน |
|---|---|---|
| WordPress 6.x+ | แพลตฟอร์ม CMS หลัก | wordpress.org |
| WooCommerce (ฟรี) | ฟังก์ชันการค้าอิเล็กทรอนิกส์ | ไดเรกทอรีปลั๊กอิน WordPress |
| Elementor Pro | วิดเจ็ต WooCommerce และ Theme Builder | PluginTheme.net |
| ธีมที่เข้ากันได้ | พื้นฐานสำหรับร้านค้าของคุณ | คู่มือการเลือกธีม |
| ผลิตภัณฑ์ตัวอย่าง | เนื้อหาสำหรับการออกแบบเทมเพลต | WooCommerce → เครื่องมือ → นำเข้าข้อมูลตัวอย่าง |
เข้าใจ WooCommerce Builder ของ Elementor
Elementor Pro รวมถึง WooCommerce Builder ที่เฉพาะเจาะจงภายในระบบ Theme Builder ของมัน ซึ่งช่วยให้คุณสร้างเทมเพลตที่กำหนดเองสำหรับ:
- หน้าแสดงผลิตภัณฑ์เดี่ยว: ควบคุมเลย์เอาต์ของหน้าแสดงผลิตภัณฑ์แต่ละหน้า
- คลังผลิตภัณฑ์: ปรับแต่งหน้าเว็บร้านค้าและหน้าประเภท
- หน้ารถเข็น: ออกแบบเลย์เอาต์รถเข็นที่กำหนดเอง
- หน้าเช็คเอาต์: ปรับแต่งเลย์เอาต์ฟอร์มการชำระเงิน
- หน้าโปรไฟล์ของฉัน: ออกแบบใหม่แดชบอร์ดบัญชีลูกค้า
แต่ละเทมเพลตใช้วิดเจ็ตที่เฉพาะเจาะจงของ WooCommerce ที่ดึงข้อมูลแบบไดนามิกจากผลิตภัณฑ์ของคุณ ซึ่งหมายความว่าคุณออกแบบเลย์เอาต์เพียงครั้งเดียว และมันจะใช้กับผลิตภัณฑ์ทั้งหมด (หรือประเภทเฉพาะ) โดยอัตโนมัติ
การสร้างหน้าแสดงผลิตภัณฑ์ที่กำหนดเอง
ขั้นตอนที่ 1: สร้างเทมเพลต
- ไปที่ เทมเพลต → Theme Builder ในแอดมิน WordPress ของคุณ
- คลิก "เพิ่มใหม่" และเลือก "ผลิตภัณฑ์เดี่ยว" เป็นประเภทเทมเพลต
- เลือกเทมเพลตหน้าแสดงผลิตภัณฑ์ที่สร้างไว้ล่วงหน้าหรือเริ่มจากผืนผ้าเปล่า
- ตัวแก้ไข Elementor จะเปิดขึ้นพร้อมวิดเจ็ต WooCommerce ที่มีอยู่ในแผง
ขั้นตอนที่ 2: เพิ่มวิดเจ็ต WooCommerce
วิดเจ็ต WooCommerce ที่สำคัญสำหรับหน้าแสดงผลิตภัณฑ์:
| วิดเจ็ต | สิ่งที่แสดง | ตัวเลือกการปรับแต่ง |
|---|---|---|
| ภาพผลิตภัณฑ์ | แกลเลอรีพร้อมภาพขนาดย่อและกล่องแสง | เลย์เอาต์แกลเลอรี, ตำแหน่งภาพขนาดย่อ, สลับซูม |
| ชื่อผลิตภัณฑ์ | ชื่อผลิตภัณฑ์ (H1) | ประเภทตัวอักษร, สี, การจัดตำแหน่ง |
| ราคาผลิตภัณฑ์ | ราคาเต็มและราคาขาย | ประเภทตัวอักษร, สีป้ายขาย, เลย์เอาต์ |
| การให้คะแนนผลิตภัณฑ์ | การให้คะแนนดาวจากรีวิว | สีดาว, ขนาด, การจัดตำแหน่ง |
| เพิ่มลงในรถเข็น | ตัวเลือกจำนวน + ปุ่มเพิ่มลงในรถเข็น | สไตล์ปุ่ม, สี, เลย์เอาต์จำนวน |
| คำอธิบายสั้นผลิตภัณฑ์ | สรุปผลิตภัณฑ์สั้นๆ | ประเภทตัวอักษร, ระยะห่าง |
| ข้อมูลเมตาผลิตภัณฑ์ | SKU, ประเภท, แท็ก | เลย์เอาต์, ประเภทตัวอักษร, ตัวแบ่ง |
| แท็บข้อมูลผลิตภัณฑ์ | คำอธิบาย, รีวิว, แท็บข้อมูลเพิ่มเติม | สไตล์แท็บ, ขอบ, ระยะห่าง |
| ผลิตภัณฑ์ที่เกี่ยวข้อง | ผลิตภัณฑ์จากประเภทเดียวกัน | คอลัมน์, จำนวน, ลำดับ |
| การขายข้าม | การขายข้ามที่เชื่อมโยงด้วยตนเอง |
ขั้นตอนที่ 3: แนวทางการออกแบบที่ดีที่สุด
หน้าผลิตภัณฑ์ที่มีการแปลงสูงจะปฏิบัติตามรูปแบบการออกแบบที่ผ่านการทดสอบ:
- เหนือเส้นแบ่ง: รูปภาพผลิตภัณฑ์ (ซ้าย, 50-60% ของความกว้าง) + ชื่อ, ราคา, คะแนน, คำอธิบายสั้น, และปุ่มเพิ่มลงในตะกร้า (ขวา, 40-50% ของความกว้าง)
- ใต้เส้นแบ่ง: แท็บข้อมูลผลิตภัณฑ์ (คำอธิบายเต็ม, ข้อมูลจำเพาะ, รีวิว)
- ส่วนล่าง: ผลิตภัณฑ์ที่เกี่ยวข้องและการขายเพิ่มเติมในรูปแบบตาราง (3-4 คอลัมน์)
- องค์ประกอบความเชื่อถือ: ข้อมูลการจัดส่ง, นโยบายการคืนสินค้า, สัญลักษณ์ความปลอดภัยใกล้กับปุ่มเพิ่มลงในตะกร้า
ให้ปุ่มเพิ่มลงในตะกร้าเห็นได้โดยไม่ต้องเลื่อนทั้งในเดสก์ท็อปและมือถือ ใช้สีที่ตัดกันสำหรับปุ่มเพื่อดึงดูดความสนใจ
การปรับแต่งหน้าร้านค้า (คลังผลิตภัณฑ์)
ขั้นตอนที่ 1: สร้างเทมเพลตคลัง
- ไปที่ เทมเพลต → ตัวสร้างธีม → คลังผลิตภัณฑ์
- เพิ่มเทมเพลตใหม่และเลือก "คลังผลิตภัณฑ์" เป็นประเภท
- กำหนดเงื่อนไขการแสดงผล (คลังทั้งหมด, หมวดหมู่เฉพาะ, หรือหน้าป้าย)
ขั้นตอนที่ 2: ตั้งค่าตารางผลิตภัณฑ์
วิดเจ็ต ผลิตภัณฑ์คลัง แสดงรายการผลิตภัณฑ์ของคุณด้วยตัวเลือกเหล่านี้:
- คอลัมน์: 2-6 คอลัมน์ (3-4 คอลัมน์ทำงานได้ดีสำหรับร้านค้าส่วนใหญ่)
- ผลิตภัณฑ์ต่อหน้า: 12-24 เป็นมาตรฐานสำหรับประสบการณ์ผู้ใช้
- การแบ่งหน้า: หน้าเลข, ปุ่ม "โหลดเพิ่มเติม", หรือเลื่อนแบบไม่สิ้นสุด
- ตัวเลือกการจัดเรียง: อนุญาตให้ลูกค้าจัดเรียงตามราคา, ความนิยม, หรือคะแนน
- ป้ายลดราคา: ปรับแต่งตำแหน่ง, สี, และข้อความของป้ายลดราคา
สำหรับร้านค้าที่มีผลิตภัณฑ์มากมาย ให้เพิ่มการกรองหมวดหมู่เหนือกริด คุณสามารถใช้วิดเจ็ตเมนูของ Elementor หรือปลั๊กอินกรองผลิตภัณฑ์เช่น JetWooBuilder สำหรับตัวเลือกการกรองขั้นสูง
การออกแบบหน้าตะกร้า
Elementor Pro ช่วยให้คุณปรับแต่งรูปแบบหน้าตะกร้า หน้าตะกร้าที่ดีควร:
- แสดงรูปภาพผลิตภัณฑ์, ชื่อ, ราคา, และจำนวนในตารางที่สะอาด
- แสดงยอดรวมที่กำลังดำเนินการอย่างเด่นชัด
- รวมปุ่ม "ดำเนินการช็อปปิ้งต่อ" ที่กลับไปยังหน้าร้านค้า
- แสดง เครื่องคิดเลขการจัดส่ง เพื่อให้ลูกค้าสามารถประมาณค่าจัดส่งได้
- แสดงผลิตภัณฑ์ที่ขายข้ามใต้ตารางตะกร้า
วิดเจ็ตตะกร้าของ Elementor แทนที่รูปแบบตะกร้า WooCommerce เริ่มต้นด้วยตัวแก้ไขภาพที่คุณสามารถปรับแต่งทุกองค์ประกอบ—ขอบตาราง, สีปุ่ม, ตัวอักษร, และระยะห่าง
การปรับแต่งหน้าชำระเงิน
หน้าชำระเงินมีผลโดยตรงต่ออัตราการแปลงของคุณ วิดเจ็ตชำระเงินของ Elementor Pro ให้การควบคุมเกี่ยวกับ:
- รูปแบบฟอร์ม: ฟอร์มการเรียกเก็บเงิน/การจัดส่งแบบหนึ่งคอลัมน์หรือสองคอลัมน์
- ตำแหน่งสรุปคำสั่งซื้อ: ข้างเคียงกับฟอร์มหรือด้านบน/ด้านล่าง
- การจัดสไตล์ปุ่ม: สี, ขนาด, และข้อความของปุ่มสั่งซื้อ
- ส่วนการชำระเงิน: รูปแบบปุ่มวิทยุหรือแท็บสำหรับวิธีการชำระเงิน
- ป้ายความเชื่อถือ: เพิ่มไอคอนความปลอดภัยและข้อความการรับประกันใกล้กับฟอร์มการชำระเงิน
สำหรับเคล็ดลับการเพิ่มประสิทธิภาพการแปลงในหน้าชำระเงิน ดูที่ คู่มือการเพิ่มประสิทธิภาพการชำระเงิน WooCommerce.
การพิจารณาด้านประสิทธิภาพ
Elementor เพิ่ม CSS และ JavaScript ลงในหน้าของคุณ สำหรับร้านค้า WooCommerce, ประสิทธิภาพมีความสัมพันธ์โดยตรงกับการแปลง จำเคล็ดลับเหล่านี้ไว้:
- ใช้ Flexbox containers แทนที่จะเป็น sections/columns เพื่อลดจำนวน DOM elements
- ปรับแต่งรูปภาพผลิตภัณฑ์: ใช้รูปแบบ WebP, ขนาดที่เหมาะสม, และการโหลดแบบขี้เกียจ ดูที่ คู่มือการปรับแต่งรูปภาพ
- จำกัดจำนวนวิดเจ็ต: วิดเจ็ตแต่ละตัวเพิ่มโค้ด; ใช้เฉพาะสิ่งที่คุณต้องการ
- เปิดใช้งานฟีเจอร์ประสิทธิภาพของ Elementor: การโหลดทรัพยากรที่ดีขึ้น, การโหลด CSS ที่ดีขึ้น
- ใช้ปลั๊กอินแคช: WP Rocket ทำงานได้ดีร่วมกับการตั้งค่า Elementor WooCommerce
ส่วนเสริมที่จำเป็นสำหรับ Elementor WooCommerce
ส่วนเสริม Elementor เหล่านี้ขยายความสามารถในการสร้าง WooCommerce:
| ส่วนเสริม | ฟีเจอร์หลักของ WooCommerce |
|---|---|
| JetWooBuilder | กริดผลิตภัณฑ์ขั้นสูง, เทมเพลตคลังข้อมูลที่กำหนดเอง, รูปแบบผลิตภัณฑ์เดี่ยวพร้อมตรรกะเงื่อนไข |
| Essential Addons Pro | กริดผลิตภัณฑ์, คารูเซลผลิตภัณฑ์, การชำระเงิน WooCommerce |
| Happy Elementor Addons | กริดหมวดหมู่ผลิตภัณฑ์, ตะกร้าขนาดเล็ก, คารูเซลผลิตภัณฑ์ |
คำถามที่พบบ่อย
ฉันต้องการ Elementor Pro สำหรับ WooCommerce หรือเวอร์ชันฟรีทำงานได้?
จำเป็นต้องใช้ Elementor Pro สำหรับวิดเจ็ตเฉพาะของ WooCommerce (ภาพผลิตภัณฑ์, เพิ่มในตะกร้า, แท็บข้อมูลผลิตภัณฑ์, ตะกร้า, การชำระเงิน, ฯลฯ) เวอร์ชันฟรีของ Elementor ไม่มีวิดเจ็ตเหล่านี้ คุณสามารถใช้เวอร์ชันฟรีในการออกแบบหน้าเว็บทั่วไป แต่เทมเพลต WooCommerce ที่กำหนดเองต้องการ Elementor Pro.
ฉันสามารถใช้ Elementor สำหรับหน้าการชำระเงินได้หรือไม่?
ใช่. Elementor Pro รวมวิดเจ็ตการชำระเงินที่แทนที่รูปแบบการชำระเงินเริ่มต้นของ WooCommerce คุณสามารถปรับแต่งฟิลด์ฟอร์ม, สรุปการสั่งซื้อ, ส่วนการชำระเงิน, และรูปแบบโดยรวม อย่างไรก็ตาม ต้องระวังการปรับแต่งที่หนักหน่วงที่อาจทำให้การเชื่อมต่อกับเกตเวย์การชำระเงินขัดข้อง—ควรทดสอบกระบวนการซื้อทั้งหมดหลังจากทำการเปลี่ยนแปลง.
ฉันจะสร้างรูปแบบหน้าผลิตภัณฑ์ที่แตกต่างกันสำหรับหมวดหมู่ที่แตกต่างกันได้อย่างไร?
ใน Theme Builder ของ Elementor คุณสามารถกำหนดเงื่อนไขการแสดงผลสำหรับแต่ละเทมเพลต สร้างเทมเพลตหน้าผลิตภัณฑ์หนึ่งสำหรับเสื้อผ้า (พร้อมตัวเลือกขนาด/สี), อีกหนึ่งสำหรับผลิตภัณฑ์ดิจิทัล (ไม่มีข้อมูลการจัดส่ง), และอื่นๆ เทมเพลตแต่ละตัวจะใช้เฉพาะกับผลิตภัณฑ์ในหมวดหมู่ที่กำหนด.
Elementor ทำให้ WooCommerce ช้าลงหรือไม่?
Elementor เพิ่มภาระ CSS และ JavaScript ให้กับหน้าใดๆ บนหน้าผลิตภัณฑ์ที่มีวิดเจ็ตมากมาย สิ่งนี้อาจเพิ่มเวลาในการโหลดขึ้น 0.5-1.5 วินาทีเมื่อเปรียบเทียบกับเทมเพลต WooCommerce เริ่มต้น การใช้ฟีเจอร์ประสิทธิภาพในตัวของ Elementor, การปรับแต่งภาพ, และการใช้ปลั๊กอินแคชช่วยลดผลกระทบนี้ สำหรับร้านค้าที่ต้องการประสิทธิภาพสูง ควรพิจารณาใช้ธีมที่เบากว่าเช่น GeneratePress.
ฉันสามารถใช้เทมเพลต Elementor WooCommerce กับธีมใดก็ได้หรือไม่?
เทมเพลต Elementor WooCommerce ส่วนใหญ่ทำงานได้กับธีมใดๆ ที่รองรับ WooCommerce อย่างไรก็ตาม บางธีมอาจมีการจัดรูปแบบหน้าผลิตภัณฑ์ของตนเองที่ขัดแย้งกับเทมเพลต Elementor ธีมเช่น Astra, GeneratePress, และ OceanWP ถูกออกแบบมาให้ทำงานร่วมกับ Elementor ได้อย่างราบรื่นและให้พื้นผิวที่สะอาดที่สุดสำหรับเทมเพลตที่กำหนดเอง.
รับ Elementor Pro สำหรับการสร้างร้าน WooCommerce
เข้าถึงวิดเจ็ต WooCommerce ทั้งหมด, Theme Builder, และเทมเพลต Pro กว่า 100 รายการ สร้างหน้าผลิตภัณฑ์ที่กำหนดเอง, คลังร้านค้า, และรูปแบบการชำระเงินในลักษณะภาพ.
เรียกดู Elementor Pro →
