ทำ filter กรองสินค้าแบบง่ายๆ ด้วย WooCommerce Attributes

WooCommerce Attributes

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

ในตัวของ WooCommerce ที่เป็นตัวฟรีนั้น เราสามารถจัดหมวดหมู่สินค้า ได้ 3 รูปแบบ คือ 1. แบ่งตาม categories (หมวดหมู่) 2. แบ่งตาม tags (ป้ายกำกับ) 3. แบ่งตาม attributes (คุณสมบัติ)

สารบัญเนื้อหา

บทความแนะนำสำหรับผู้เริ่มต้น WordPress

สอน SEO สอน WordPress สอน WooCommerce

Product categories คืออะไร

Product categories คือ หมวดหมู่สินค้าที่เป็นประเภทหลักๆ ของสิ่งที่เราขาย

ตัวอย่าง หากคุณขายเสื้อผ้า หมวดหมู่สินค้า อาจจะเป็น “เสื้อยืด”, “เสื้อเชิ้ต” และ “กางเกง” เป็นต้น

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

นอกจากหมวดหมู่หลักแล้ว เรายังสามารถสร้างหมวดหมู่ย่อย ได้อีกด้วย

หมวดหมู่ย่อย
sub categories

อ่านเพิ่มเติม: วิธีการสร้างหมวดหมู่สินค้าบน WooCommerce

Product tags คืออะไร

Product tags แปลว่า ป้ายกำกับ ทำหน้าที่รวมสินค้า ที่มีจุดน่าสนใจ คล้ายๆ กัน ซึ่งประยุกต์ใช้ได้หลากอย่าง แต่สิ่งนั้นไม่ใช่หมวดหมู่ของสินค้า

ตัวอย่างเช่น เรามี เสื้อ กางเกง หมวก ที่มีลวดลายเป็นแมว เหมือนกัน เราอาจจะติด tags ของสินค้าทั้ง 3 ชิ้นนั้นว่า “แมว” เผื่อว่าหากมีคนสนใจเสื้อผ้าที่มีลายแมว เขาก็จะได้หาสินค้าที่ชอบได้ง่ายขึ้นนั้นเอง

Product Tags

Product attributes คืออะไร

Product attributes คือ การจัดหมวดหมู่สินค้า ที่มีคุณสมบัติเฉพาะเจาะจง

ตัวอย่าง เช่น การจัดเรียงสินค้าตาม สี ไซต์ ขนาด ยี้ห้อ สถานที่ ฯลฯ

บน WooCommerce เราสามารถเรียกใช้ Product attributes ได้ 2 วิธี คือ

1) เรียกใช้ Product attributes ผ่าน WooCommerce widgets ที่ชื่อว่า “Filter Products by Attribute” หากเราเรียกใช้ widget นี้บน shop sidebar ลูกค้าสามารถใช้ฟังชั่นนี้ ในการค้นหาสินค้าที่เขาต้องการด้วยการแบ่งตาม attributes (คุณสมบัติ) ได้เลย

attributes

2) เรียกใช้ Product attributes ผ่านการลงสินค้าแบบ Variable product คือ สินค้าที่มีราคาแตกต่างกันตามคุณสมบัติ เช่น สีของเสื้อ, ไซต์ของเสื้อ เป็นต้น

variable product

อ่านเพิ่มเติม: การลงสินค้าประเภท Variable product

การสร้าง Product Attributes

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

1) ไปที่ Product > Attributes > พิมพ์ชื่อคุณสมบัติที่ต้องการ ในตัวอย่างนี้ผมขอพิมพ์ว่า Brand > จากนั้นคลิก Add attribute ให้เรียบร้อย

สร้าง Attribute

2) ตั้งค่า Configure terms (เงื่อนไขของคุณสมบัติ)

คลิกที่ Configure terms

configure terms

ใส่ชื่อ Brand สินค้าที่เราต้องการลงไป

product brand

ผมลองสร้าง Brand มา 3 ยี้ห้อ ผลลัพธ์ที่ได้ก็จะเป็นประมาณนี้ครับ

full brand

3) ทำตามขั้นตอนสร้าง Attributes อีกครั้ง แต่รอบนี้ผมสร้างคุณสมบัติเป็น “Color” แทน โดยมีเงื่อนไขแบ่งตามสี เป็น Blue, Green, Black ผลลัพธ์ที่ได้ก็จะเป็นแบบนี้

