Variation Swatches ปลั๊กอินเพิ่มประเภทคุณลักษณะสินค้า

WooCommerce เป็นปลั๊กอินที่ช่วยเปลี่ยนให้ WordPress กลายเป็นเว็บร้านค้าออนไลน์เต็มรูปแบบ ปลั๊กอินตัวนี้เป็นของ Automattic ค่ายผู้สร้าง WordPress นั่นเอง เดิมทีนั้น WooCommerce เปิดตัวเป็นครั้งแรกในปี 2011 โดยนักพัฒนา 2 คนที่มีชื่อว่า James Koster กับ Mike Jolley โดยทั้งสองคนอยากจะทำปลั๊กอินที่คล้ายกับ Jigoshop ซึ่งเป็นปลั๊กอินของ WordPress e-commerce แบบโอเพ่นซอร์สจากบริษัท Jigowatt ของประเทศอังกฤษ

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

การลงสินค้าด้วยปลั๊กอิน WooCommerce นั้น เราสามารถกำหนดคุณลักษณะของสินค้า (Attribute) เพื่อใช้เป็นตัวเลือกในกรณีที่ลงสินค้าแบบ Variable Product หรือสินค้าที่มีหลายตัวเลือกได้ เช่น ถ้าเป็นเสื้อผ้าประเภทเสื้อผ้าก็ จะมีสี, ไซส์ เป็นต้น โดยในส่วนนี้เราสามารถกำหนดใน WooCommerce ได้เลย แต่จะสร้างได้แค่ข้อความเป็นชื่อของคุณลักษณะและมีตัวเลือก (Terms) อะไรบ้าง เช่น สร้างคุณลักษณะเป็น Color และมีตัวเลือก (Terms) เป็น Blue, Gray, Red เป็นต้น

ซึ่งก็จะมีปลั๊กอินที่ช่วยเพิ่มประเภทของคุณลักษณะ เพื่อใส่ตัวเลือกให้ได้มากกว่าการใส่ข้อความ โดยได้เคยแนะนำไปแล้ว 1 ตัว คือ Variation Swatches for WooCommerce ไปอ่านรีวิวกันได้ที่ -> การเพิ่มประเภทของคุณลักษณะสินค้าใน WooCommerce ในบทความนี้ก็จะขอแนะนำปลั๊กอินอีก 1 ตัวที่ใช้เพิ่มประเภทของคุณลักษณะสินค้าใน WooCommerce

ปลั๊กอินตัวนี้มีชื่อว่า Variation Swatches for WooCommerce by CartFlows จากผู้พัฒนา CartFlows เป็นปลั๊กอินที่ได้รับความนิยมอีกตัวนึ่ง ตั้งแต่เวอร์ชั่น 1.0 จนถึงเวอร์ชั่นปัจจุบันมียอดดาวน์โหลดไปแล้วกว่า 1.1 ล้านครั้ง ตัวปลั๊กอินใช้งานง่าย ไม่ต้องตั้งค่าหรือกำหนดค่าอะไรที่ซับซ้อนในตอนเร่ิมต้น

โพสนี้ยาว มีหัวข้ออะไรบ้าง แสดงหัวข้อทั้งหมด

Variation Swatches เข้ากันได้กับ

Page Builders ยอดนิยม

Elementor
Beaver Builder
Brizy Builder
Divi Builder
Thrive Architect
Gutenberg
Spectra Website Builder
Oxygen Builder
Bricks Builder
และอื่นๆ

ใช้งานได้กับทุก WooCommerce ธีม รวมถึง

Astra
Avada
Blocksy
Divi
Flatsome
GeneratePress
Hello Elementor
Hestia
Kadence
Neve
OceanWP

Variation Swatches for WooCommerce มีฟรีทั้งเวอร์ชั่น Pro โดยในเวอร์ชั่น Pro จะแตกต่างกันที่จำนวนเว็บไซต์ที่ใช้งานและคุณสมบัติ

ราคาเวอร์ชั่น Pro

เปรียบเทียบคุณสมบัติของ Starter – Plus – Pro

การติดตั้งปลั๊กอิน Variation Swatches for WooCommerce by CartFlows

