Skip to content

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

ก่อนหน้านี้เราเคยแนะนำปลั๊กอินประเภทเดียวกัน ตัวนั้นชื่อว่า “Variation Swatches for WooCommerce” ของ Emran Ahmed (ตั้งชื่อคล้ายกันมากเลยครับ ^_^ ) สำหรับปลั๊กอินในวันนี้ชื่อ “WooCommerce Product Variations Swatches” ยังไม่งงนะครับ เจ้านี้เป็นของ VillaTheme เป็นผู้ผลิต มียอดติดตั้งมากกว่า 10,000 ครั้ง ค่อยๆ เก็บยอดติดตั้งไปอย่างช้าๆ แต่มั่นคง เรทติ้งจัดว่าดีทีเดียวอยู่ที่ 4.5/5 ดาว

ทำความรู้จักปลั๊กอิน

Product Variations Swatches สำหรับ WooCommerce เป็นปลั๊กอินระดับมืออาชีพที่ช่วยให้เราแสดงและเลือกแอตทริบิวต์สำหรับ Product variation ปลั๊กอินจะแสดงตัวเลือกการเลือกรูปแบบต่างๆ ของสินค้า เช่น สี ปุ่ม รูปภาพ ภาพแบบต่างๆ radio เพื่อช่วยให้ลูกค้าสังเกตสินค้าที่ต้องการได้ชัดเจนยิ่งขึ้น ประหยัดเวลาในการค้นหาสินค้าที่ต้องการมากกว่าใช้ตัวเลือกแบบ Dropdown แบบเดิมๆ ที่มากับ WooCommerce

ฟีเจอร์ฟรีที่น่าสนใจ

+ ปลั๊กอินจะแปลงตัวเลือก Variation Dropdown ของ WooCommerce ให้เป็นแบบตัวอย่าง Swatches ด้วยการคลิกเพียงไม่กี่ครั้ง

+ การปรับแต่ง Global attributes และ custom attributes ปลั๊กอินนี้ช่วยให้เราปรับแต่งค่า Global attributes ทั้งหมดที่มีใน WooCommerce ได้อย่างรวดเร็วผ่าน swatches setting

+ ค้นหา attribute สามารถใช้แถบค้นหาเพื่อค้นหา Global attribute ที่มีอยู่ได้

+ สามารถตั้งค่าการแสดง global attributes ได้ 2 รูปแบบ คือ แนวนอนหรือแนวตั้ง

+ ประเภทการแสดงผลสามารถตั้งค่าให้แสดง global attributes ได้ 5 ประเภท คือ ปุ่ม สี รูปภาพ รูปภาพแบบ Variation และแบบ Radio

+ สามารถเลือกที่จะแสดงโปรไฟล์ Swatches ที่มีอยู่ได้

+ สามารถปรับแต่งแต่ละเงื่อนไขของ attributes ของ global attributes ที่มีอยู่ได้

+ Swatches profiles ปลั๊กอิน WooCommerce Product Variations Swatches สามารถออกแบบและจัดสไตล์สำหรับโปรไฟล์ swatches ได้ ไม่ว่าจะ ชื่อ, Padding, Height, Width, Font size, ขนาดบนจอมือถือ, บนรายการสินค้า, สี, Box-shadow effect

+ รองรับหน้าจอมือถือ

+ ใช้งานง่าย

ฟีเจอร์ Pro

+ โปรไฟล์ Swatches ไม่จำกัด สามารถทำซ้ำโปรไฟล์ Swatches เพื่อสร้างรูปแบบการออกแบบ Swatch จำนวนมากได้อย่างรวดเร็ว

+ แสดง particular attributes ในรายการสินค้า สามารถแสดง/ซ่อนคุณลักษณะเฉพาะในรายการสินค้าได้

+ เปลี่ยนรูปภาพสินค้า ไม่ว่าจะเป็น Swatches ประเภทใดก็ตาม สามารถตั้งค่ารูปภาพสำหรับ attribute term และทำการเปลี่ยนแปลงรูปภาพสินค้า เมื่อลูกค้าเลือก attribute term นั้นๆ

+ ปิดการใช้งาน variation สำหรับสินค้าที่หมดสต็อก สามารถตรวจจับการรวม attribute ที่หมดสต๊อกได้โดยอัตโนมัติและแสดงเป็นภาพเบลอหรือขีดฆ่า จะให้คลิกได้หรือไม่ก็ได้ หรือแม้แต่ซ่อนไว้

+ แสดง Tooltip สามารถแก้ไขเนื้อหาคำแนะนำบนรูปภาพ attribute / variation

+ ติดตั้งง่าย สามารถแสดง custom attributes ของสินค้าที่มี variation ที่หน้าเว็บ

+ แสดง variations swatches ในรายการสินค้าและหน้าที่กำหนดได้

+ รองรับ WPML สำหรับผู้ที่ใช้เว็บหลายภาษา

ทดลองใช้งาน

การเข้าถึงปลั๊กอินให้เข้าไปที่เมนู Variation Swatches

แต่ก่อนจะเข้าไปเซ็ทค่าปลั๊กอินให้เราเพิ่ม attribute ในปลั๊กอิน WooCommerce ให้เรียบร้อยก่อนครับ ไปที่เมนู Product > Attributes

