ภาพรวมของปลั๊กอินบล็อก WooCommerce ใหม่

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

ปลั๊กอินบล็อก WooCommerce

WooCommerce Blocks เป็นโปรแกรมเสริมใหม่สำหรับ WooCommerce ที่เพิ่ม 7 บล็อกใน Gutenberg:

1. ผลิตภัณฑ์พิเศษ
2. สินค้าคัดสรร
3. สินค้าขายดี
4. สินค้ายอดนิยม
5. สินค้าใหม่ล่าสุด
6. สินค้าลดราคา
7. สินค้าตามหมวดหมู่

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

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

บล็อกยังรวมถึงแท็บ Gutenberg Advanced มาตรฐานพร้อมฟิลด์ CSS ที่กำหนดเอง

เปิดใช้งานบล็อกผลิตภัณฑ์

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

คุณสามารถเปิดใช้งานบล็อกในรายการปลั๊กอินหรือโดยคลิกที่ปุ่มที่ด้านบนของแดชบอร์ด WordPress

การใช้บล็อก WooCommerce

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

เมื่อคุณเพิ่มบล็อคในหน้า สัญลักษณ์จะปรากฏบนหน้าซึ่งคุณสามารถคลิกเพื่อเพิ่มได้อย่างรวดเร็ว

มาดูแต่ละบล๊อกกัน

ผลิตภัณฑ์พิเศษ

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

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

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

สินค้าคัดสรร

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

การเลือกผลิตภัณฑ์จะเพิ่มไปยังเลย์เอาต์ภายในกริด

สินค้าขายดี

สินค้าขายดีไม่ให้คุณเลือกอะไรจากบล็อก แต่คุณยังสามารถปรับแต่งทั้งหมดได้ในการตั้งค่าทางด้านขวา ที่นี่ คุณสามารถเลือกจำนวนคอลัมน์และแถว (เลือกจาก 1-6 สำหรับแต่ละรายการ) กรองตามหมวดหมู่ และปรับ CSS

ในตัวอย่างนี้ ฉันเลือก 6 คอลัมน์ 2 แถว และหมวดหมู่เสื้อผ้า

สินค้ายอดนิยม

ผลิตภัณฑ์ที่มีคะแนนสูงสุดยังเพิ่มผลิตภัณฑ์ตามที่คุณเลือกบล็อก การตั้งค่ารวมถึงรูปแบบมาตรฐานสำหรับ 1-6 คอลัมน์และแถว กรองตามหมวดหมู่ และ CSS อันนี้กำลังแสดงการตั้งค่าเริ่มต้น

สินค้าใหม่ล่าสุด

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

สินค้าลดราคา

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

สินค้าตามหมวดหมู่

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

ในตัวอย่างนี้ ฉันได้เลือกหมวดหมู่ของฉัน ตั้งค่าคอลัมน์เป็น 4 แถวเป็น 2 และเรียงลำดับผลิตภัณฑ์ตามตัวอักษร

หน้าตัวอย่างที่มีบล็อก WooCommerce

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

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

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

นี่คือ CTA สั้น ๆ ที่เพิ่มบล็อกที่เลือกด้วยมือและบล็อกข้อความในคอลัมน์คู่

หน้าเรียบง่าย แต่ใช้งานได้จริง

สำหรับหน้านี้ ฉันได้เพิ่มสินค้าขายดีภายในเค้าโครงโพสต์บล็อก ฉันตั้งค่าเป็น 4 คอลัมน์และ 1 แถวและเลือกเสื้อผ้าเป็นหมวดหมู่

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

สำหรับอันนี้ ฉันได้เพิ่มเลย์เอาต์สองคอลัมน์และเพิ่มบล็อกข้อความและบล็อกสินค้าขายดีที่มี 2 คอลัมน์และ 2 แถว

จบความคิด

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

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

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

ภาพเด่นผ่าน Jomic / shutterstock.com