คู่มือฉบับสมบูรณ์ WooCommerce Block

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

คุณต้องติดตั้งปลั๊กอิน WordPress WooCommerce Blocks เพื่อใช้บล็อกใหม่เหล่านี้ ปลั๊กอินนี้เป็นพื้นที่ทดสอบสำหรับฟีเจอร์ทดลองที่อาจถูกเพิ่มเข้าไปใน WooCommerce หลัก.

ในคู่มือปฏิบัติจริงนี้ เราจะพูดถึงฟีเจอร์ของ WooCommerce block และวิธีปรับแต่งฟีเจอร์เหล่านั้น. 

WooCommerce Block คืออะไร?

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

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

นอกจากนี้ พวกมันยังผสานรวมกับ WordPress block editor ได้อย่างราบรื่น ช่วยให้คุณสร้างหน้าเพจสินค้าแบบกำหนดเอง เลย์เอาต์หมวดหมู่ และประสบการณ์การช้อปปิ้งโดยใช้อินเทอร์เฟซแบบลากและวางที่คุ้นเคย.ext here ...

รายการฟีเจอร์ของ WooCommerce Block

หลังจากเข้าใจแล้วว่า WooCommerce block คืออะไร ต่อไปเราจะพูดถึงแต่ละฟีเจอร์ที่มีให้ทีละอย่าง:

• สินค้าทั้งหมด: แสดงสินค้าทั้งหมดในร้านในรูปแบบตาราง
• ตัวกรองสินค้าที่ใช้งานอยู่: แสดงตัวกรองสินค้าที่ใช้งานอยู่ในรูปแบบรายการหรือชิป (คล้ายกับปุ่ม)
• รีวิวทั้งหมด: แสดงรีวิวสินค้าทั้งหมด
• สินค้าขายดี: แสดงสินค้าขายดีในรูปแบบตาราง
• ชำระเงิน: แสดงแบบฟอร์มที่ให้ลูกค้าทำรายการสั่งซื้อให้เสร็จสมบูรณ์
• ตะกร้าสินค้า: แสดงตะกร้าสินค้า
• หมวดหมู่ที่แนะนำ: เน้นหมวดหมู่ผลิตภัณฑ์เฉพาะพร้อมปุ่มเรียกร้องให้ดำเนินการ
• สินค้าแนะนำ: แสดงสินค้าแนะนำที่เลือกไว้
• กรองตามราคา: แสดงช่วงราคาที่ลูกค้าสามารถใช้กรองสินค้าได้ คุณยังสามารถเปิดใช้งานช่วงราคาที่แก้ไขได้โดยคลิกปุ่มหรือข้อความที่นี่
• กรองตามสต็อก: อนุญาตให้กรองผลิตภัณฑ์ตามสถานะสต็อกที่มีอยู่ ฟีเจอร์นี้มีตัวเลือกในการแสดงผลิตภัณฑ์ที่มีในสต็อก หมดสต็อก หรือกำลังสั่งซื้อเพิ่ม
• กรองตามคะแนน: ช่วยให้ลูกค้ากรองสินค้าตามคะแนนได้
• กรองตามคุณสมบัติ: กรองสินค้าตามขนาดหรือสี
• ผลิตภัณฑ์ที่เลือกสรร: แสดงผลิตภัณฑ์ที่เลือกสรรในรูปแบบตาราง ช่วยให้คุณเลือกได้ว่าจะแสดงผลิตภัณฑ์ใดโดยเฉพาะ
• มินิคาร์ท: แสดงมุมมองแบบย่อของตะกร้าสินค้า
• สินค้าใหม่ล่าสุด: แสดงสินค้าล่าสุดที่จัดเรียงในรูปแบบตาราง สามารถปรับแต่งได้โดยการเพิ่ม/ลบองค์ประกอบต่างๆ เช่น ชื่อสินค้า ราคา คะแนน และปุ่มซื้อ
• สินค้าลดราคา: แสดงสินค้าที่กำลังลดราคาในรูปแบบตาราง และสามารถปรับแต่งได้โดยการเพิ่ม/ลบองค์ประกอบต่างๆ เช่น ชื่อสินค้า ราคา คะแนน และปุ่มซื้อ
• ค้นหาสินค้า: เพิ่มแถบค้นหาเพื่อช่วยให้ลูกค้าค้นหาสินค้าได้สะดวกขึ้น
• ผลิตภัณฑ์ตามแท็ก: แสดงผลิตภัณฑ์ที่มีแท็ก/ป้ายกำกับเฉพาะในรูปแบบตาราง
• สินค้าตามคุณลักษณะ: แสดงสินค้าที่มีคุณลักษณะเฉพาะ (สี ขนาด ฯลฯ) ในรูปแบบตาราง
• สินค้าตามหมวดหมู่: แสดงสินค้าตามหมวดหมู่ในรูปแบบตาราง
• รีวิวตามสินค้า: แสดงรีวิวที่จัดกลุ่มตามสินค้า
• รีวิวตามหมวดหมู่: แสดงรีวิวสินค้าจากหมวดหมู่ที่ระบุ
• ผลิตภัณฑ์เดี่ยว: แสดงมุมมองโดยละเอียดสำหรับผลิตภัณฑ์เดี่ยว
• สินค้าคะแนนสูงสุด: แสดงสินค้าที่มีคะแนนสูงสุดในรูปแบบตาราง