จัดการเพิ่มค่า attribute ที่ต้องการ ตัวอย่างนี้เราจะลองเพิ่มค่า สีและ Size พิมพ์ลงในช่อง Name และกดปุ่ม Add attribute

เมื่อเพิ่มครบแล้วกดปุ่ม Swatches settings ด้านบน

ให้กำหนดคุณลักษณะของ Swatches ที่ต้องการ สำหรับ Color เราลองเลือกเป็นแสดงผลแบบแนวนอน, Display แสดงผลเป็น Color, Swatches profile เลือกเป็น Color Design และ Change product image เลือกเป็น Auto detect variation image

ส่วน Size Display เลือกเป็น Button, Swatches profile เลือกเป็น Button Design และ Change product image เลือกเป็น Not change เสร็จแล้วกดปุ่ม Save all

หลังจากที่เราสร้าง attribute แล้ว ให้เราไปเมนู Products > attributes ของ WooCommerce เราจะเจอกับค่า attribute ที่เราสร้างขึ้นมาเมื่อครู่ ให้คลิกที่ลิงก์ Configure terms เพื่อกำหนด terms ของแต่ละค่า

เริ่มจาก Color เราจะลองเพิ่มสีสัก 3 สี นะครับ Blue, White, Red

กำหนดโทนสีที่ต้องการ

เสร็จแล้วกดปุ่ม Add new color ทำการเพิ่มให้ครบ 3 สี ตามที่อธิบายด้านบนเลยนะครับ

เพิ่มครบเรียบร้อย

ให้ย้อนกลับมาเพิ่ม Term สำหรับ Size

จัดการเพิ่มเข้าไปด้วยวิธีเดียวกันกับ Color สำหรับ Size หรือขนาด ลองใส่เป็น S M L

เมื่อเพิ่ม attribute เสร็จเรียบร้อยให้ไปที่หน้าสินค้า WooCommerce ของเรา กดไปที่แถบ attributes กดปุ่ม Add new ให้เลือกค่า attribute ที่เราได้สร้างขึ้นใน global attribute ทั้ง Color และ Size

อย่าลืมติ๊กที่ช่อง Used for variations เพื่อให้แสดงในแถบ variation ด้วย

ลำดับต่อมากดเปิดที่แถบ Color จะแสดงสีที่เราได้เพิ่มไว้ก่อนหน้า กดปุ่ม Select all กดปุ่ม Save attribute

ให้กดเปิดแถบเมนู ตั้งค่าการแสดงผลอีกที เพื่อย้ำความถูกต้อง เนื่องจากที่เราทำการทดสอบตัวปลั๊กอินอาจจะยังมี Bug ที่เรากำหนดใน Global attribute ไม่ดึงค่าที่เรากำหนดมาใช้

ทำซ้ำด้วยวิธีเดียวกันกับ Size กดปุ่ม Select all กดปุ่ม Save attribute เช่นกัน

เราจะได้ Attributes Color และ Size ในสินค้านี้แล้ว

จากนั้นกดที่แถบ Variations เพื่อเพิ่มตัวเลือกในหน้าสินค้า กดปุ่ม Generate variations เพื่อให้ระบบทำการเจนเนอเรทค่า attributes ทั้งหมดออกมาโดยอัตโนมัติ

จะเห็นว่าปลั๊กอินได้ทำการสร้างค่า Attributes ทั้งหมดแบ่งตาม Color และ Size ให้เรียบร้อย

ให้กดเปิดที่ละรายการเพื่อใส่ราคาสินค้าทุกค่า

ถ้าเราขี้เกียจมาใส่ทีละชิ้น ให้กดที่ Dropdown เมนูด้านบนตรง Bulk actions เลือกเป็น Set regular price

ใส่ตัวเลขราคาในช่อง Enter a value

และให้ใส่ภาพของแต่ละ Variation ด้วย ให้เราใส่ให้ครบทุกสี ส่วนขนาดไม่ต้องครับ

เสร็จแล้วกด Update หน้าสินค้าครับ และลองไปดูที่หน้าเว็บเพื่อตรวจเช็คที่เราได้อัพเดตไป

ลองกดเทสที่ปุ่มสีแต่ละปุ่ม ก็จะได้สินค้าครบทุกสีแล้วครับ

ตรงการแสดงผลของ Variation swatches จะขึ้นอยู่กับธีมที่เราใช้งาน เราสามารถปรับแต่งสไตล์ด้วย CSS ได้เพื่อให้เหมาะสมกับธีมของเรา

ราคา

ราคาเวอร์ชั่น Pro ก็ราคาย่อมเยาว์เอามากๆ ครับ ราคาเพียง 22 USD ต่อ 1 เว็บ อัพเดตได้ตลอดชีพ หาซื้อได้ที่เว็บ Codecanyon .net

ทิ้งท้าย

ใครที่กำลังมองหา Variations Swatches ดีๆ สักตัวลองจัด WooCommerce Product Variations Swatches มาใช้งานในราคาสบายกระเป๋า ได้อัพเดตฟรีตลอดอายุการใช้งานอีกต่างหาก

รายละเอียดเพิ่มเติม

Back To Top
Search