วิธีแก้ไขหน้าชำระเงิน WooCommerce (โค้ด + ปลั๊กอิน)

เผยแพร่แล้ว: 2023-02-11
ซ่อน สารบัญ
1. สิ่งที่ต้องปรับแต่งในหน้าชำระเงินของ WooCommerce
2. จะแก้ไขหน้าชำระเงิน WooCommerce โดยใช้รหัสได้อย่างไร
2.1. การปรับแต่งผ่านธีม (เทมเพลตการชำระเงิน)
2.2. การปรับแต่งผ่าน CSS
2.3. การปรับแต่งโดยใช้ตะขอชำระเงินของ WooCommerce
2.4. รหัสที่กำหนดเอง
2.4.1. ลบฟิลด์หมายเลขโทรศัพท์สำหรับการเรียกเก็บเงิน
2.4.2. เพิ่มฟิลด์หมายเลขโทรศัพท์สำหรับจัดส่ง
2.4.3. เปลี่ยนตัวยึดฟิลด์
3. วิธีปรับแต่งหน้าชำระเงิน WooCommerce โดยใช้ปลั๊กอิน
4. ไขลาน

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

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

ดังนั้นจะแก้ไขหน้าชำระเงินของ WooCommerce เพื่อเพิ่มยอดขายได้อย่างไร

มาดูโค้ดและปลั๊กอินยอดนิยมเพื่อปรับแต่งหน้าชำระเงินกัน

ต้องปรับแต่งอะไรในหน้าชำระเงินของ WooCommerce

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

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

และอีกมากมาย…

ต่อไปนี้คือตัวอย่างการชำระเงินในหน้าเดียวโดยใช้ปลั๊กอินแคชเชียร์

แคชเชียร์ WooCommerce ชำระเงินหน้าเดียว

จะแก้ไขหน้าชำระเงิน WooCommerce โดยใช้รหัสได้อย่างไร

มาดูวิธีแก้ไขหน้าชำระเงิน WooCommerce ฟรี โดยใช้โค้ดบางส่วน

ในการเขียนโค้ด เราสามารถปรับแต่งได้ดังนี้

  1. ผ่านทางธีม
  2. การใช้ CSS
  3. Hooks (การกระทำและตัวกรอง)
  4. รหัสที่กำหนดเอง

การปรับแต่งผ่านธีม (เทมเพลตการชำระเงิน)

คุณสามารถปรับแต่งส่วนใหญ่ได้โดยใช้ hooks แต่หากต้องการแก้ไขมาร์กอัปในหน้าชำระเงิน คุณสามารถทำได้ในธีมด้วย

ตามเอกสาร WooCommerce ให้คัดลอกเทมเพลตการชำระเงินไปยังธีมของคุณในโครงสร้างโฟลเดอร์ดังนี้: woocommerce/checkout/form-checkout.php

จากนั้น คุณสามารถปรับแต่ง form-checkout.php ได้ตามต้องการ และมันจะโหลดแทนเทมเพลตเริ่มต้น

การปรับแต่งผ่าน CSS

คลาส CSS อาจเปลี่ยนแปลงตามธีมหรือปลั๊กอินของคุณ แต่โดยปกติแล้วคลาสเริ่มต้นจะพร้อมใช้งาน

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

  • <body class="woocommerce-checkout">
  • <div class="woocommerce">
  • <แบบฟอร์ม class="woocommerce-checkout"> <div id="customer_details" class="col2-set">
  • <div class="woocommerce-billing-fields">
  • <p class="form-row">
  • <div class="woocommerce-shipping-fields">
  • <p class="form-row">
  • <div class="woocommerce-additional-fields">
  • <div id="order_review" class="woocommerce-checkout-review-order"><table class="woocommerce-checkout-review-order-table">
  • <div id="payment"><ul class="wc_payment_methods payment_methods method"><div class="form-row place-order">

ตัวอย่างเช่น:

form.woocommerce-checkout input[type="text"] {
    รัศมีเส้นขอบ: 3px;
    สีพื้นหลัง: #ccc;
    สี: #444;
}

การปรับแต่งโดยใช้ตะขอชำระเงินของ WooCommerce

มี 28 action hook ที่สามารถเพิ่มหรือลบองค์ประกอบออกจากหน้าชำระเงินได้