วิธีใช้บล็อกตารางสินค้าใน WooCommerce

นอกจากการเรียนรู้เกี่ยวกับคุณสมบัติที่มีอยู่ใน WooCommerce blocks แล้ว ลองมาใช้หรือเพิ่มตารางสินค้า (product grid) ใน WooCommerce กันดู ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งปลั๊กอิน WooCommerce blocks บนเว็บไซต์ของคุณแล้ว นี่คือวิธีเพิ่มมัน:

1. เปิดหน้าเพจหรือโพสต์ ที่คุณต้องการแสดงตารางสินค้า จากนั้นป้อนชื่อเรื่อง "สินค้า"

2. ที่เมนูนำทางด้านซ้าย คลิกปุ่ม (+) > เลื่อนลงไปที่ส่วน WooCommerce > เลือก "ตารางสินค้า"

3. จากนั้น เพื่อ กำหนดค่าบล็อก ให้ไปที่แผงด้านขวา

ในแผงนี้ คุณสามารถปรับแต่งหลายอย่างได้ รวมถึง:

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

วิธีเพิ่มสินค้าแนะนำลงในหน้าของคุณ

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

หากต้องการเพิ่มบล็อกสินค้าแนะนำ ให้ทำตามขั้นตอนเหล่านี้:

1. เปิดหน้าเว็บหรือโพสต์ที่คุณต้องการเพิ่ม เช่น หากคุณวางไว้เหนือตารางสินค้า ให้สร้างพื้นที่ในบริเวณนั้นแล้วคลิกปุ่ม "+" ที่ปรากฏขึ้น.

2. เลือกปุ่ม "+" บนแถบเครื่องมือบล็อกเพื่อเปิดรายการบล็อก จากนั้นค้นหาและเลือก "Featured Product".

3. เลือกสินค้าที่คุณต้องการไฮไลต์ จากนั้นคลิก "เสร็จสิ้น"
4. หากต้องการปรับแต่งรูปลักษณ์ของบล็อก ให้คลิก "การตั้งค่า" ในแผงการตั้งค่า คุณสามารถปรับเปลี่ยนหลายอย่างได้ เช่น:

• แสดงหรือซ่อนคำอธิบายสินค้าและราคา.
• กำหนดค่าการแสดงสื่อ (รูปภาพและวิดีโอ).
• เพิ่มข้อความทางเลือกสำหรับรูปภาพสินค้า.
• เลือกสีโอเวอร์เลย์ของบล็อก.
• ปรับความทึบของบล็อก.

5. หลังจากปรับแต่งแล้ว คุณสามารถเผยแพร่หรืออัปเดตหน้าเพื่อดูการแสดงบล็อกสินค้าแนะนำของคุณ.

วิธีเพิ่มบล็อกตัวกรองใน WooCommerce

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

หากต้องการเพิ่มบล็อกตัวกรอง ให้ทำตามขั้นตอนเหล่านี้:

1. เปิดหน้าเว็บหรือโพสต์ที่คุณต้องการวางบล็อกตัวกรอง.
2. กำหนดตำแหน่งที่ต้องการสำหรับวางบล็อกตัวกรอง.
3. บนแถบเครื่องมือของบล็อกเอดิเตอร์ ให้คลิกปุ่ม "+" แล้วค้นหาตัวเลือกการกรองของ WooCommerce เช่น Price Filter, Stock Filter, Attribute Filter และ Rating Filter.

