วิธีสร้าง Swatches วิทยุ, ฉลาก, สีและรูปแบบรูปภาพสำหรับแอตทริบิวต์ผลิตภัณฑ์ตัวแปร WooCommerce

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

คิดว่าทำไมตัวอย่างจึงน่าทึ่งใช่ไหม?

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

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

ฉันถือว่าคุณได้ติดตั้งธีม OceanWP แล้ว หากต้องการเปิดใช้งาน swatches ในผลิตภัณฑ์ตัวแปรของคุณ ให้ติดตั้งปลั๊กอิน WooCommerce Variation Swatches ก่อน

สาธิตสด | ดาวน์โหลดปลั๊กอิน WooCommerce Variation Swatches

การติดตั้ง Swatches รูปแบบ WooCommerce

คุณสามารถดาวน์โหลดปลั๊กอิน WooCommerce Variation Swatches จากแบ็กเอนด์ของไซต์ได้เช่นกัน เลือก เริ่มต้นการติดตั้งปลั๊กอิน จากประกาศของผู้ดูแลระบบระดับสูง

ติดตั้งและเปิดใช้งาน WooCommerce Variation Swatches และปลั๊กอิน Ocean Extra

หากคุณไม่ได้รับการแจ้งเตือนอันดับต้นๆ ในการติดตั้งปลั๊กอิน swatches ให้ไปที่ Plugins >> Add New ค้นหา WooCommerce Variation Swatches ในช่องค้นหา ติดตั้งและเปิดใช้งาน ปลั๊กอิน WooCommerce Variation Swatches โดย Emran Ahmed

หลังจากติดตั้งและเปิดใช้งานปลั๊กอินเรียบร้อยแล้ว ก็ถึงเวลาสร้างตัวอย่างวิทยุ ป้ายกำกับ สี และรูปภาพในรูปแบบต่างๆ ในธีม OceanWP มาเริ่มกระบวนการกันเลย

WooCommerce Variation Swatches Setup

หลังจากติดตั้ง ปลั๊กอิน Woocommerce Variation Swatches และ Photos ในธีม OceanWP ของคุณ ได้เวลากำหนดค่าปลั๊กอินนี้สำหรับผลิตภัณฑ์ตัวแปรของคุณแล้ว มีสองวิธีในการติดตั้งปลั๊กอินนี้

1. เปิดใช้งานชุดตัวอย่างรูปแบบต่างๆ สำหรับผลิตภัณฑ์ตัวแปรที่มีอยู่
2. ตั้งค่าตัวอย่างรูปแบบต่างๆ สำหรับผลิตภัณฑ์ตัวแปรใหม่

ในบทช่วยสอนนี้ ฉันจะอธิบายทั้งสองวิธี

เปิดใช้งาน Variation Swatches สำหรับผลิตภัณฑ์ Variable ที่มีอยู่

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

ก่อน

หลังจาก

ขั้นตอนที่ 01: การแก้ไขแอตทริบิวต์

ไปที่ ผลิตภัณฑ์ >> คุณสมบัติ แอตทริบิวต์ส่วนกลางที่มีอยู่ทั้งหมดจะแสดงอยู่ในส่วนแอตทริบิวต์ หลังจากติดตั้งปลั๊กอิน WooCommerce Variation Swatches จะเพิ่มฟิลด์ Type โดยค่าเริ่มต้นมันจะแสดงการ เลือก ภายใต้ชื่อ ประเภท

เนื่องจากปลั๊กอิน WooCommerce Swatches มาพร้อมกับแอตทริบิวต์สามประเภท: สี, รูปภาพ, ปุ่ม คุณสามารถตั้งค่าประเภทแอตทริบิวต์ใดก็ได้สำหรับแอตทริบิวต์ที่คุณต้องการ

เพื่อจุดประสงค์ในการสาธิต มีการสร้างแอตทริบิวต์ Fabric, Pattern และ Label เพิ่มประเภทแอตทริบิวต์ สี สำหรับแอตทริบิวต์ รูปแบบ ประเภทแอตทริบิวต์ รูปภาพ สำหรับแอตทริบิวต์ Fabrics และประเภทแอตทริบิวต์ ปุ่ม สำหรับแอตทริบิวต์ ป้ายกำกับ

หากต้องการตั้งค่าประเภทแอตทริบิวต์ สี เป็นแอตทริบิวต์ รูปแบบ ให้คลิก แก้ไข

เลือกประเภท สี จากดรอปดาวน์ประเภท

