วิธีสร้างเทมเพลตหน้าชำระเงิน WooCommerce ด้วย Divi

โดยทั่วไปแล้ว การสร้างหน้าชำระเงินของ WooCommerce จะทำให้มีการปรับแต่งไฟล์เทมเพลต PHP ในแบ็กเอนด์และ CSS ที่กำหนดเองจำนวนมาก อย่างไรก็ตาม ขั้นตอนนี้กลายเป็นเรื่องสนุกสนานและตรงไปตรงมาเนื่องจากโมดูล Woo ของ Divi ! เมื่อคุณใช้ Divi เพื่ออัปเดต WC Checkout Page รหัสย่อ WC จะแปลงเป็นเลย์เอาต์ที่มีโครงสร้างของ Woo Checkout Modules แบบไดนามิกที่พร้อมสำหรับการจัดรูปแบบที่มองเห็นได้โดยใช้ตัวเลือกการออกแบบในตัวที่ซับซ้อน ซึ่งจะช่วยให้คุณควบคุมการออกแบบของหน้าชำระเงินได้อย่างสมบูรณ์

คู่มือนี้จะสอนวิธีใช้ Divi เพื่อสร้าง WooCommerce Checkout Page ที่ไม่เหมือนใคร ขั้นแรก เราจะสร้าง WooCommerce Checkout Page โดยใช้ Woo Modules แบบไดนามิกที่สามารถเข้าถึงได้สำหรับหน้าชำระเงิน จากนั้น เมื่อคุณทำเสร็จแล้ว เราจะแสดงให้คุณเห็นถึงวิธีการใช้การออกแบบหน้าเช็คเอาต์กับเทมเพลตหน้าเช็คเอาต์ในตัวสร้างธีม ดังนั้น ไม่ว่าคุณต้องการแก้ไขหน้า Checkout เองหรือพัฒนาแม่แบบหน้า Checkout ก็ตาม Divi ได้ครอบคลุม คุณจะสามารถสร้างหน้าชำระเงินที่ดึงดูดสายตาได้ในเวลาไม่นาน

ตัวอย่างการออกแบบ

การออกแบบของเราจะเป็นอย่างไร

WooCommerce ตรวจสอบหน้าและ Divi

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

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

หากคุณเปิดใช้งาน Divi Builder ในหน้าการชำระเงินนี้ ส่วนประกอบเนื้อหาของหน้า WooCommerce Checkout แต่ละส่วนจะถูกโหลดเป็นโมดูล Divi Woo ที่อาจใช้เพื่อปรับแต่งหน้า

โมดูล Woo สำหรับการออกแบบหน้าชำระเงินใน Divi

Divi มีโมดูลที่จำเป็นหลายอย่างสำหรับการเพิ่มเนื้อหาแบบโต้ตอบไปยังเทมเพลตของเพจ บางส่วนมีโมดูล Woo ที่ปรับให้เหมาะกับหน้าชำระเงิน

โมดูลต่อไปนี้จำเป็นสำหรับการสร้างหน้าการชำระเงินหรือเทมเพลต:

ชื่อโพสต์: Â เมื่อสร้างเทมเพลตหน้า Checkout จะแสดงชื่อของหน้า Checkout แบบไดนามิก

Woo Notification: Â โมดูลนี้สามารถกำหนดให้กับเพจได้หลายประเภท (รถเข็น สินค้า และการชำระเงิน) มันจะแสดงการแจ้งเตือนที่สำคัญให้กับผู้ใช้แบบไดนามิกตามความจำเป็น

Woo Checkout Billing: Â โมดูลนี้แสดงแบบฟอร์มรายละเอียดการเรียกเก็บเงินที่ใช้ระหว่างขั้นตอนการชำระเงิน

Woo Checkout Shipping: Â โมดูลนี้แสดงแบบฟอร์มรายละเอียดการจัดส่งที่ปรากฏขึ้นระหว่างขั้นตอนการชำระเงิน

Woo Checkout Information: Â โมดูลนี้แสดงแบบฟอร์มข้อมูลเพิ่มเติมที่ใช้ตลอดขั้นตอนการชำระเงิน

Woo Checkout Details: Â โมดูลนี้แสดงรายละเอียดการสั่งซื้อระหว่างการชำระเงิน รวมทั้งสินค้าที่ซื้อและราคา

Woo Checkout Payment: Â โมดูลนี้แสดงตัวเลือกประเภทการชำระเงินและรายละเอียดแบบฟอร์มการชำระเงินระหว่างการชำระเงิน

ตัวเลือกโมดูลวูอื่น:

Woo Breadcrumbs: แถบการนำทาง WooCommerce Breadcrumb จะปรากฏขึ้น

สร้างหน้าชำระเงินหรือเทมเพลต

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