ที่หลังบ้าน WordPress ไปที่ Plugins -> Add New Plugin

ที่หน้า Add Plugins ให้ใส่คำว่า Variation Swatches for WooCommerce by CartFlows ที่ช่อง Keyword

Install และ Activate ให้เรียบร้อย

เมื่อ Activate เรียบร้อยแล้ว ให้เข้าไปที่ Products -> Attributes

ในหน้า Add new attribute จะมีตัวเลือก Variation Swatches เพิ่มขึ้นมา และจะมีข้อความ Settings เมื่อกดจะเข้าไปที่หน้า Setting ของปลั๊กอิน Variation Swatches for WooCommerce by CartFlows โดย Type จะมีตัวเลือก 3 ชนิด คือ Label, Color, Image

ส่วน Shape หรือรูปทรงของ Type เลือกได้ 3 แบบคือ Square, Rounded Corner และ Circle

การเพิ่มคุณลักษณะสินค้า

ที่หน้า Add new attribute เพิ่มคุณลักษณะที่ต้องการ เช่นในตัวอย่างจะเพิ่ม Color และเลือก Type เป็น Color และเลือก Shape เป็น Circle ซึ่งหลังจากเลือก Shape แล้วจะมีตัวเลือก Size ขึ้นมาให้ใส่ขนาด จากนั้นคลิกที่ Add attribute

จากนั้นให้คลิกที่ Configure terms ของคุณลักษณะ Color ที่เพิ่งสร้างขึ้น ที่อยู่ในตารางทางด้านขวา เพื่อเข้าไปสร้างตัวเลือกของคุณลักษณะ Color

ต่อมาที่ Add new Color ให้ใส่ชื่อสีและคลิกที่ Color เพื่อเลือกสีหรือจะใส่เป็นโค้ดสีก็ได้ ให้ตรงกับชื่อสีที่ใส่ไว้ แล้วคลิกที่ปุ่ม Add new Color

สร้างให้ครบทุกสีที่ต้องการ

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

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

หน้าสินค้าเมื่อกำหนดคุณลักษณะสินค้าเรียบร้อยแล้ว

ส่วนการ Settings ค่าต่างๆของปลั๊กอิน Variation Swatches for WooCommerce by CartFlows ให้เช้าไปที่ WooCommerce -> Variation Swatches

อธิบายเมนูของ Variation Swatches for WooCommerce by CartFlows

Welcome

เป็นหน้าอธิบายปลั๊กอินมีลิงค์ไปยังหน้า Docs เพื่อเรียนรู้การใช้งานปลั๊กอิน รวมถึงส่วน Support

Settings

สำหรับตั้งค่าต่างๆ โดยจะมีเมนูย่อยอีก 3 เมนูคือ

General Settings ใช้เปิด/ปิดการแสดงผลของ Variation Swatches ในหน้า Product และ Shop Page

Global Styling ใช้ตั้งค่าเกี่ยวกับ Swatches เช่น สีพื้น, ให้แสดง Tooltip เมื่อนำเคอร์เซอร์เมาส์ไปวางเหนือ Swatches หรือไม่

Shop Page Styling ใช้ตั้งค่าของ Variation Swatches เวลาแสดงในหน้า Shop Page

How To

เป็นหน้าที่แนะนำเทคนิคต่างๆในการใช้ Variation Swatches

สรุป

ปลั๊กอิน Variation Swatches for WooCommerce by CartFlows ก็เป็นอีกหนึ่งตัวเลือกที่ใช้ในการเพิ่มประเภทของคุณลักษณะสินค้าใน WooCommerce ซึ่งจะทำให้หน้าสินค้ามีความน่าสนใจมากขึ้น จากเดิมที่เป็นการแสดงข้อความอย่างเดียวและการเลือกก็เป็นเมนู Dropdown คลิกแล้วเลือกข้อความซึ่งดูจืดชืดและน่าเบื่อเกินไป โดยปลั๊กอินตัวนี้มีคุณสมบ้ติใกล้เคียงกับ Variation Swatches for WooCommerce ที่เคยรีวิวไปแล้ว แต่ของค่าย CartFlows จะสามารถเลือก Shape ของ Variation Swatches และกำหนดขนาดได้อีกด้วย