WordPress เป็นเครื่องมือที่ใช้ในการสร้างเว็บไซต์ได้หลายประเภท โดยเว็บร้านค้าขายของออนไลน์ก็เป็นอีกประเภทหนึ่งที่นิยมสร้างกันด้วย WordPress ด้วยตัว WordPress เองนั้นไม่สามารถสร้างเว็บร้านค้าขายของออนไลน์ได้ด้วยตัวเอง ต้องมีตัวช่วยซึ่งก็คือปลั๊กอินที่มีชื่อว่า WooCommerce จาก Automattic ค่ายผู้สร้าง WordPress นั่นเอง สาเหตุที่ทาง Automattic ไม่รวมเอาส่วนที่ใช้สร้างร้านค้าไว้ใน WordPress เลยจะได้ไม่ต้องลงปลั๊กอินให้ยุ่งยาก ก็น่าจะเพราะไม่ใช่ทุกคนจะใช้ WordPress ในการสร้างร้านค้าออนไลน์ การแยกส่วนออกมาและเมื่อต้องการใช้ก็ลงปลั๊กอินแทน ก็น่าจะดีกว่า
การลงสินค้าด้วยปลั๊กอิน WooCommerce นั้น เราสามารถกำหนดคุณลักษณะของสินค้า (Attribute) เพื่อใช้เป็นตัวเลือกในกรณีที่ลงสินค้าแบบ Variable Product หรือสินค้าที่มีหลายตัวเลือกได้ เช่น ถ้าเป็นเสื้อผ้าประเภทเสื้อผ้าก็ จะมีสี, ไซส์ เป็นต้น โดยในส่วนนี้เราสามารถกำหนดใน WooCommerce ได้เลย แต่จะสร้างได้แค่ข้อความเป็นชื่อของคุณลักษณะและมีตัวเลือก (Terms) อะไรบ้าง เช่น สร้างคุณลักษณะเป็น Color และมีตัวเลือก (Terms) เป็น Blue, Gray, Red เป็นต้น
ตัวช่วยที่ทำให้สามารถเพิ่มประเภทของคุณลักษณะ เพื่อใส่ตัวเลือกให้ได้มากกว่าการใส่ข้อความ ก็คือการใช้ปลั๊กอิน โดยปลั๊กอินที่ใช้งานในลักษณะนี้ก็มีอยู่หลายตัว แต่ในวันนี้จะขอแนะนำปลั๊กอินที่มีชื่อว่า Variation Swatches for WooCommerce จากผู้พัฒนา GetWooPlugins เป็นปลั๊กอินที่ได้รับความนิยมมากที่สุดตัวนึง ตั้งแต่เวอร์ชั่น 1.0 จนถึงเวอร์ชั่นปัจจุบันมียอดดาวน์โหลดไปแล้วกว่า 7 ล้านครั้ง
ปลั๊กอิน Variation Swatches for WooCommerce จะช่วยเพิ่มประเภทของคุณลักษณะ (Attribute) ของสินค้าว่าเป็น Color, Image, Button และ Radio เมื่อเลือกประเภทแล้วก็จะมาเลือกสี ใส่รูปภาพหรือปุ่มสำหรับประเภทของคุณลักษณะตามที่ได้เลือกไว้ โดยมีเวอร์ชั่นฟรีทั้งเวอร์ชั่น Pro
เวอร์ชั่น Pro จะมีสองแบบคือแบบรายปีกับแบบตลอดชีพ
Yearly Plan
- Stater | ราคาปกติ $99 | ราคาพิเศษ $49 (แล้วแต่โปรโมชั่น อาจไม่ใช่ราคานี้ตลอด) | ใช้ได้ 1 เว็บไซต์
- Business | ราคาปกติ $249 | ราคาพิเศษ $149 (แล้วแต่โปรโมชั่น อาจไม่ใช่ราคานี้ตลอด) | ใช้ได้ 5 เว็บไซต์
- Developer | ราคาปกติ $449 | ราคาพิเศษ $299 (แล้วแต่โปรโมชั่น อาจไม่ใช่ราคานี้ตลอด) | ไม่จำกัดเว็บไซต์
Lifetime Plan
- Stater | ราคาปกติ $299 | ราคาพิเศษ $149 (แล้วแต่โปรโมชั่น อาจไม่ใช่ราคานี้ตลอด) | ใช้ได้ 1 เว็บไซต์
- Business | ราคาปกติ $999 | ราคาพิเศษ $449 (แล้วแต่โปรโมชั่น อาจไม่ใช่ราคานี้ตลอด) | ใช้ได้ 5 เว็บไซต์
บทความนี้จะไม่แสดงวิธีติดตั้งปลั๊กอิน WooCommerce การตั้งค่าต่างๆ รวมถึงการลงสินค้าใดๆ
การติดตั้งปลั๊กอิน Variation Swatches for WooCommerce
ที่หลังบ้าน WordPress ไปที่ Plugins -> Add New Plugin
ที่หน้า Add Plugins ให้ใส่คำว่า Variation Swatches for WooCommerce ที่ช่อง Keyword
Install และ Activate ให้เรียบร้อย
เมื่อ Activate เรียบร้อยแล้ว ให้เข้าไปที่ Products -> Attributes
ในหน้า Add new attribute จะมีตัวเลือก Type เพิ่มขึ้นมา ซึ่งจะมีตัวเลือก 4 ชนิด คือ Color, Image, Button และ Radio
การเพิ่มคุณลักษณะสินค้า
ที่หน้า Add new attribute เพิ่มคุณลักษณะที่ต้องการ เช่นในตัวย่างจะเพิ่ม Color และเลือก Type เป็น Color จากนั้นคลิกที่ Add attribute
จากนั้นให้คลิกที่ Configure terms ของคุณลักษณะ Color ที่เพิ่งสร้างขึ้น ที่อยู่ในตารางทางด้านขวา เพื่อเข้าไปสร้างตัวเลือกของคุณลักษณะ Color
ต่อมาที่ Add new Color ให้ใส่ชื่อสีและคลิกที่ Color เพื่อเลือกสีหรือจะใส่เป็นโค้ดสีก็ได้ ให้ตรงกับชื่อสีที่ใส่ไว้ แล้วคลิกที่ปุ่ม Add new Color
สร้างให้ครบทุกสีที่ต้องการ
กรณีที่เลือกเป็น Type อื่นๆ การสร้างตัวเลือกก็จะเป็นไปตาม Type ที่เลือก เช่น ถ้าเลือก Image ก็จะเป็นการใส่ภาพ, ส่วน Button กับ Radio นั้นไม่ต้องกำหนดอะไรเพิ่มเติม เมื่อดูที่หน้าสินค้า Button จะเป็นกรอบสี่เหลี่ยมผืนผ้าแสดงข้อความของตัวเลือกนั้น ส่วน Radio จะเป็นปุ่มกลมๆ
การเพิ่มสินค้าโดยกำหนดคุณลักษณะสินค้า
ไปที่หน้าสร้างสินค้า ตรง Product date เลือกเป็น Variable product
ที่ Tab Attributes คลิกที่ช่อง add existing จะแสดงคุณลักษณะที่มีการสร้างไว้ ให้เลือก Color
จะเป็นการนำคุณลักษณะ Color มาใช้กับสินค้า จากนั้นให้คลิกที่ ช่องสี่เหลี่ยมตรง Value(s) จะแสดงตัวเลือกของคุณลักษณะ Color ที่มีการเพิ่มไว้
ให้คลิกเลือกตัวเลือกของคุณลักษณะให้ครบและตรงกับที่สินค้านั้นมี
เสร็จแล้วให้คลิกที่ปุ่ม Save attributes
ต่อมาที่ Tab Variations คลิกที่ปุ่ม Add manually เพื่อนำคุณลักษณะดังกล่าวมาสร้างเป็นตัวเลือกของสินค้าทั้งราคาและคุณลักษณะ
จะมีการสร้าง Value ให้ 1 รายการ ให้คลิกที่ Drop Down แล้วเลือกสีที่ต้องการ
จากนั้นคลิกที่ Edit เพื่อเพิ่มรายละเอียของสินค้า เช่น เลือกรุปภาพของสินค้าสี Blue, กำหนดราคา และอื่นๆ เช่น ขนาด น้ำหนัก
สร้าง Value รายการต่อไปด้วยการคลิกที่ปุ่ม Add manually
ทำให้ครบทุกรายการ จากนั้นคลิกที่ปุ่ม Save changes
จากนั้นคลิก Update หรือ กรณีที่เป็นการสร้างสินค้าใหม่จะเป็น Publish
เมื่อไปดูที่หน้าเว็บไซต์ที่เป็นหน้าสินค้า ก็จะเห็นตัวเลือกที่เป็นคุณสมบัติ Color เพื่อคลิกที่สี ภาพสินค้าก็จะเปลี่ยนไปตามที่เลือกภาพไว้
สรุป
การเพิ่มประเภทของคุณลักษณะสินค้าใน WooCommerce เป็นการทำให้หน้าสินค้ามีความน่าสนใจมากขึ้น จากเดิมที่เป็นการแสดงข้อความอย่างเดียว การเลือกก็เป็นเมนู Dropdown คลิกแล้วเลือกข้อความซึ่งดูจืดชืดและน่าเบื่อเกินไป สามารถเลือกใช้ประเภทของคุณลักษณะทั้ง 4 แบบให้เหมาะสมกับสินค้าและคุณลักษณะของสินค้านั้นๆ ได้
Related Posts