ใช้ Divi เพื่อสร้างเค้าโครงหน้าชำระเงิน WooCommerce

จุดประสงค์ของบทช่วยสอน WooCommerce Checkout Page คือการพัฒนาเค้าโครงหน้าแบบกำหนดเองสำหรับ WooCommerce Checkout Page ซึ่งมีชื่อว่า WooCommerce Checkout Page ใน WooCommerce ในตอนท้ายของบทเรียน เราจะแสดงให้คุณเห็นถึงวิธีการบันทึกและนำเข้าเลย์เอาต์หน้าเช็คเอาต์นี้ไปยัง Theme Builder เพื่อสร้างเทมเพลตหน้า Checkout ใหม่

การแก้ไขหน้าชำระเงินของ WooCommerce

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

คลิกตัวเลือก ใช้ตัวสร้าง Divi ที่ด้านบนของตัวแก้ไขเพจ

เลือกแก้ไขด้วยตัวสร้าง Divi

เริ่มจากศูนย์

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

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

ภูมิหลังของมาตรา

ในการเริ่มต้น ให้เพิ่มสีพื้นหลังให้กับส่วนปกติใหม่ดังนี้:

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

แถวและคอลัมน์

ขั้นตอนต่อไปจะเพิ่มแถวหนึ่งคอลัมน์ในส่วนนี้

การสร้างชื่อหน้าชำระเงินแบบไดนามิก

ในการทำให้ชื่อหน้าเป็นไดนามิกสำหรับหน้าชำระเงิน ให้เพิ่มโมดูลชื่อบทความลงในคอลัมน์

เนื้อหาหัวกระทู้

ในการตั้งค่าชื่อโพสต์ ให้อัปเดตองค์ประกอบเพื่อแสดงเฉพาะชื่อเรื่องดังนี้:

• แสดงชื่อ: ใช่
• แสดง Meta: ไม่
• แสดงรูปภาพเด่น: NO

ข้อความชื่อกระทู้

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

