คำแนะนำในการใช้บล็อก Gutenberg สำหรับร้านค้า WooCommerce ของคุณ

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

ข้อได้เปรียบที่ดีที่สุดที่ Gutenberg เสนอให้เหนือตัวแก้ไขก่อนหน้า (หรือที่เรียกว่าตัวแก้ไข TinyMCE) คือไม่จำเป็นต้องรู้วิธีเขียนโค้ด หรือความจำเป็นในการทำความเข้าใจโครงสร้าง WordPress เพื่อทราบวิธีเพิ่มฟังก์ชันการทำงานเพิ่มเติมให้กับเว็บไซต์ WordPress หรือ WooCommerce เก็บ. อย่างไรก็ตาม หากคุณสะดวกใจกับตัวแก้ไข WordPress แบบเก่า คุณสามารถติดตั้งปลั๊กอินฟรีนี้ที่รู้จักกันในชื่อ Classic Editor โดย WordPress contributors ซึ่งให้ตัวเลือกแก่คุณในการปิดการใช้งาน Gutenberg ทั้งหมด หรือสลับไปมาระหว่างตัวแก้ไขเก่ากับ Gutenberg . Gutenberg ยังมีบล็อก Classic Editor ให้ผู้ใช้ใช้ฟังก์ชันแก้ไขแบบคลาสสิกภายใน Gutenberg! ฟังดูดีเกินไปที่จะเป็นจริง? มาดำดิ่งลงไปในโพสต์นี้หรือเป็นแนวทางในการใช้บล็อก Gutenberg สำหรับร้านค้า WooCommerce ของคุณ!

บล็อก Gutenberg สามารถเข้าถึงได้ผ่านหน้า WordPress ใด ๆ เมื่อคุณเพิ่มหน้าใหม่หรือแก้ไขหน้าที่มีอยู่ภายใน WordPress คุณจะเห็นสัญลักษณ์ “+” เมื่อคุณวางเมาส์เหนือพื้นที่เนื้อหาด้านซ้ายบนของหน้าจอ

มีบล็อกหลายประเภทที่ Gutenberg จัดเตรียมไว้สำหรับการใช้งานที่แตกต่างกัน:

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

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

• สินค้าตามหมวดหมู่
• สินค้าใหม่ล่าสุด
• ผลิตภัณฑ์พิเศษ
• สินค้าขายดี
• สินค้าลดราคา
• สินค้าคัดสรร
• สินค้ายอดนิยม
• สินค้าตามคุณสมบัติ

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

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

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

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

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

สำหรับสิ่งนี้ ก่อนอื่นเราจะเพิ่มบล็อกที่เรียกว่า Heading ซึ่งอยู่ใน Common Blocks:

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

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

ด้วยวิธีนี้ เราได้เพิ่มแถวต่อจากแถวสินค้าเด่นสำหรับผู้มาใหม่:

ต่อไป มาเพิ่มสินค้าขายดีในลักษณะเดียวกัน (หลังจากเพิ่มบล็อกหัวเรื่องแล้ว):

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

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

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

บนหน้าร้านค้า/หน้าแรกของเรา เราสามารถเพิ่มปุ่มที่ระบุว่าเรียกดูร้านค้า ซึ่งจะเชื่อมโยงไปยังหน้าร้านค้า

ในการเพิ่มปุ่ม เราต้องเลือกจากบล็อกองค์ประกอบเลย์เอาต์

เราจะเชื่อมโยงปุ่มนี้ไปยังหน้าร้านค้า

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

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

นี่คือลักษณะของหน้าของเราในตอนท้าย:

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