วิธีแสดงผลิตภัณฑ์เด่นใน WooCommerce (3 วิธีง่ายๆ)

เผยแพร่แล้ว: 2022-03-14

กำลังมองหาวิธีง่ายๆ ในการแสดงผลิตภัณฑ์เด่นของ WooCommerce บนเว็บไซต์ของคุณหรือไม่?

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

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

ผลิตภัณฑ์เด่นของ WooCommerce คืออะไร?

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

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

คุณตั้งค่าผลิตภัณฑ์เด่นใน WooCommerce ได้อย่างไร?

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

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

Edit a WooCommerce product

ถัดไป ค้นหาแผง "เผยแพร่" ทางด้านขวามือของตัวแก้ไข WordPress จากนั้นคลิก แก้ไข ถัดจากหัวข้อ "การเปิดเผยแคตตาล็อก"

WooCommerce edit catalog visibility

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

WooCommerce featured product checkbox

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

WooCommerce quick edit featured products

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

WooCommerce featured prouducts star icon

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

เราจะแสดงให้คุณเห็นว่าต้องทำอย่างไรต่อไป

ฉันจะแสดงผลิตภัณฑ์เด่นใน WooCommerce ได้อย่างไร

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

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

สารบัญ
  1. วิธีที่ 1: แสดงผลิตภัณฑ์เด่นของ WooCommerce ด้วย SeedProd
  2. วิธีที่ 2: ใช้วิดเจ็ตผลิตภัณฑ์เด่นของ WooCommerce
  3. วิธีที่ 3: การใช้รหัสย่อผลิตภัณฑ์เด่นของ WooCommerce

วิธีที่ 1: แสดงผลิตภัณฑ์เด่นของ WooCommerce ด้วย SeedProd

วิธีแรกจะใช้ SeedProd เพื่อแสดงผลิตภัณฑ์เด่นหลายรายการต่อหน้าใน WooCommerce

SeedProd WordPress website builder

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

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

Wordpress landing page example

SeedProd ยังมีบล็อกและส่วนต่างๆ เพื่อช่วยปรับแต่งทุกส่วนของไซต์ของคุณ

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

ด้วยเหตุนี้ ต่อไปนี้คือวิธีแสดงผลิตภัณฑ์ WooCommerce ด้วยการตั้งค่าเด่นด้วย SeedProd

ขั้นตอนที่ 1. ติดตั้งและเปิดใช้งาน SeedProd

ขั้นตอนแรกคือการติดตั้ง SeedProd บนเว็บไซต์ WooCommerce ของคุณ

เริ่มต้นกับ SeedProd วันนี้

คุณสามารถปฏิบัติตามคู่มือนี้เกี่ยวกับวิธีติดตั้งปลั๊กอิน WordPress หากคุณต้องการความช่วยเหลือ

หลังจากติดตั้งไฟล์ .zip ของปลั๊กอิน SeedProd ให้ไปที่ SeedProd » การตั้งค่า และป้อนรหัสใบอนุญาต SeedProd ของคุณ

enter your license key

คุณสามารถค้นหารหัสใบอนุญาตได้ในส่วน "ดาวน์โหลด" ของแดชบอร์ดบัญชีของคุณบนเว็บไซต์ SeedProd

copy your seedprod license key

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

ขั้นตอนที่ 2 สร้างธีม WooCommerce

ขั้นตอนต่อไปคือการสร้างหน้าผลิตภัณฑ์ WooCommerce มี 2 ​​วิธีที่คุณสามารถทำได้ด้วย SeedProd:

ธีม WooCommerce ที่สร้างไว้ล่วงหน้า

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

ส่วนธีมส่วนบุคคล

หรือคุณสามารถสร้างส่วนต่างๆ ของร้านค้า WooCommerce ของคุณทีละรายการโดยใช้ปุ่มเทมเพลตของธีม

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

ในการสร้างธีม WooCommerce ใหม่ ให้ไปที่ SeedProd » Theme Builder แล้วคลิกปุ่ม Themes

add a theme template

การคลิกปุ่มนั้นจะเปิดไลบรารีธีม WordPress และ WooCommerce ของ SeedProd แต่ละธีมตอบสนองบนมือถือได้ 100% และคุณสามารถแก้ไขการออกแบบและเลย์เอาต์ด้วยตัวสร้างเพจของ SeedProd

SeedProd woocommerce starter theme

