วิธีสร้างมุมมองรายการผลิตภัณฑ์ WooCommerce

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

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

เหตุใดจึงต้องสร้างมุมมองรายการผลิตภัณฑ์ใน WooCommerce

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

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

มุมมองกริด เริ่มต้นของผลิตภัณฑ์บนเว็บไซต์แสดงดังต่อไปนี้:

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

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

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

วิธีสร้างมุมมองรายการผลิตภัณฑ์ WooCommerce

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

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

มุมมองตาราง/รายการสำหรับ WooCommerce

มุมมองตาราง/รายการสำหรับ WooCommerce เป็นหนึ่งในปลั๊กอินฟรีที่ดีที่สุดในการสร้างมุมมองรายการผลิตภัณฑ์ มันใช้งานง่ายมากและเพียงแค่เพิ่มการสลับเพื่อเปิดใช้งานรายการหรือมุมมองกริดบนหน้าร้านค้า WooCommerce ของคุณ

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

คุณสมบัติหลัก:

• ปุ่มสลับรายการและกริด
• การปรับแต่งขั้นสูงสำหรับปุ่มสลับ
• ตัวเลือกสินค้าต่อหน้า
• รหัสย่อที่เป็นมิตร
• ความเข้ากันได้กับปลั๊กอิน WooCommerce ที่สำคัญ

ราคา:

Grid/List View สำหรับ WooCommerce เป็นปลั๊กอินฟรี มีอยู่ในที่เก็บปลั๊กอิน WordPress อย่างเป็นทางการ

ตารางผลิตภัณฑ์ WooCommerce

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

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

คุณสมบัติหลัก:

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

ราคา:

ตารางผลิตภัณฑ์ WooCommerce เป็นปลั๊กอินระดับพรีเมียมที่เริ่มต้นที่ 499 USD ต่อปี ประกอบด้วยใบอนุญาตไซต์ 20 ใบพร้อมการรับประกันคืนเงินภายใน 30 วันและการสนับสนุนลำดับความสำคัญ

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

สร้างมุมมองรายการผลิตภัณฑ์ WooCommerce โดยใช้ปลั๊กอิน

ในการสร้างมุมมองรายการผลิตภัณฑ์ WooCommerce เราจะใช้ Grid/List View สำหรับ WooCommerce ในการสาธิตนี้ ฟรี ใช้งานง่ายมาก และเป็นโซลูชันที่ตรงไปตรงมาในการสร้างมุมมองรายการสำหรับผลิตภัณฑ์

แต่ในการเริ่มใช้ปลั๊กอินใดๆ คุณต้องติดตั้งและเปิดใช้งานก่อน

1. ติดตั้งและเปิดใช้งานปลั๊กอิน

ในการติดตั้งปลั๊กอิน ให้ไปที่ ปลั๊กอิน > เพิ่มใหม่ จากแดชบอร์ด WordPress ของคุณ จากนั้นค้นหาคำหลักสำหรับปลั๊กอินและคลิก ติดตั้ง ทันทีหลังจากพบ

การติดตั้งจะเสร็จสมบูรณ์หลังจากนั้นสักครู่ ในที่สุด เปิดใช้งาน ปลั๊กอินหลังจากติดตั้งแล้ว

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

2. กำหนดการตั้งค่าปลั๊กอิน

เมื่อคุณเปิดใช้งานปลั๊กอินแล้ว คุณสามารถกำหนดการตั้งค่าเพื่อสร้างมุมมองรายการผลิตภัณฑ์ WooCommerce เปิด BeRocket > Grid/List View จากแดชบอร์ด WordPress ของคุณ คุณจะมีตัวเลือกการปรับแต่งทั้งหมดสำหรับมุมมองรายการผลิตภัณฑ์ของคุณที่นี่

การปรับแต่งหลักสามแบบได้แก่ ปุ่ม จำนวนผลิตภัณฑ์ และ CSS ที่กำหนดเอง

2.1. ตัวเลือกปุ่ม

ปลั๊กอินช่วยให้คุณปรับแต่ง ปุ่มต่างๆ ได้มากมายเพื่อสลับกริดหรือมุมมองรายการ สำหรับผลิตภัณฑ์

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

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

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

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

ทำการปรับเปลี่ยนที่จำเป็นทั้งหมดที่คุณต้องการ แล้วคลิก บันทึกการเปลี่ยนแปลง

2.2. ตัวเลือกการนับสินค้า

คุณยังสามารถ ปรับตัวเลือกการนับผลิตภัณฑ์ ได้โดยใช้ปลั๊กอิน Grid/List View สำหรับ WooCommerce เมื่อคุณสร้างมุมมองรายการผลิตภัณฑ์ ประการแรก คุณสามารถเปิดหรือปิดใช้งานเพื่อใช้การนับจำนวนผลิตภัณฑ์ได้

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

