วิธีเปิดใช้งาน Swatches สี WooCommerce สำหรับผลิตภัณฑ์ที่หลากหลายในธีม Flatsome (ทั่วโลก)

การมีรูปแบบผลิตภัณฑ์เป็นเรื่องปกติสำหรับอีคอมเมิร์ซ หากคุณมีอีคอมเมิร์ซ ค่อนข้างแน่ใจว่าคุณจำเป็นต้องตั้งค่าร้านค้าของคุณสำหรับรูปแบบต่างๆ ของผลิตภัณฑ์ของคุณ WooCommerce Color Swatches สามารถช่วยให้คุณทำเช่นนั้นได้

ใน WooCommerce คุณจะได้รับดรอปดาวน์ตามค่าเริ่มต้นเพื่อจัดการกับรูปแบบผลิตภัณฑ์

ฉันรู้ว่าคุณกำลังคิดอะไรอยู่ตอนนี้! คุณกำลังคิดว่า "แล้วไง! ทำไมคนพวกนี้ถึงได้เอะอะกัน?”

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

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

มีประโยชน์ทั้งทางตรงและทางอ้อมหลายประการของการใช้ WooCommerce Color Swatches สำหรับรูปแบบผลิตภัณฑ์ ลองหาบางอย่าง!

1. ช่วยให้ผู้เยี่ยมชมของคุณได้รับประสบการณ์ที่ราบรื่น
2. การสำรวจความผันแปรของสีสามารถเพิ่มยอดขายได้
3. ผู้เข้าชมต้องการคลิกน้อยลงเพื่อดูรูปแบบผลิตภัณฑ์
4. ประสบการณ์ผู้ใช้ที่ดีขึ้นส่งสัญญาณเชิงบวกให้กับเครื่องมือค้นหาเพื่อให้พวกเขาสามารถโปรโมตเนื้อหานี้ได้

ตื่นเต้นที่จะเปิดใช้งานชุดสี WooCommerce ในร้านค้าของคุณใช่ไหม มาเริ่มกันเลยกับกระบวนการทั้งหมด!

วิธีเปิดใช้งานปลั๊กอิน WooCommerce Color Swatches ใน eStore

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

ขั้นตอนที่ 1: ไปที่แดชบอร์ด

ขั้นตอนที่ 2: วางเคอร์เซอร์บนปลั๊กอิน จากนั้นคลิก เพิ่มใหม่

ขั้นตอนที่ 3: หน้าค้นหาจะปรากฏขึ้น ที่ด้านบนขวา คุณจะพบช่องค้นหา พิมพ์ WooCommerce Variation Swatches จากนั้นติดตั้งและเปิดใช้งานปลั๊กอิน

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

หลังจากติดตั้งและเปิดใช้งานปลั๊กอิน WooCommerce Variation Swatches เรียบร้อยแล้ว ก็ถึงเวลาสร้างตัวอย่างสี

มาเริ่มกระบวนการกันเลย!

ขั้นตอนที่ 01: สร้างแอตทริบิวต์ผลิตภัณฑ์ตัวแปร

ขั้นแรก เราต้องสร้างแอตทริบิวต์สีและรูปแบบต่างๆ ทั่วโลก หากต้องการสร้าง ให้ไปที่ แดชบอร์ด คลิกที่ ผลิตภัณฑ์ จากนั้นไปที่ แอตทริบิวต์ คุณจะพบ กล่องแอตทริบิวต์ กรอกข้อมูลในฟิลด์ที่จำเป็นตามความต้องการของคุณ เพื่อจุดประสงค์ในการสาธิต เรากำลังตั้งชื่อแอตทริบิวต์เป็น สี เรากำลังปล่อยให้ทากว่างเปล่าเพราะมันจะสร้างทากสำหรับแอตทริบิวต์โดยอัตโนมัติ เรากำลังเลือก Type เป็น Color

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

หลังจากนั้น รายการจะถูกสร้างขึ้นทางด้านขวาดังภาพหน้าจอต่อไปนี้

ขั้นตอนที่ 02: สร้างรูปแบบแอตทริบิวต์

คุณสามารถเพิ่มแอตทริบิวต์เพิ่มเติมลงในรายการได้โดยใช้กระบวนการเดียวกัน หลังจากสร้างแอตทริบิวต์แล้ว คุณต้องสร้างรูปแบบแอตทริบิวต์ สำหรับการสร้างรูปแบบผลิตภัณฑ์สำหรับแอตทริบิวต์ ให้ไปที่รายการและคลิกที่ กำหนดค่าข้อกำหนด ของแอตทริบิวต์

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

ขั้นตอนที่ 03: เปิดใช้งานการเปลี่ยนแปลงแอตทริบิวต์ในผลิตภัณฑ์ตัวแปร