วางเมาส์เหนือการออกแบบใดๆ แล้วคลิกไอคอนเครื่องหมายถูกเพื่อนำเข้าไปยังตัวสร้างธีม เราจะใช้ “WooCommerce Starter Theme” สำหรับคู่มือนี้

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

Seedprod theme templates

เราจะแสดงวิธีการดำเนินการดังกล่าวโดยกำหนดหน้าร้านค้าเอง

ขั้นตอนที่ 3 เพิ่มตารางผลิตภัณฑ์เด่นของ WooCommerce

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

ค้นหาเทมเพลตหน้า "ร้านค้า" ในแดชบอร์ดตัวสร้างธีม แล้วคลิก แก้ไขการออกแบบ เพื่อเปิดตัวสร้างเพจแบบลากและวาง

Edit shop page in seedprod

เครื่องมือสร้างเพจของ SeedProd นั้นใช้งานง่ายมาก มีบล็อกและส่วนต่างๆ ทางด้านซ้าย และภาพตัวอย่างสดทางด้านขวา

SeedProd drag and drop page builder

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

  • เปลี่ยนหมายเลขคอลัมน์
  • แสดงสินค้าตามประเภทและหมวดสินค้า
  • แสดงเลขหน้า
  • เปลี่ยนการสั่งสินค้า
WooCommerce product grid settings

คุณสามารถปรับแต่งฟอนต์ ขนาดฟอนต์ สี ระยะห่าง และอื่นๆ ในแท็บขั้นสูง

Advanced product grid settings

การเพิ่มเนื้อหาในหน้าของคุณนั้นง่ายเหมือนกัน เพียงลากบล็อกจากแผงด้านซ้ายแล้ววางลงบนหน้าตัวอย่าง

นั่นคือสิ่งที่เราจะทำเพื่อเพิ่มสินค้าแนะนำในหน้าร้านค้าของคุณ

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

WooCommerce featured products grid seedprod

จากนั้นคลิกเพื่อเปิดการตั้งค่าบล็อก อย่างที่คุณเห็น บล็อกจะกรองผลิตภัณฑ์ WooCommerce ของคุณตามสถานะ "ผลิตภัณฑ์เด่น" โดยอัตโนมัติ

WooCommerce featured products grid settings seedprod

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

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

Advanced woocommerce featured products grid settings

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

  • คลังเก็บสินค้า
  • หน้าสินค้า
  • ส่วนหัวและส่วนท้าย
  • หน้าบล็อก
  • แถบด้านข้าง
  • หน้าแรก

ขั้นตอนที่ 4 เผยแพร่ธีม WooCommerce ของคุณ

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

ในการทำเช่นนั้น ให้ไปที่ SeedProd » Theme Builder และเปลี่ยน Enable SeedProd Theme สลับไปที่ตำแหน่ง "เปิด"

enable seedprod theme

แค่นั้นแหละ!

ตอนนี้คุณสามารถดูตัวอย่างธีม WooCommerce และดูเลย์เอาต์ผลิตภัณฑ์เด่นที่คุณกำหนดเองได้

SeedProd woocommerce featured products

วิธีที่ 2: ใช้วิดเจ็ตผลิตภัณฑ์เด่นของ WooCommerce

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

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

หากต้องการใช้วิธีนี้ ให้สร้างหรือแก้ไขหน้าแล้วคลิกไอคอนเครื่องหมายบวก (+) ในตัวแก้ไขบล็อกของ WordPress เพื่อเพิ่มบล็อกใหม่ จากนั้นพิมพ์ “WooCommerce” ในช่องค้นหาและคลิกบล็อก สินค้าเด่น

WooCommerce featured products block

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

Choose a featured product to display

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

  • คำอธิบาย
  • ราคา
  • โอเวอร์เลย์
  • ความทึบของภาพซ้อนทับ
WooCommerce featured products

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

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

WooCommerce featured products in grid

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

WooCommerce featured products sidebar widget

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

WooCommerce featured products in sidebar example

วิธีที่ 3: การใช้รหัสย่อผลิตภัณฑ์เด่นของ WooCommerce

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

หากต้องการใช้วิธีรหัสสั้น ให้แก้ไขหรือสร้างหน้าใหม่ จากนั้นวางรหัสย่อ WooCommerce ต่อไปนี้ลงในตัวแก้ไข

 [featured_products]
WooCommerce featured products shortcode

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

Featured products with the woocommerce shortcode

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

 [featured_products per_page="2" columns="2"]
featured products with custom woocommerce shortcode

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

ที่นั่นคุณมีมัน!

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

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

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