WooCommerce ชำระเงิน hooks ภาพ
  1. woocommerce_before_checkout_form
  2. woocommerce_checkout_before_customer_details
  3. woocommerce_checkout_billing
  4. woocommerce_before_checkout_billing_form
  5. woocommerce_after_checkout_billing_form
  6. woocommerce_before_checkout_registration_form
  7. woocommerce_after_checkout_registration_form
  8. woocommerce_checkout_shipping
  9. woocommerce_before_checkout_shipping_form
  10. woocommerce_after_checkout_shipping_form
  11. woocommerce_before_order_notes
  12. woocommerce_after_order_notes
  13. woocommerce_checkout_after_customer_details
  14. woocommerce_checkout_before_order_review_heading
  15. woocommerce_checkout_order_review
  16. woocommerce_checkout_before_order_review
  17. woocommerce_review_order_before_cart_contents
  18. woocommerce_review_order_after_cart_contents
  19. woocommerce_review_order_before_shipping
  20. woocommerce_review_order_after_shipping
  21. woocommerce_review_order_before_order_total
  22. woocommerce_review_order_after_order_total
  23. woocommerce_review_order_before_payment
  24. woocommerce_review_order_before_submit
  25. woocommerce_review_order_after_submit
  26. woocommerce_review_order_after_payment
  27. woocommerce_checkout_after_order_review
  28. woocommerce_after_checkout_form

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

add_action( 'woocommerce_after_checkout_billing_form', 'storeapps_after_checkout_billing_form', 10 );
ฟังก์ชัน storeapps_after_checkout_billing_form() {
	echo '<h2>woocommerce_after_checkout_billing_form</h2>';
	// เพิ่มฟอร์มหรือฟิลด์ของคุณที่นี่
}

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

รหัสที่กำหนดเอง

นี่เป็นวิธีที่ยุ่งยากกว่า แต่ถ้าคุณเป็นนักพัฒนา นี่คือวิธีการ:

WooCommerce มีตัวกรองหลายตัวสำหรับแก้ไขช่องชำระเงิน รวมถึง woocommerce_checkout_fields , woocommerce_billing_fields และ woocommerce_shipping_fields

คุณสามารถใช้ตัวกรอง 'woocommerce_checkout_fields' เพื่อจัดการฟิลด์ชำระเงินทั้งหมด

ลบฟิลด์หมายเลขโทรศัพท์สำหรับการเรียกเก็บเงิน

add_filter( 'woocommerce_checkout_fields' , 'storeapps_modify_checkout_fields' );
ฟังก์ชัน storeapps_modify_checkout_fields ( $fields ) {
	unset($fields['billing']['billing_phone']);
	ส่งคืนฟิลด์ $;
}

เพิ่มฟิลด์หมายเลขโทรศัพท์สำหรับจัดส่ง

add_filter( 'woocommerce_checkout_fields' , 'storeapps_modify_checkout_fields' );
ฟังก์ชัน storeapps_modify_checkout_fields ( $fields ) {
	$fields['shipping']['shipping_phone'] = อาร์เรย์(
		'label' => __('โทรศัพท์', 'woocommerce'),
		'placeholder' => _x('โทรศัพท์', 'placeholder', 'woocommerce'),
		'จำเป็น' => เท็จ
		'class' => array('แบบฟอร์ม-แถว-กว้าง'),
		'ชัดเจน' => จริง
	);
	ส่งคืนฟิลด์ $;
}

/**
 * หากต้องการแสดงค่าฟิลด์ในหน้าแก้ไขคำสั่งซื้อ
 */
add_action( 'woocommerce_admin_order_data_after_shipping_address', 
'storeapps_custom_checkout_field_display_admin_order_meta' );
ฟังก์ชัน storeapps_custom_checkout_field_display_admin_order_meta( $order ){
	$post_id สากล;
	$order = wc_get_order( $post_id );
	echo '<p><strong>'.__('Field Value', 'woocommerce').':</strong> ' get_post_meta($order->get_id(), '_shipping_field_value', true ) '</p>';
}

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

เปลี่ยนตัวยึดฟิลด์

add_filter( 'woocommerce_checkout_fields', 'storeapps_modify_checkout_fields' );
ฟังก์ชัน storeapps_modify_checkout_fields ( $fields ) {
	$fields['billing']['billing_postcode']['placeholder'] = __( 'รหัสไปรษณีย์', 'woocommerce' );
	ส่งคืนฟิลด์ $;
}

เราขอแนะนำให้คุณอ้างอิงบล็อกของเราเกี่ยวกับการเพิ่มข้อมูลโค้ดอย่างปลอดภัย

วิธีปรับแต่งหน้าชำระเงิน WooCommerce โดยใช้ปลั๊กอิน

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

และแคชเชียร์สำหรับ WooCommerce คือปลั๊กอินที่คุณต้องการ

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

ตัวแก้ไขช่องชำระเงินแคชเชียร์ของ WooCommerce

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

รับข้อมูลที่จำเป็นจากผู้ซื้อโดยเพิ่มฟิลด์ใหม่ในหน้าชำระเงิน WooCommerce ของคุณ

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

ไขลาน

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

สำหรับคำถามหรือข้อเสนอแนะใด ๆ โปรดแสดงความคิดเห็นของคุณด้านล่าง