creat Attributes

การเพิ่ม Attributes ที่ตัวสินค้า

1) ไปที่หน้าแก้ไขสินค้าที่ต้องการ ดูในส่วนของ Product data > คลิก Attributes > เลือกชื่อ Attributes ที่ต้องการจากนั้น > คลิก Add

product data

2) เลือก Value ทีเป็นชื่อ Brand ของสินค้าตัวนั้น

value brand

ทำเหมือนเดิมอีกรอบแต่ให้เลือก Attribute ที่เป็น Color

value color

happy beautiful Asian young woman

บทความพิเศษ

50 เทคนิคทำ SEO ที่คุณอาจยังไม่เคยรู้มาก่อน ใครรู้ก่อนทำก่อนได้เปรียบ

อ่านบทความนี้

เรียกใช้ Filter Products by Attribute Widget ที่ Shop Sidebar

หลังจากที่เราแบ่งประเภทของ Attribute เสร็จเรียบร้อยแล้ว ขั้นตอนต่อมา เราต้องนำตัว Attribute มาทำเป็น Filter กรองสินค้าบน Shop Sidebar

เข้าหลังบ้านเว็บของเรา ไปที่ Appearance > Widgets > ลาก Widget Filter Products by Attribute มาวางที่ Shop Sidebar ได้เลยครับ

widget attributes

เมื่อทำทุกอย่างเรียบร้อย เราจะได้ผลลัพธ์การทำตัวกรองสินค้า WooCommerce แบบนี้ครับ

กรองสินค้า Woocommerce

สรุป

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

ประชาสัมพันธ์

สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการสร้างเว็บร้านค้าออนไลน์ด้วย WordPress + Woocommerce แบบมืออาชีพ ในวันที่ 12 - 13 พฤษภาคม 2563 นี้ ผมได้เปิดคอร์สสอน Woocommerce Expert  แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 6 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้ 

รายละเอียดคอร์สเรียน

สร้างเว็บร้านค้าออนไลน์ Woocommerce expert

สอน Woocommerce

  • ค่าเรียน 9,500 บาท 12 - 13 พฤษภาคม 2563
  • เวลาเรียน 10.00- 16.00 น.
  • เรียนกลุ่มเล็กรอบละ 6 คนเท่านั้น (ว่าง)
  • เราสอนด้วยธีม Flatsome Theme
    (No.1 Best selling Woocommerce Theme 2020)
  • สถานที่เรียน Seatz Station
  • ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
  • จองที่นั่งเรียนผ่าน Lind ID : padveewebschool ได้เลยครับ
สอบถามเพิ่มเติม ดูตารางเรียนรอบถัดไป

คอร์สเรียนนี้เหมาะกับใคร ?

  • เนื่องจากคอร์สเรียนนี้เราสอนเป็นกลุ่ม จึงไม่เหมาะกับทุกคน
  • คอร์สนี้เหมาะสำหรับผู้ที่เคยใช้งาน WordPress มาบ้าง รู้พื้นฐานแบบงูๆปลาๆ หากคุณเคยลง WordPress เอง ลงปลั๊กอินได้ เคยสร้าง page หรือ post แบบนี้เรียนได้
  • หรือหากคุณไม่เคยใช้งาน WordPress มาก่อนเลย แต่คุณมีทักษะไอที เช่น เคยใช้พวกโปรแกรมกราฟฟิค Photoshop, illustrator เคยใช้พวกโปรแกรมตัดต่อวีดีโอ อะไรก็ได้มาบ้าง
  • ถ้าคุณเคยใช้โปรแกรมดังกล่าวข้างต้น แสดงว่าคุณมีทักษะไอที สามารถลงเรียนคอร์สนี้ได้
  • เนื่องจากเราเรียนกันหลายคน หากผู้เรียนไม่มีทักษะไอทีเลยจะทำให้เรียนรู้ตามเพื่อนไม่ทันนั้นเอง

คอร์สเรียนนี้ไม่เหมาะกับใครบ้าง ?

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

แผนที่สถานที่เรียน (รอบสอนกลุ่ม)

สถานที่เรียน Seatz Station

ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี
ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3

seat-station

บรรยากาศคลาสเรียน

ใส่ความเห็น

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