ตอนนี้ มาพูดถึงตัวกรองแต่ละประเภทที่มีให้ใช้งานกัน. 

การเพิ่มตัวกรองตามราคา

Price Filter Product Block ช่วยให้คุณเพิ่มคุณสมบัติการกรองที่ให้ผู้ใช้เลือกช่วงราคาที่ต้องการได้ ช่วงราคาสามารถแสดงเป็นปุ่มที่แก้ไขได้หรือข้อความปกติ คุณสามารถเพิ่มปุ่มได้ตามต้องการและปรับระดับหัวข้อของปุ่มเหล่านั้น.

การเพิ่มตัวกรองตามคุณลักษณะ

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

การเพิ่มตัวกรองตามสต็อก

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

บล็อกตะกร้าสินค้าและการชำระเงิน

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

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

วิธีปรับแต่งหน้าร้านค้าบน WooCommerce

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

1. สร้างหน้าใหม่และตั้งชื่อว่า "Shop"

2. เพิ่ม บล็อกการค้นหาสินค้า

3. เพิ่ม Product Categories List บล็อก

จากนั้น ตั้งค่ารูปแบบการแสดงผลเป็นแบบดรอปดาวน์.

4. เพิ่มบล็อก ตัวกรองราคา
5. เพิ่มบล็อก สินค้าแนะนำ และเลือกสินค้าที่คุณต้องการไฮไลต์ กำหนดค่าตามความต้องการ

6. เพิ่มบล็อก สินค้าทั้งหมด

ตั้งค่าจำนวนคอลัมน์และแถวเป็น 2 และปิดตัวเลือกดรอปดาวน์การจัดเรียง.

7. สุดท้าย เผยแพร่หน้าเพื่อดูเลย์เอาต์สุดท้ายของหน้าร้านค้าที่คุณสร้างขึ้น.

สร้างร้านค้าออนไลน์ของคุณด้วย WooCommerce Block และขายสินค้าของคุณ

หลังจากสร้างหน้าช็อปแบบกำหนดเองด้วย WooCommerce Blocks สำเร็จแล้ว คุณก็สามารถเริ่มขายสินค้าทั้งแบบกายภาพและดิจิทัลได้ โดยเฉพาะสำหรับสินค้าดิจิทัล การเพิ่มปลั๊กอินดาวน์โหลดไฟล์อย่าง WP File Download Addon ถือเป็นสิ่งสำคัญ

ปลั๊กอินนี้ช่วยให้คุณขายสินค้าดาวน์โหลดดิจิทัลใน WooCommerce ได้ WP File Download Addon ทำให้การจัดการไฟล์และหมวดหมู่ไฟล์สำหรับสินค้าดิจิทัลใน WooCommerce เป็นเรื่องง่าย คุณสามารถสร้างสินค้าดาวน์โหลดดิจิทัลจำนวนมากที่เชื่อมโยงกับไฟล์เดียวหรือหลายไฟล์ได้อย่างรวดเร็ว.

นอกจากนี้ ปลั๊กอินนี้ยังผสานการทำงานกับ Dropbox, Google Drive, Microsoft OneDriveและฟีเจอร์ Social Locker คุณสามารถให้ไฟล์จากบริการคลาวด์เหล่านี้เป็นไฟล์ดาวน์โหลดดิจิทัลของ WooCommerce พร้อมการจำกัดการเข้าถึงอย่างเข้มงวดผ่านตัวเชื่อมต่อ API ของคลาวด์.

ด้วย WP File Download Addon การขายสินค้าดิจิทัลในร้านค้าออนไลน์ WooCommerce ของคุณจะสะดวกและมีประสิทธิภาพมากขึ้น หลังจากสร้างร้านค้าของคุณด้วย WooCommerce Blocks ปลั๊กอินนี้ช่วยเสริมการขายเนื้อหาดิจิทัลของคุณได้อย่างสมบูรณ์แบบ.

บทสรุป

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

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

WP File Download Addon เริ่มต้นที่ $49 ต่อปี และมีสมาชิกมากกว่า 60,000 คนใช้งานแล้ว คุณยังรออะไรอยู่? มาร่วมกับเราเพื่อการขายสินค้าดิจิทัลที่ดีขึ้น!