• แบบอักษรของชื่อเรื่อง: DM Serif Display
• สีข้อความชื่อเรื่อง: #e9c46a
• ขนาดข้อความของชื่อเรื่อง: 80px (เดสก์ท็อป), 60px (แท็บเล็ต), 42px (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 1.2em

โมดูลประกาศ Dynamic Woo

เป็นความคิดที่ดีที่จะวางโมดูล Woo Notice ไว้ที่ด้านบนสุดของหน้าเพื่อดูประกาศเมื่อมีส่วนร่วมกับหน้าชำระเงิน โปรดทราบว่าเรากำลังสร้างประกาศที่จะแสดงเมื่อจำเป็นเท่านั้น

หากต้องการเพิ่ม Woo Notice Module ให้ไปที่โมดูลชื่อโพสต์และคลิกเพื่อเพิ่มโมดูล Woo Notice ใหม่

Woo ประกาศประเภทหน้าและพื้นหลัง

ถัดไป อัปเดตประเภทหน้าและสีพื้นหลังของ Woo Notice ดังนี้:

• ประเภทหน้า: หน้าชำระเงิน
• สีพื้นหลัง: #2a9d8f

ข้อความชื่อเรื่อง

จากแท็บการออกแบบ ให้อัปเดตการตั้งค่าต่อไปนี้

• แบบอักษรของชื่อเรื่อง: Roboto
• น้ำหนักแบบอักษรของชื่อเรื่อง: ปานกลาง
• สีข้อความชื่อเรื่อง: #e9c46a
• ขนาดข้อความชื่อเรื่อง: 14px
• ความสูงของบรรทัดชื่อเรื่อง: 1.8em
• สีของข้อความลิงก์: #f4a261

Woo Notice Fields

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

• สีของตัวบ่งชี้ฟิลด์ที่ต้องการ: #e9c46a
• ฟอนต์ป้ายกำกับฟิลด์: Roboto
• น้ำหนักแบบอักษรของป้ายกำกับฟิลด์: ตัวหนา
• ตัวยึดสี: #e9c46a
• ฟิลด์ สีพื้นหลัง: โปร่งใส
• ฟิลด์ข้อความสี: #e9c46a
• ฟิลด์โฟกัสสีข้อความ: #e9c46a
• ช่องว่างภายใน: บน 12px, ด้านล่าง 12px
• ความกว้างของเส้นขอบฟิลด์: 1px
• ฟิลด์เส้นขอบสี: rgba(255,255,255,0.32)

Woo หมายเหตุปุ่ม

ถึงเวลาปรับแต่งปุ่มต่างๆ

1. ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
2. ขนาดข้อความของปุ่ม: 14px
3. สีข้อความของปุ่ม: #e9c46a
4. สีพื้นหลังของปุ่ม: #2a9d8f
5. ความกว้างของขอบปุ่ม: 1px
6. สีเส้นขอบของปุ่ม: #e9c46a
7. รัศมีเส้นขอบของปุ่ม: 0px
8. ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
9. แบบอักษรของปุ่ม: Roboto
10. น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
11. รูปแบบตัวอักษรของปุ่ม: TT
12. ปุ่ม Padding: บน 12px, ด้านล่าง 12px, ซ้าย 24px, 24px ขวา

แบบฟอร์มประกาศ Woo

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

1. แบบฟอร์มมุมโค้งมน: 0px
2. แบบฟอร์มเส้นขอบกว้าง: 1px
3. แบบฟอร์มเส้นขอบสี: rgba(255,255,255,0.32)

Woo ประกาศกล่องเงา

หากต้องการเพิ่มการออกแบบที่เหมือนเส้นขอบด้านบนในแถบการแจ้งเตือนของ Woo ให้อัปเดตตัวเลือกกล่อง-เงาดังนี้:

1. กล่องเงา: ดูภาพหน้าจอ
2. กล่องเงาตำแหน่งแนวนอน: 0px
3. ตำแหน่งแนวตั้งเงาของกล่อง: 3px
4. สีเงา: #999e75

Woo Checkout Billing Module

ตอนนี้เรามีส่วนหัวของหน้าและประกาศแล้ว เราก็สามารถเพิ่มเนื้อหา Woo Checkout Billing ซึ่งเป็นองค์ประกอบที่สำคัญอีกอย่างหนึ่งของหน้าการชำระเงินได้

สร้างแถวใหม่ด้วยการจัดเรียงคอลัมน์สามในห้าสองในห้าก่อนที่จะเพิ่มวัสดุสำหรับการเรียกเก็บเงิน

เพิ่มโมดูล Woo Checkout bIlling ในคอลัมน์ 1

ข้อความชื่อการเรียกเก็บเงินของ Woo Checkout

จากโมดูล Woo Checkout Billing ให้เปิดการตั้งค่าและปรับสิ่งต่อไปนี้ภายใต้แท็บการออกแบบ

• แบบอักษรของชื่อเรื่อง: DM Serif Display
• สีข้อความของชื่อเรื่อง: #fff
• ขนาดข้อความของชื่อเรื่อง: 30px (เดสก์ท็อป), 24px (แท็บเล็ต), 18px (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 1.4em

ฟิลด์การเรียกเก็บเงินของ Woo Checkout และป้ายกำกับฟิลด์

เช่นเดียวกับโมดูลประกาศ โมดูลนี้มีตัวเลือกสำหรับการกำหนดสไตล์ป้ายชื่อฟิลด์และฟิลด์ เนื่องจากเราต้องการให้ฟิลด์และป้ายกำกับฟิลด์ทั้งหมดของเราสอดคล้องกันตลอดทั้งหน้า เราจึงสามารถคัดลอกรูปแบบป้ายกำกับฟิลด์และฟิลด์จากโมดูลประกาศ และวางลงในโมดูล Woo Checkout Billing

นี่คือวิธีการ:

1. เปิดการตั้งค่าโมดูลประกาศที่ด้านบนของหน้า
2. ภายใต้แท็บการออกแบบ ให้คลิกขวาที่กลุ่มตัวเลือก Field Labels
3. จากเมนูคลิกขวา เลือก "คัดลอกสไตล์ป้ายกำกับฟิลด์"

วางรูปแบบที่คัดลอกไว้ในโมดูลที่เพิ่มใหม่

และมันก็จะออกมาประมาณนี้

หนังสือแจ้งแบบฟอร์มการเรียกเก็บเงิน Woo Checkout

การแจ้งแบบฟอร์มมีหน้าที่แสดงการแจ้งเตือนหรือข้อผิดพลาดแบบไดนามิกเมื่อกรอกแบบฟอร์ม หากต้องการจัดรูปแบบประกาศในแบบฟอร์ม ให้ไปที่การตั้งค่า Woo Checkout Billing และทำการเปลี่ยนแปลงต่อไปนี้:

• แบบฟอร์มแจ้งสีพื้นหลัง: #e58991
• แบบฟอร์มหมายเหตุ Padding: 8px บน, 8px ด้านล่าง
• แบบอักษรประกาศแบบฟอร์ม: Roboto
• ขนาดข้อความแจ้งแบบฟอร์ม: 14px

Woo Checkout Billing Spacing และชายแดน

เพื่อปิดท้ายการออกแบบ ให้เพิ่มช่องว่างภายในเล็กน้อยและกรอบแสงโมดูลดังนี้:

• ช่องว่างภายใน: บน 16px ล่าง 16px ซ้าย 16px ขวา 16px
• ความกว้างของเส้นขอบ: 1px
• สีของเส้นขอบ: rgba(255,255,255,0.1)

Woo Checkout Shipping และ Woo Checkout Information

โมดูล Woo Checkout Shipping และโมดูล Woo Checkout Information เป็นส่วนประกอบที่จำเป็นสำหรับการสร้างเทมเพลตหน้าการชำระเงิน ก่อนการชำระเงินจะเสร็จสิ้น โมดูล Woo Checkout Shipping จะแสดงแบบฟอร์มที่จำเป็นสำหรับการป้อนรายละเอียดการจัดส่ง นอกจากนี้ โมดูล Woo Checkout Information จะแสดงแบบฟอร์มการสมัครที่อนุญาตให้ผู้ใช้ให้ข้อมูลเพิ่มเติมก่อนชำระเงิน

การเพิ่มโมดูล

ตอนนี้ไป ahed และเพิ่มโมดูลการจัดส่งการชำระเงิน Woo

เพิ่มโมดูลข้อมูล Woo Checkout ด้วย

โมดูล Woo แต่ละโมดูล (Checkout Shipping and Checkout Information) ต้องมีลักษณะเหมือนโมดูล Woo Checkout Billing เราสามารถคัดลอกสไตล์ที่เราต้องการสำหรับแต่ละแบบไปยังแต่ละแบบได้ มาคัดลอกและวางการออกแบบที่นี่

Woo Checkout รายละเอียดโมดูล

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

เพิ่มโมดูล Woo Checkout Details ใหม่ให้กับรายละเอียดการชำระเงินในคอลัมน์ 2 ของแถวเดียวกัน

ข้อความชื่อรายละเอียดการชำระเงินของ Woo

อัปเดตการตั้งค่าข้อความชื่อเรื่องดังนี้:

• แบบอักษรของชื่อเรื่อง: DM Serif Display
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• สีข้อความชื่อเรื่อง: #e9c46a
• ขนาดข้อความของชื่อเรื่อง: 24px (เดสก์ท็อป), 22px (แท็บเล็ต), 18px (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 1.4em

ป้ายชื่อคอลัมน์รายละเอียดการชำระเงินของ Woo

มากำหนดสไตล์ป้ายชื่อคอลัมน์กันเถอะ:

• แบบอักษรป้ายชื่อคอลัมน์: Roboto
• น้ำหนักแบบอักษรของป้ายชื่อคอลัมน์: ตัวหนา
• สีข้อความป้ายชื่อคอลัมน์: #ddb17c

Woo Checkout รายละเอียดเนื้อหาข้อความ

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

• แบบอักษรของร่างกาย: Roboto
• สีข้อความ: #fff

ใต้แท็บลิงก์ ให้อัปเดตสีข้อความลิงก์:

• ลิงค์สีข้อความ: #e0816b

เส้นขอบตารางรายละเอียดการชำระเงิน Woo

สำหรับการออกแบบนี้ เราจะนำเส้นขอบตารางออกทั้งหมด ในการดำเนินการนี้ ให้อัปเดตสิ่งต่อไปนี้:

• ความกว้างของเส้นขอบตาราง: 0px

เซลล์ตารางรายละเอียดการชำระเงิน Woo

เมื่อต้องการจัดรูปแบบเซลล์ตารางภายในตาราง ให้อัปเดตสิ่งต่อไปนี้:

• การขยายเซลล์ตาราง: เหลือ 0px
• สไตล์เส้นขอบของเซลล์ตาราง: none

Woo Checkout รายละเอียด Padding และ Border

เพื่อให้การออกแบบโมดูลสอดคล้องกับโมดูลอื่นๆ ให้อัปเดตช่องว่างภายในและเส้นขอบดังนี้:

• ช่องว่างภายใน: บน 16px ล่าง 16px ซ้าย 16px ขวา 16px
• ความกว้างของเส้นขอบ: 1px
• สีของเส้นขอบ: rgba(255,255,255,0.1)

โมดูลการชำระเงิน Woo Checkout

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

เพิ่มโมดูล Woo Checkout Details ใหม่ให้กับรายละเอียดการชำระเงินในคอลัมน์ 2 ของแถวเดียวกัน

ทำการปรับเปลี่ยนดังต่อไปนี้

• สีพื้นหลังประกาศแบบฟอร์ม: #E58991
• แบบอักษรการแจ้งแบบฟอร์ม: Roboto
• น้ำหนักแบบอักษรของแบบฟอร์มแจ้ง: ตัวหนา
• ขนาดตัวอักษรแจ้งแบบฟอร์ม: 16px
• การตั้งค่าปุ่ม: เหมือนก่อนหน้า
• ระยะห่าง: 0px (บน ล่าง ซ้าย ขวา)

ผลสุดท้าย

นี่คือลักษณะที่หน้าชำระเงินสุดท้ายของเรา

ห่อ

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