WooCommerce, WordPress
ทำ filter กรองสินค้าแบบง่ายๆ ด้วย WooCommerce Attributes
สำหรับเว็บที่มีสินค้าจำนวนมาก ก่อนที่คุณจะเริ่มลงข้อมูลสินค้าต่างๆ คุณควรวางแผนเรื่องการจัดหมู่สินค้า ให้เข้าใจง่ายๆ ก่อน เพราะเว็บที่ดี คือเว็บที่ใช้งานง่าย เข้าใจง่ายๆ ลูกค้าอยากรู้อะไร ต้องทำให้เขาเข้าถึงข้อมูลนั้นๆ ไม่เกิน 3 คลิก
ในตัวของ WooCommerce ที่เป็นตัวฟรีนั้น เราสามารถจัดหมวดหมู่สินค้า ได้ 3 รูปแบบ คือ 1. แบ่งตาม categories (หมวดหมู่) 2. แบ่งตาม tags (ป้ายกำกับ) 3. แบ่งตาม attributes (คุณสมบัติ)
สารบัญเนื้อหา
- Product categories คืออะไร
- Product tags คืออะไร
- Product attributes คืออะไร
- การสร้าง Product attributes
- การเพิ่ม Attributes ที่ตัวสินค้า
- เรียกใช้ Filter Products by Attribute Widget ที่ Shop Sidebar
- สรุป
Product categories คืออะไร
Product categories คือ หมวดหมู่สินค้าที่เป็นประเภทหลักๆ ของสิ่งที่เราขาย
ตัวอย่าง หากคุณขายเสื้อผ้า หมวดหมู่สินค้า อาจจะเป็น “เสื้อยืด”, “เสื้อเชิ้ต” และ “กางเกง” เป็นต้น
นอกจากหมวดหมู่หลักแล้ว เรายังสามารถสร้างหมวดหมู่ย่อย ได้อีกด้วย
อ่านเพิ่มเติม: วิธีการสร้างหมวดหมู่สินค้าบน WooCommerce
Product tags คืออะไร
Product tags แปลว่า ป้ายกำกับ ทำหน้าที่รวมสินค้า ที่มีจุดน่าสนใจ คล้ายๆ กัน ซึ่งประยุกต์ใช้ได้หลากอย่าง แต่สิ่งนั้นไม่ใช่หมวดหมู่ของสินค้า
ตัวอย่างเช่น เรามี เสื้อ กางเกง หมวก ที่มีลวดลายเป็นแมว เหมือนกัน เราอาจจะติด tags ของสินค้าทั้ง 3 ชิ้นนั้นว่า “แมว” เผื่อว่าหากมีคนสนใจเสื้อผ้าที่มีลายแมว เขาก็จะได้หาสินค้าที่ชอบได้ง่ายขึ้นนั้นเอง
Product attributes คืออะไร
Product attributes คือ การจัดหมวดหมู่สินค้า ที่มีคุณสมบัติเฉพาะเจาะจง
ตัวอย่าง เช่น การจัดเรียงสินค้าตาม สี ไซต์ ขนาด ยี้ห้อ สถานที่ ฯลฯ
บน WooCommerce เราสามารถเรียกใช้ Product attributes ได้ 2 วิธี คือ
1) เรียกใช้ Product attributes ผ่าน WooCommerce widgets ที่ชื่อว่า “Filter Products by Attribute” หากเราเรียกใช้ widget นี้บน shop sidebar ลูกค้าสามารถใช้ฟังชั่นนี้ ในการค้นหาสินค้าที่เขาต้องการด้วยการแบ่งตาม attributes (คุณสมบัติ) ได้เลย
2) เรียกใช้ Product attributes ผ่านการลงสินค้าแบบ Variable product คือ สินค้าที่มีราคาแตกต่างกันตามคุณสมบัติ เช่น สีของเสื้อ, ไซต์ของเสื้อ เป็นต้น
อ่านเพิ่มเติม: การลงสินค้าประเภท Variable product
การสร้าง Product Attributes
ในหัวข้อนี้ผมจะพาคุณสร้าง Attributes โดยจะแบ่งคุณสมบัติ เป็น ชื่อ Brand กับ แบ่งคุณสมบัติตาม สี
1) ไปที่ Product > Attributes > พิมพ์ชื่อคุณสมบัติที่ต้องการ ในตัวอย่างนี้ผมขอพิมพ์ว่า Brand > จากนั้นคลิก Add attribute ให้เรียบร้อย
2) ตั้งค่า Configure terms (เงื่อนไขของคุณสมบัติ)
คลิกที่ Configure terms
ใส่ชื่อ Brand สินค้าที่เราต้องการลงไป
ผมลองสร้าง Brand มา 3 ยี้ห้อ ผลลัพธ์ที่ได้ก็จะเป็นประมาณนี้ครับ
3) ทำตามขั้นตอนสร้าง Attributes อีกครั้ง แต่รอบนี้ผมสร้างคุณสมบัติเป็น “Color” แทน โดยมีเงื่อนไขแบ่งตามสี เป็น Blue, Green, Black ผลลัพธ์ที่ได้ก็จะเป็นแบบนี้
การเพิ่ม Attributes ที่ตัวสินค้า
1) ไปที่หน้าแก้ไขสินค้าที่ต้องการ ดูในส่วนของ Product data > คลิก Attributes > เลือกชื่อ Attributes ที่ต้องการจากนั้น > คลิก Add
2) เลือก Value ทีเป็นชื่อ Brand ของสินค้าตัวนั้น
ทำเหมือนเดิมอีกรอบแต่ให้เลือก Attribute ที่เป็น Color
เรียกใช้ Filter Products by Attribute Widget ที่ Shop Sidebar
หลังจากที่เราแบ่งประเภทของ Attribute เสร็จเรียบร้อยแล้ว ขั้นตอนต่อมา เราต้องนำตัว Attribute มาทำเป็น Filter กรองสินค้าบน Shop Sidebar
เข้าหลังบ้านเว็บของเรา ไปที่ Appearance > Widgets > ลาก Widget Filter Products by Attribute มาวางที่ Shop Sidebar ได้เลยครับ
เมื่อทำทุกอย่างเรียบร้อย เราจะได้ผลลัพธ์การทำตัวกรองสินค้า WooCommerce แบบนี้ครับ
สรุป
การทำตัว Filter กรองสินค้า ด้วย Attributes แบบง่าย มีการใช้งานที่เรียบง่ายนี้ จะใช้ให้ลูกค้าของคุณ ค้นหาสิ่งที่เขาต้องการเร็วขึ้น แลtการทำเว็บ WooCommere ให้มีประสิทธิภาพ คำแนะนำของผมคือ คุณควรใช้ปลั๊กอินให้น้อยที่สุดครับ
ประชาสัมพันธ์
สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการสร้างเว็บร้านค้าออนไลน์ด้วย WordPress + Woocommerce แบบมืออาชีพ ในวันที่ 21 - 22 สิงหาคม 2564 นี้ ผมได้เปิดคอร์สสอน Woocommerce Expert แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 6 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้
รายละเอียดคอร์สเรียน
สร้างเว็บร้านค้าออนไลน์ Woocommerce expert
- ค่าเรียน 9,500 บาท 21 - 22 สิงหาคม 2564
- เวลาเรียน 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
บรรยากาศคลาสเรียน
