วิธีเพิ่มแถบรหัสคูปองแบบไดนามิกในหน้าผลิตภัณฑ์เฉพาะด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตหน้าผลิตภัณฑ์ฟรี

หากต้องการวางมือบนเทมเพลตหน้าผลิตภัณฑ์ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ภาพรวมการสอน

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

1. สร้างหมวดสินค้าลดราคาใหม่

ไปที่หมวดหมู่สินค้าและเพิ่มหมวดหมู่สินค้าลดราคาใหม่

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

2. กำหนดสินค้าให้กับหมวดส่วนลดใหม่

แก้ไขสินค้า

จากนั้นเปิดผลิตภัณฑ์ที่คุณต้องการรวมไว้ในการขาย

กำหนดผลิตภัณฑ์ให้กับหมวดส่วนลดใหม่

และรวมไว้ในหมวดสินค้าลดราคาใหม่

3. สร้างรหัสคูปอง WooCommerce

ไปที่คูปอง & เพิ่มคูปองใหม่

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

เพิ่มรหัสคูปองและข้อมูลคูปอง

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

• รหัสส่วนลด: เพิ่มรหัสส่วนลด
• ประเภทส่วนลด: ส่วนลดร้อยละ
• จำนวนคูปอง: เพิ่มเปอร์เซ็นต์
• วันหมดอายุคูปอง: เลือกวันที่

เพิ่มข้อจำกัดการใช้งาน

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

• หมวดหมู่สินค้า: ส่วนลด

4. เพิ่มเทมเพลตใหม่สำหรับหมวดส่วนลด

เพิ่มเทมเพลตใหม่

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

ใช้ On

ใช้เทมเพลตใหม่นี้ในหมวดสินค้าลดราคา

• ใช้เมื่อ: สินค้าในหมวดหมู่สินค้าเฉพาะ: ส่วนลด

5. นำส่วนหน้าผลิตภัณฑ์ทั่วโลกมาใช้ซ้ำสำหรับเทมเพลตใหม่

ลากเนื้อหาเทมเพลตผลิตภัณฑ์ไปยังเนื้อหาของเทมเพลตใหม่

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

6. เพิ่มแถบรหัสคูปองบนสุดให้กับตัวเทมเพลตใหม่

เข้าสู่ตัวแก้ไขเทมเพลตร่างกาย

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

เพิ่มส่วนใหม่ไปที่ด้านบน

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

สีพื้นหลัง

เปิดการตั้งค่าส่วนและเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: #e02b20

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

แอนิเมชั่น

ตั้งค่าส่วนให้สมบูรณ์โดยเพิ่มภาพเคลื่อนไหว

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ลง
• ระยะเวลาแอนิเมชั่น: 1500ms
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของคอนเทนเนอร์ส่วน

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

คอลัมน์ 1

ระยะห่าง

จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และเพิ่มช่องว่างภายในด้านบนและด้านล่าง

• ช่องว่างภายในด้านบน: 25px
• ช่องว่างภายในด้านล่าง: 25px

คอลัมน์ 2

สีพื้นหลัง

เปิดการตั้งค่าคอลัมน์ 2 ด้วยและเพิ่มสีพื้นหลังสีขาว

• สีพื้นหลัง: #ffffff

ระยะห่าง

เพิ่มการเติมด้านบนและด้านล่างแบบกำหนดเองให้กับคอลัมน์นี้ด้วย

• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px

ชายแดน

และรวมรัศมีเส้นขอบด้านบนซ้ายและขวาบางส่วน

• ซ้ายบน + ขวาบน: 30px

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เพิ่มเนื้อหา

โมดูลแรกและโมดูลเดียวที่เราต้องการในคอลัมน์ 1 คือโมดูลข้อความ ป้อนสำเนาที่คุณเลือก

การตั้งค่าข้อความ

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 16px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

เพิ่มโมดูลข้อความในคอลัมน์ 2

เพิ่มรหัสคูปองในกล่องเนื้อหา

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

การตั้งค่าข้อความ

เปลี่ยนการตั้งค่าข้อความของโมดูลดังนี้:

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: หนัก
• สีข้อความ: #000000
• ขนาดตัวอักษร: 19px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

ขนาด

จากนั้นแก้ไขการตั้งค่าการปรับขนาด

• ความกว้าง: 50%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

เพิ่มแผ่นรองด้านล่างด้วย

• ช่องว่างภายในด้านล่าง: 10px

ชายแดน

และตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มเส้นขอบด้านล่าง

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #333333

7. บันทึกการเปลี่ยนแปลงตัวสร้างธีมและดูผลลัพธ์

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ความคิดสุดท้าย

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

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