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

เผยแพร่แล้ว: 2021-07-21

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

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

สิ่งสำคัญคือต้องทราบว่าหน้าการชำระเงินเป็นที่ที่ลูกค้าชำระเงินสำหรับผลิตภัณฑ์หรือบริการที่คุณนำเสนอในร้านค้าของคุณ ดังนั้น คุณต้องทำให้ถูกต้อง

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

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

มีสองวิธีในการปรับแต่งหน้า:

  • เทมเพลตการชำระเงินแบบกำหนดเอง – เอกสารของ WooCommerce ระบุไว้อย่างชัดเจนว่าคุณสามารถคัดลอกเทมเพลตการชำระเงินไปยังธีมของคุณในโครงสร้างโฟลเดอร์ดังนี้: woocommerce/checkout/form-checkout.php ซึ่งหมายความว่าคุณสามารถปรับแต่ง form-checkout.php ได้ตามความต้องการของคุณ
  • ปลั๊กอิน – มีส่วนขยายมากมายให้เลือกปรับแต่งหน้าการชำระเงิน บางส่วนมีให้บริการฟรีในขณะที่บางส่วนเป็นส่วนขยายที่ต้องชำระเงิน
  • รหัสที่กำหนดเอง – วิธีนี้ค่อนข้างยุ่งยากและต้องการความรู้ด้านเทคนิคสำหรับคุณจึงจะสามารถใช้โซลูชันได้ อย่างไรก็ตาม นี่เป็นทางออกที่สมบูรณ์แบบหากคุณต้องการแก้ไขเพียงเล็กน้อยและไม่ต้องการซื้อปลั๊กอิน เราจะใช้วิธีนี้ในบทช่วยสอนนี้

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

ก่อนที่เราจะเริ่ม ควรสังเกตว่า WooCommerce มี action hooks ในทุกหน้า สามารถใช้ Action hook เพื่อเพิ่มหรือลบองค์ประกอบออกจากหน้าการชำระเงินได้ มีตะขอดำเนินการ 9 รายการในหน้าชำระเงิน:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_checkout_order_review
  • woocommerce_checkout_after_order_review
  • woocommerce_after_checkout_form

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

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

  1. ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
  2. จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อหน้า Theme Editor เปิดขึ้น ให้มองหาไฟล์ฟังก์ชันของธีมที่เราจะเพิ่มฟังก์ชันที่จะ เพิ่มข้อความให้กับลูกค้าเกี่ยวกับรายละเอียดการจัดส่ง
  3. เพิ่มรหัสต่อไปนี้ในไฟล์ php : 
add_action( 'woocommerce_before_checkout_shipping_form', function() {

echo 'Don\'t forget to include your unit number in the address!';

});
  1. นี่คือผลลัพธ์: แก้ไขการชำระเงิน
  2. หากคุณต้องการจัดการฟิลด์ใดๆ คุณสามารถใช้ตัวกรอง woocommerce_checkout_fields ตัวอย่างเช่น หากต้องการลบฟิลด์หมายเลขโทรศัพท์สำหรับการเรียกเก็บเงิน ให้เพิ่มรหัสต่อไปนี้ในไฟล์เดียวกัน: 
// Hook in

add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function njengah_override_checkout_fields( $fields ) {

unset($fields['billing']['billing_phone']); return $fields; }
  1. ในการเพิ่มฟิลด์หมายเลขโทรศัพท์สำหรับจัดส่ง ให้เพิ่มรหัสต่อไปนี้: 
// Hook in

add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function njengah_override_checkout_fields( $fields ) {

$fields['shipping']['shipping_phone'] = array(

'label'   => __('Phone', 'woocommerce'),

'placeholder'=>  _x('Phone', 'placeholder', 'woocommerce'),

'required' => false,

'class'    => array('form-row-wide'),

'clear'    => true

);

return $fields;

}

/**

* Display field value on the order edit page

*/

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'njengah_custom_checkout_field_display_admin_order_meta', 10, 1 );

function njengah_custom_checkout_field_display_admin_order_meta($order){

global $post_id;

$order = new WC_Order( $post_id );

echo '<p><strong>'.__('Field Value').':</strong> ' . get_post_meta($order->get_id(), '_shipping_field_value', true ) . '</p>';

}
  1. เมื่อต้องการเปลี่ยนตัวยึดของฟิลด์รหัสไปรษณีย์ ให้เพิ่มรหัสต่อไปนี้: 
add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function njengah_override_checkout_fields( $fields ) {

$fields['billing']['billing_postcode']['placeholder'] = 'Postal Code';

return $fields;

}

บทสรุป

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

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

เราหวังว่าบทช่วยสอนนี้จะช่วยคุณค้นหาวิธีแก้ไขปัญหาของคุณ

บทความที่คล้ายกัน

  1. วิธีตั้งค่าไฟล์อัพโหลด WooCommerce บน Checkout
  2. วิธีเพิ่มเนื้อหาด้านล่างชื่อผลิตภัณฑ์เด่น หน้าร้าน
  3. วิธีเพิ่มการยืนยันอีเมลลงทะเบียน WooCommerce
  4. วิธีสร้าง Number Pagination ใน WordPress โดยไม่ต้องใช้ Plugin
  5. คู่มือฉบับสมบูรณ์เกี่ยวกับการใช้ WordPress Custom Hooks do_action & apply_filters พร้อมตัวอย่าง
  6. วิธีตั้งค่ารถเข็น WooCommerce และชำระเงินในหน้าเดียวกัน
  7. วิธีปรับแต่งหน้าหมวดหมู่สินค้าใน WooCommerce
  8. WooCommerce สร้างหน้าผลิตภัณฑ์เดียวแบบกำหนดเอง
  9. วิธีเพิ่มเครื่องคำนวณการจัดส่งของ WooCommerce บนหน้ารถเข็น
  10. กล่องกาเครื่องหมายยอมรับข้อกำหนดและเงื่อนไขของ WooCommerce ในแบบฟอร์มการลงทะเบียน
  11. วิธีเพิ่มปุ่มดูรถเข็นใน WooCommerce
  12. วิธีรับผลิตภัณฑ์ปัจจุบัน WooCommerce
  13. วิธีเพิ่มฟิลด์ผลิตภัณฑ์ที่กำหนดเอง WooCommerce
  14. วิธีเปลี่ยนเทมเพลตอีเมลใน WooCommerce
  15. วิธีการตั้งค่า WooCommerce ซื้อหนึ่งแถมหนึ่ง
  16. วิธีเพิ่มการชำระเงินด่วนของ PayPal ใน WooCommerce
  17. วิธีการเปลี่ยนข้อความตัวแทนฟิลด์การชำระเงิน WooCommerce