2.3. CSS/JavaScript แบบกำหนดเอง

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

คุณยังสามารถปิดใช้งานไฟล์ CSS ของ Font Awesome ได้จากที่นี่หรือเลือกเวอร์ชัน Font Awesome

หลังจากที่คุณได้เพิ่ม CSS หรือ JavaScript ที่กำหนดเองที่จำเป็นแล้ว อย่าลืม บันทึกการเปลี่ยนแปลง

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

และดังที่แสดงในการสาธิตด้านล่าง คุณสามารถสลับไปยังมุมมองรายการผลิตภัณฑ์โดยคลิกที่ ปุ่มมุมมองรายการ

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

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

โบนัส: เปิดใช้งานโหมดแค็ตตาล็อกใน WooCommerce

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

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

หลังจากที่คุณเปิดใช้งานธีมลูกของคุณแล้ว ให้ไปที่ ลักษณะที่ ปรากฏ > ตัวแก้ไขไฟล์ธีม และเปิดไฟล์ functions.php ของธีมของคุณ จากนั้น คุณสามารถเริ่มเพิ่มข้อมูลโค้ดที่ส่วนท้ายของตัวแก้ไขและ อัปเดตไฟล์

ไฟล์ธีมขึ้นอยู่กับธีมที่ใช้งานของเว็บไซต์ของคุณ เราใช้ธีม Divi ที่นี่ ดังนั้นเครื่องมือแก้ไขของคุณจึงอาจดูแตกต่างออกไปเล็กน้อย

ขั้นแรก คุณต้องลบปุ่มเพิ่มในรถเข็นแล้วซ่อนราคาของผลิตภัณฑ์ ดังนั้น คุณต้องเพิ่มข้อมูลโค้ดต่อไปนี้ในตัวแก้ไข

1. ลบปุ่มหยิบใส่รถเข็น

คุณสามารถใช้สคริปต์ต่อไปนี้เพื่อ ซ่อนปุ่มหยิบใส่ตะกร้า สำหรับหน้าร้านค้าและหน้าสินค้า ดังนั้นเพียงแค่วางลงในไฟล์ functions.php ของธีมของคุณ

 remove_action ( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

ฟังก์ชันนี้จะลบหน้าเพิ่มในรถเข็นสำหรับทั้งหน้าผลิตภัณฑ์ WooCommerce และหน้าร้านค้า

หากคุณต้องการ ทำให้สินค้า ไม่สามารถซื้อได้ คุณสามารถเพิ่มข้อมูลโค้ดต่อไปนี้ได้เช่นกัน

 add_filter( 'woocommerce_is_purchasable', '__return_false');

นอกจากนี้ยังจะแทนที่ปุ่มเพิ่มในรถเข็นด้วยปุ่ม "อ่านเพิ่มเติม"

2. ซ่อนราคาสินค้า

คุณสามารถซ่อนราคาสินค้าได้หลายวิธีใน WooCommerce สามารถซ่อนไว้สำหรับผู้ใช้ทั้งหมดหรือทุกคนยกเว้นผู้ดูแลระบบ

หากคุณต้องการ ซ่อนราคาสินค้าสำหรับผู้ใช้ทั้งหมด ให้ ใช้สคริปต์ต่อไปนี้:

 add_filter( 'woocommerce_get_price_html', 'QuadLayers_remove_price');
ฟังก์ชัน QuadLayers_remove_price($price){
กลับ ;
}

อีกทางหนึ่ง หากคุณต้องการ ซ่อนราคาสำหรับทุกคน ยกเว้น admin ให้ใช้ข้อมูลโค้ดต่อไปนี้:

 add_filter( 'woocommerce_get_price_html', 'QuadLayers_remove_price');
ฟังก์ชัน QuadLayers_remove_price($price){
ถ้า ( is_admin() ) คืนค่า $price;
กลับ ;
} 

นอกจากนี้ คุณยังสามารถ ซ่อนสินค้าเฉพาะในหน้าร้านค้าได้ หากต้องการ สิ่งที่คุณต้องทำคือวางข้อมูลโค้ดต่อไปนี้ลงในไฟล์ functions.php

 add_filter( 'woocommerce_after_shop_loop_item_title', 'remove_woocommerce_loop_price', 2 );
ฟังก์ชั่น remove_woocommerce_loop_price() {
if( ! is_shop() ) ส่งคืน; // ซ่อนราคาเฉพาะในเพจร้านเท่านั้น
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
}

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

บทสรุป

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

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

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

ในระหว่างนี้ ต่อไปนี้คือบทความบางส่วนของเราที่คุณอาจสนใจ:

• วิธีปรับแต่งแกลเลอรีผลิตภัณฑ์ WooCommerce
• เปลี่ยนสินค้าในรถเข็นข้อความ
• วิธีเพิ่มรูปภาพสินค้าใน WooCommerce Checkout