วิธีตั้งค่าหน้าชำระเงิน WooCommerce ด้วย Divi

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

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

ทำไมคุณถึงต้องมีหน้าชำระเงิน WooCommerce ที่กำหนดเอง

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

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

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

• ลดการละทิ้งรถเข็น

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

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

• ธุรกรรมที่รวดเร็วและง่ายดาย

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

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

วิธีตั้งค่าหน้าชำระเงิน WooCommerce แบบกำหนดเอง

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

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

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

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

ขั้นตอนที่หนึ่ง: ตั้งค่าหน้าชำระเงินของคุณในการตั้งค่าปลั๊กอิน WooCommerce ก่อนใช้ปลั๊กอิน Divi Builder ในการดำเนินการนี้ ไปที่แดชบอร์ด WooCommerce ของคุณและคลิกที่ "การตั้งค่า"

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

ขั้นตอนที่สอง: เมื่อตั้งค่าหน้าชำระเงินแล้ว ขั้นตอนต่อไปคือการติดตั้งปลั๊กอิน Divi Shop Builder ดังนั้น ไปที่เว็บไซต์ทางการของ Elegant Theme เพื่อซื้อปลั๊กอิน Divi Shop Builder คลิกลิงก์ดาวน์โหลดจาก "หน้าบัญชีของฉัน" เพื่อดาวน์โหลด

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

ในการดำเนินการนี้ ให้ไปที่ "หน้าบัญชีของฉัน" บนเว็บไซต์ Elegant Theme เพื่อคัดลอกคีย์ใบอนุญาต เมื่อคุณตรวจสอบสิทธิ์ปลั๊กอินแล้ว คุณสามารถเริ่มใช้งานได้ Divi Shop Builder ทำงานในปลั๊กอิน Divi Builder ซึ่งทำให้การสร้างร้านค้า WooCommerce ของคุณเป็นงานที่ราบรื่นมาก

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

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

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

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

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

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

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

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

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

• คลิกเพื่อเปิดโมดูลการชำระเงิน

• คลิกที่แท็บ “ออกแบบ”

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

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

บทสรุป

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