วิธีปรับแต่งร้านค้าออนไลน์ของคุณด้วย WooCommerce Blocks

เผยแพร่แล้ว: 2020-02-27

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

มาดูบล็อก WooCommerce ที่มีอยู่และเรียนรู้วิธีใช้แต่ละบล็อก

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

ทำความรู้จักกับ WooCommerce Blocks

คุณสามารถวาง WooCommerce Blocks ได้ทุกที่ที่เปิดใช้งาน Block Editor: โพสต์ หน้า และประเภทโพสต์ที่กำหนดเอง เริ่มต้นด้วยการไปยังหน้าหรือโพสต์ที่คุณต้องการแก้ไข จากนั้นคลิกไอคอน " เพิ่มบล็อก " (ซึ่งคล้ายกับสัญลักษณ์ "บวก") ที่มุมซ้ายบน

สกรีนช็อตของตัวแก้ไขบล็อก แสดงวิธีเพิ่มบล็อกใหม่

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

เคล็ดลับสำหรับมือโปร: คุณยังสามารถเพิ่มบล็อกลงในเนื้อหาได้อย่างรวดเร็วโดยใช้แป้นพิมพ์ลัด `/' ตัวอย่างเช่น คุณสามารถดูบล็อค WooCommerce ที่มีได้โดยพิมพ์ `/woocommerce'

ตัวเลือกบล็อก WooCommerce

การคลิกที่บล็อกจะเพิ่มบล็อกลงในเพจของคุณและแสดงตัวเลือกต่างๆ ซึ่งเปลี่ยนแปลงไปตามบล็อกที่คุณเลือก

บล็อคสินค้า

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

สินค้าเด่น บล็อก

บล็อกสินค้าเด่นที่มีชื่อ ราคา และปุ่มซื้อตอนนี้

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

  • สีซ้อนทับ
  • ความทึบของพื้นหลัง
  • จุดโฟกัสของภาพ
  • การวางตำแหน่งพื้นหลัง

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

สินค้าทั้งหมด บล็อค

สินค้าทั้งหมด บล็อค แสดงสินค้าในตาราง

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

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

บล็อกตัวกรอง

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

  • กรองตามแอตทริบิวต์ เช่น สีหรือขนาด
  • กรองตามราคาต่ำสุดและสูงสุด
  • แสดงตัวกรองที่เลือกใช้งานอยู่

ตัวอย่างด้านล่างใช้ทั้งสามช่วงตึก:

ผลิตภัณฑ์ที่แสดงในตารางข้างตัวกรอง

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

บล็อกผลิตภัณฑ์ที่เลือกด้วยมือ

บล็อกผลิตภัณฑ์ที่เลือกด้วยมือในตาราง

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

หลังจากเพิ่มบล็อกแล้ว ให้เลือกผลิตภัณฑ์เฉพาะจากรายการหรือค้นหาผลิตภัณฑ์ที่คุณต้องการ

สกรีนช็อตแสดงตัวเลือกสำหรับผลิตภัณฑ์ที่เลือกเอง

ตัวเลือกสำหรับกลุ่มผลิตภัณฑ์ที่เลือกเอง ได้แก่:

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

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

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

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

ตัวอย่างด้านล่างมีหนึ่งแถวและห้าคอลัมน์จากหมวดหมู่ 'ดนตรี':

ตารางผลิตภัณฑ์จากหมวดหมู่เฉพาะ

บล็อคผลิตภัณฑ์เพิ่มเติม

มีกลุ่มผลิตภัณฑ์เพิ่มเติมบางส่วนที่ทำงานคล้ายกับที่กล่าวมาข้างต้น:

  • สินค้าตามแท็ก — แสดงสินค้าตามแท็ก
  • ผลิตภัณฑ์ตามคุณสมบัติ — แสดงผลิตภัณฑ์ตามคุณสมบัติ
  • สินค้ายอดนิยม — แสดงสินค้าพร้อมรีวิวที่ดีที่สุด
  • สินค้าลดราคา — แสดงสินค้าลดราคา
  • สินค้าขายดี — แสดงสินค้าขายดีของคุณ

บล็อกรีวิว

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

บทวิจารณ์ที่ระบุไว้ในคอลัมน์

บทวิจารณ์ทั้งหมด บล็อก

บทวิจารณ์ทั้งหมดบล็อกรายการบทวิจารณ์ในคอลัมน์เดียว

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

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

บทวิจารณ์โดย Product and Category blocks

บทวิจารณ์ตามหมวดหมู่

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

บล็อกค้นหาผลิตภัณฑ์

บล็อกการค้นหาที่แสดงด้านบนตัวกรองและถัดจากตารางผลิตภัณฑ์

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

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

ใช้ประโยชน์สูงสุดจากร้านค้าออนไลน์ของคุณด้วย WooCommerce Blocks

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

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

ติดตามข่าวสารล่าสุดเกี่ยวกับบล็อกล่าสุดของ WooCommerce