ตอนนี้ เราต้องเชื่อมโยงตัวอย่างสีที่สร้างขึ้นทั่วโลกกับผลิตภัณฑ์ตัวแปร สำหรับการเปิดใช้งานผลิตภัณฑ์รูปแบบแอตทริบิวต์ ให้ไปที่ ผลิตภัณฑ์ และแก้ไข ใส่ใจในการเลือกผลิตภัณฑ์ผันแปรจาก ข้อมูลผลิตภัณฑ์

หลังจากนั้น คลิกที่ แอตทริบิวต์ ทางด้านซ้าย หน้าใหม่จะเปิดขึ้น มีดรอปดาวน์ชื่อ แอตทริบิวต์ผลิตภัณฑ์ที่กำหนดเอง ซึ่งคุณสามารถค้นหาแอตทริบิวต์ที่สร้างขึ้นทั่วโลกทั้งหมด ที่นี่ คุณจะเห็นแอตทริบิวต์ สี เพียงแอตทริบิวต์เดียว เนื่องจากคุณเพิ่งสร้างแอตทริบิวต์สีเท่านั้น

เลือกแอตทริบิวต์ที่คุณต้องการเลือก เพื่อวัตถุประสงค์ในการสาธิต ให้เลือก สี เลือกเสร็จแล้วจะขึ้นหน้านี้

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

คลิกที่แท็บ Variations จากนั้นหน้าใหม่จะปรากฏขึ้น คุณจะสังเกตเห็นสองตัวเลือก หนึ่งตัวเลือกคือ เพิ่มรูปแบบ และอีกตัวเลือกหนึ่งคือ สร้างรูปแบบจากแอตทริบิวต์ทั้งหมด

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

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

PS: เพิ่มราคาในแต่ละรูปแบบ มิฉะนั้น การเปลี่ยนแปลงจะไม่ปรากฏบนส่วนหน้าของผลิตภัณฑ์

หลังจากเพิ่มตัวอย่างรูปแบบสำเร็จแล้ว หน้าผลิตภัณฑ์แต่ละรายการจะมีลักษณะเช่นนั้น

การตั้งค่าอย่างง่าย

Variation Swatches เป็นปลั๊กอินที่จำเป็นสำหรับเว็บไซต์ WooCommerce เว็บไซต์ WooCommerce มากกว่า 300,000 แห่งกำลังใช้ปลั๊กอินนี้ ช่วยให้คุณเปิดใช้งานคำแนะนำเครื่องมือ ปิดใช้งานสไตล์ชีตเริ่มต้นของปลั๊กอิน และสลับระหว่างรูปร่างกลมและสี่เหลี่ยม

เปลี่ยนสไตล์รูปร่างจาก Round เป็น Square และเปิดใช้งาน Tooltip หลังจากนั้นส่วนหน้าของหน้าผลิตภัณฑ์จะเป็นแบบนั้น

ตั้งค่าขั้นสูง

Variation Swatches ยังมีคุณสมบัติขั้นสูงที่สามารถให้คุณได้มากกว่า คุณสามารถควบคุมความกว้าง ความสูง และขนาดแบบอักษรของ Variation Swatch อีกทั้งยังเสนอการแสดงสินค้าที่หมดสต็อกอย่างชาญฉลาด

หากต้องการแสดงสินค้าหมด คุณต้องเลือกตัวเลือก Blur ของ Attribute Behavior หลังจากเลือกแล้ว ผลิตภัณฑ์ของคุณจะตอบสนองดังนี้

เปิดใช้งานแถบสีบนหน้าร้านค้าของธีม Flatsome

นอกจากการเพิ่มตัวอย่างสีลงในหน้าผลิตภัณฑ์แล้ว คุณยังสามารถเพิ่ม WooCommerce Color Swatches ในหน้าเก็บถาวรของผลิตภัณฑ์ได้อีกด้วย หากต้องการใช้คุณสมบัตินี้ คุณต้องอัปเกรดเวอร์ชันของคุณเป็นรุ่นโปร หากคุณยังไม่มีเวอร์ชัน Pro ลองใช้ Variation Swatches อย่างเต็มประสิทธิภาพ

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

เมื่อคุณเปิดใช้งาน swatches บนหน้าร้านค้า จะมีลักษณะดังนี้

ปรับแต่ง Tooltip และ Swatch บน Store/Archive Pages

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

เปิดใช้งานคำแนะนำเครื่องมือ

เมื่อใช้การตั้งค่าขั้นสูง คุณจะปรับแต่งพื้นหลังคำแนะนำเครื่องมือและสีข้อความได้ หากต้องการปรับแต่งคำแนะนำเครื่องมือ ให้ตรวจสอบด้านล่าง

ตัวอย่างสุดท้ายของส่วนหน้าคำแนะนำเครื่องมือ

บทสรุป

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

หากคุณประสบปัญหาขณะติดตั้งปลั๊กอินนี้ในธีม Flatsome โปรดแจ้งให้เราทราบในส่วนความคิดเห็น เราจะพยายามตอบกลับโดยเร็วที่สุด!