รับคืน สินค้า >> คุณสมบัติ . แก้ไขแอตทริบิวต์ Fabrics เช่นแอตทริบิวต์ Pattern

คืน สินค้า >> คุณสมบัติ อีกครั้ง แก้ไขแอตทริบิวต์ป้ายกำกับเช่นแอตทริบิวต์ Fabric และ Pattern

เมื่อการเลือกประเภทแอตทริบิวต์เสร็จสิ้น ให้กลับไปที่หน้ารายการแอตทริบิวต์ รายการแอตทริบิวต์จะมีลักษณะเหมือนภาพต่อไปนี้

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

รูปแบบต่างๆ สำหรับแอตทริบิวต์ป้ายชื่อดูดี แต่รูปแบบสำหรับแอตทริบิวต์ Pattern จำเป็นต้องกำหนดสีและรูปแบบต่างๆ สำหรับแอตทริบิวต์ Fabrics จำเป็นต้องเพิ่มรูปภาพ

ขั้นตอนที่ 02: การแก้ไขรูปแบบต่างๆ

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

หลังจากเลือกกำหนดค่าเงื่อนไข รายการของรูปแบบแอตทริบิวต์จะปรากฏขึ้น สำหรับรูปแบบ รูปแบบสามรูปแบบ: สีฟ้า สีเขียว และ สีแดง แสดงอยู่ที่นี่ แก้ไขแต่ละรูปแบบทีละรายการเพื่อเพิ่มสีของรูปแบบ

สำหรับการสาธิต ให้เลือก แก้ไข ลิงก์สำหรับรูปแบบ สีเขียว

จากแผงแก้ไขรูปแบบต่างๆ เลือกสีที่ต้องการจาก Colorpicker และอัปเดตการเปลี่ยนแปลงโดยกดปุ่ม Update

เมื่ออัปเดตสีรูปแบบต่างๆ เรียบร้อยแล้ว ส่วนหน้าจะมีลักษณะดังนี้

หลังจากอัปเดตรูปแบบแอตทริบิวต์รูปแบบแล้ว ให้แก้ไขแอตทริบิวต์ Fabrics โดยเลือก กำหนดค่าเงื่อนไข ต่างๆ เช่นแอตทริบิวต์ รูปแบบ

หลังจากกด Configure Terms รายการของ Fabrics จะปรากฏขึ้นเหมือนรูปแบบ แก้ไขแต่ละรูปแบบเพื่อแทรกรูปภาพรูปแบบต่างๆ เพื่อจุดประสงค์ในการสาธิต แก้ไข ลิงก์สำหรับแอตทริบิวต์ Chambray

จากแผงแก้ไขรูปแบบต่างๆ อัปโหลด รูปภาพ รูปแบบที่ต้องการจากรูปภาพและอัปเดตการเปลี่ยนแปลงโดยกดปุ่ม อัปเดต

หลังจากอัปเดตรูปภาพสำหรับรูปแบบทั้งหมด ส่วนหน้าต้องการภาพหน้าจอต่อไปนี้

ตั้งค่า Variation Swatches สำหรับผลิตภัณฑ์ Variable ใหม่

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

ขั้นตอนที่ 01: สร้างแอตทริบิวต์สากลและรูปแบบต่างๆ

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

เมื่อสร้างแอตทริบิวต์ color, image และ label Pattern , Fabrics , Label และ Size เรียบร้อยแล้ว จะสร้างรายการแอตทริบิวต์ทางด้านซ้าย

หลังจากสร้างแอตทริบิวต์ร่วม ให้เพิ่มรูปแบบแอตทริบิวต์โดยเลือกกำหนดค่าข้อกำหนด ในการสร้างรูปแบบต่างๆ สำหรับแอตทริบิวต์ Pattern ให้เลือก Configure Terms links กรอกฟิลด์ชื่อและเลือกรหัสสี สร้างรูปแบบสี เขียว น้ำเงิน และ แดง สำหรับแอตทริบิวต์สี

รายการรูปแบบแอตทริบิวต์จะปรากฏในหน้าจอด้านซ้ายหลังจากเพิ่มรูป แบบ แอตทริบิวต์รูปแบบ

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

สร้างรูปแบบ Chambray, Corduroy และ Embossed สำหรับแอตทริบิวต์ของรูปภาพและจะปรากฏทางด้านซ้าย

สร้างรูปแบบต่างๆ สำหรับแอตทริบิวต์วิทยุและป้ายกำกับ เช่น รูปแบบรูปภาพและสี

ขั้นตอนที่ 02: แสดง Swatches ใน Variable Product Page

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

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

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

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

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

บทสรุป

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