วิธีแก้ไขหน้าชำระเงิน WooCommerce W / O Elementor

เผยแพร่แล้ว: 2022-10-18

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

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

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

สารบัญ

ทำไมคุณอาจต้องการแก้ไขหน้าชำระเงิน WooCommerce ของคุณ

วิธีแก้ไขหน้าชำระเงิน WooCommerce W / O Elementor -... ไม่ชอบหน้าชำระเงิน WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวเช่นกัน?
วิธีแก้ไขหน้าชำระเงิน WooCommerce WO Elementor -…
ไม่ชอบหน้าเช็คเอาต์ WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวด้วยใช่หรือไม่

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

ปรับปรุงประสบการณ์ผู้ใช้

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

ทำให้การชำระเงินปลอดภัย e

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

อนุญาตให้ซื้อที่ง่ายและรวดเร็ว

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

ปรับปรุงการสร้างแบรนด์

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

วิธีแก้ไขหน้าชำระเงิน WooCommerce WO Elementor

วิธีแก้ไขหน้าชำระเงิน WooCommerce W / O Elementor -... ไม่ชอบหน้าชำระเงิน WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวเช่นกัน?
วิธีแก้ไขหน้าชำระเงิน WooCommerce WO Elementor -…
ไม่ชอบหน้าเช็คเอาต์ WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวด้วยใช่หรือไม่

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

วิธีที่ 1: แก้ไขด้วยตนเอง

วิธีแก้ไขหน้าชำระเงิน WooCommerce W / O Elementor -... ไม่ชอบหน้าชำระเงิน WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวเช่นกัน?
วิธีแก้ไขหน้าชำระเงิน WooCommerce WO Elementor -…
ไม่ชอบหน้าเช็คเอาต์ WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวด้วยใช่หรือไม่

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

ขั้นตอนที่ 1: เลือกตัวกรองสำหรับปรับแต่งช่องการชำระเงิน

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

  • WooCommerce_shipping_fields
  • WooCommerce_after_checkout_form
  • WooCommerce_billing_fields
  • WooCommerce_checkout_after_terms_and_conditions

ขั้นตอนที่ 2: แก้ไขข้อความตัวแทน

ถัดไป เริ่มต้นด้วยการกำหนดข้อความตัวยึดตำแหน่งใน order_comments_fields คุณสามารถทำได้โดยการเพิ่มข้อมูลโค้ดต่อไปนี้ในไฟล์ functions.php ของคุณ

ขั้นตอนที่ 3: การลบฟิลด์

หากคุณต้องการลบฟิลด์ คุณเพียงแค่เพิ่มโค้ดด้านล่างลงในไฟล์ functions.php ของคุณ

ขั้นตอนที่ 4: เพิ่มฟิลด์ที่จำเป็น

หากต้องการเพิ่มฟิลด์ลงในหน้าชำระเงิน WooCommerce คุณเพียงแค่ใส่โค้ดด้านล่างลงในไฟล์ function.php ของคุณ

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

ขั้นตอนสุดท้าย: บันทึกข้อมูลของคุณ

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

วิธีที่ 2: การใช้ Elementor Page Builder

วิธีแก้ไขหน้าชำระเงิน WooCommerce W / O Elementor -... ไม่ชอบหน้าชำระเงิน WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวเช่นกัน?
วิธีแก้ไขหน้าชำระเงิน WooCommerce WO Elementor -…
ไม่ชอบหน้าเช็คเอาต์ WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวด้วยใช่หรือไม่

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

ขั้นตอนที่ 1: ค้นหาหน้าชำระเงิน

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

ขั้นตอนที่ 2: เพิ่มวิดเจ็ตการชำระเงิน Elementor

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

ขั้นตอนที่ 3: แก้ไขเนื้อหาในหน้าชำระเงิน

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

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

ขั้นตอนที่ 4: แก้ไขรูปแบบหน้าชำระเงินของคุณ

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

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

ขั้นตอนที่ 5: บันทึกการเปลี่ยนแปลงของคุณ

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

วิธีที่ 3: การใช้ปลั๊กอิน

วิธีแก้ไขหน้าชำระเงิน WooCommerce W / O Elementor -... ไม่ชอบหน้าชำระเงิน WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวเช่นกัน?
วิธีแก้ไขหน้าชำระเงิน WooCommerce WO Elementor -…
ไม่ชอบหน้าเช็คเอาต์ WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวด้วยใช่หรือไม่

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

ขั้นตอนที่ 1: ติดตั้งโปรแกรมเสริม Shopready สำหรับ elementor

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

ขั้นตอนที่ 2: ปรับแต่งเนื้อหาของหน้าการชำระเงิน Shopready ของคุณ

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

ขั้นตอนที่ 3: เปิดใช้งานวิดเจ็ต

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

ขั้นตอนที่ 4: เปิดใช้งานโมดูล

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

ขั้นตอนที่ 5: เปิดใช้งานเทมเพลต

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

ขั้นตอนที่ 6: เปิดใช้งานสกุลเงิน API

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

เหตุใดจึงต้องใช้ Shopready เพื่อแก้ไขหน้าชำระเงิน WooCommerce

วิธีแก้ไขหน้าชำระเงิน WooCommerce W / O Elementor -... ไม่ชอบหน้าชำระเงิน WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวเช่นกัน?
วิธีแก้ไขหน้าชำระเงิน WooCommerce W / O Elementor -…
ไม่ชอบหน้าเช็คเอาต์ WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวด้วยใช่หรือไม่

ShopReady เป็นเพียงส่วนเสริมสำหรับ Elementor พัฒนาโดย QuomodoSoft ปลั๊กอินนี้มีประโยชน์มากมายเมื่อใช้เพื่อแก้ไข หน้าชำระเงินที่กำหนดเอง ของ WooCommerce ซึ่งรวมถึง:

วิดเจ็ตที่หลากหลาย

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

เทมเพลตที่สร้างไว้ล่วงหน้า

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

คุณสมบัติที่มุ่งเน้นลูกค้า

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

เหมาะกับมือถือ

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

บทสรุป

วิธีแก้ไขหน้าชำระเงิน WooCommerce W / O Elementor -... ไม่ชอบหน้าชำระเงิน WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวเช่นกัน?
วิธีแก้ไขหน้าชำระเงิน WooCommerce W / O Elementor -…
ไม่ชอบหน้าเช็คเอาต์ WooCommerce เริ่มต้นของคุณเพราะมันดูน่าเบื่อ และกระบวนการเช็คเอาต์ก็ยาวด้วยใช่หรือไม่

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

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

วิธีเพิ่ม Wishlist ใน WooCommerce W/O Plugin