woocommerce_checkout_fields - 20 ตัวอย่างรหัสเพื่อปรับแต่งการชำระเงิน woocommerce

เผยแพร่แล้ว: 2025-07-03

ปรับแต่งการชำระเงินของ WooCommerce โดยไม่มีปลั๊กอิน? เป็นไปได้ - หากคุณพอใจกับ PHP สองสามบรรทัด ในโพสต์นี้คุณจะพบตัวอย่างโค้ดที่พร้อมใช้งาน 20 ตัวโดยใช้ตัวกรอง woocommerce_checkout_fields พวกเขาครอบคลุมกรณีชีวิตจริงเช่นการลบฟิลด์เปลี่ยนชื่อฉลากหรือเพิ่มตัวเลือกใหม่

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

หากคุณไม่ได้เข้ารหัสไม่ต้องกังวล - เราจะแสดงวิธีการใช้ปลั๊กอิน Checkout Fields ที่ยืดหยุ่น เพื่อให้ได้ผลลัพธ์เดียวกัน

การปรับแต่งการชำระเงินคืออะไรและช่วยปรับปรุงการแปลงได้อย่างไร

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

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

20 ตัวอย่างรหัสโดยใช้ตัวกรอง woocommerce_checkout_fields

ด้านล่างเป็น 20 ตัวอย่าง เพิ่มตัวอย่างเหล่านี้ลงใน functions.php ธีมลูกของคุณ php หรือปลั๊กอินที่กำหนดเอง

1. ลบฟิลด์ที่อยู่ที่สอง

 // This code allows disabling the second address field. add_filter('woocommerce_checkout_fields','hide_address_2_field_classic_checkout'); function hide_address_2_field_classic_checkout($fields) { unset ($fields['billing']['billing_address_2']); return $fields; }

2. ซ่อนฟิลด์โทรศัพท์

 // This code allows hiding the phone field add_filter('woocommerce_checkout_fields', 'hide_billing_phone_field_classic_checkout'); function hide_billing_phone_field_classic_checkout($fields) { unset ($fields['billing']['billing_phone']); return $fields; }

3. ทำให้ฟิลด์อีเมลเป็นตัวเลือก

 // This code makes the email field optional add_filter('woocommerce_checkout_fields', 'optional_billing_email_field_classic_checkout'); function optional_billing_email_field_classic_checkout($fields) { $fields['billing']['billing_email']['required'] = false; return $fields; }

4. เปลี่ยนผู้ถือตำแหน่งสำหรับฟิลด์นามสกุลและนามสกุล

 // This code allows adding the placeholder of the name and last name fields add_filter('woocommerce_checkout_fields', 'add_name_placeholders_classic_checkout'); function add_name_placeholders_classic_checkout($fields) { $fields['billing']['billing_first_name']['placeholder'] = 'Enter your name'; $fields['billing']['billing_last_name']['placeholder'] = 'Enter your surname'; return $fields; }

5. เปลี่ยนชื่อ“ นามสกุล” เป็น“ นามสกุล”

 // This code allows changing the last name field's label add_filter('woocommerce_checkout_fields', 'change_last_name_label_classic_checkout'); function change_last_name_label_classic_checkout($fields) { $fields['billing']['billing_last_name']['label'] = 'Surname'; return $fields; });

6. เพิ่มฟิลด์ข้อความที่กำหนดเอง

 // This code allows adding a new text field after the email field add_filter('woocommerce_checkout_fields', 'add_custom_text_field_classic_checkout'); function add_custom_text_field_classic_checkout($fields) { $fields['billing']['billing_extra_field'] = [ 'label' => 'Custom text field', 'type' => 'text', 'required' => false, 'priority' => 120, ]; return $fields; }

7. เพิ่ม textarea สำหรับคำแนะนำการจัดส่ง

 // This code allows adding a textarea field after the email field and the custom field from the previous example - with further priority add_filter('woocommerce_checkout_fields', 'add_custom_textarea_field_classic_checkout'); function add_custom_textarea_field_classic_checkout($fields) { $fields['billing']['delivery_instructions'] = [ 'label' => 'Delivery instructions', 'type' => 'textarea', 'required' => false, 'priority' => 130, ]; return $fields; }

8. ตั้งค่าคลาส CSS ที่กำหนดเอง

 // This code allows adding custom CSS classes to the first and last name fields add_filter('woocommerce_checkout_fields', 'add_custom_css_classes_classic_checkout'); function add_custom_css_classes_classic_checkout($fields) { $fields['billing']['billing_first_name']['class'] = ['form-row-wide primary']; $fields['billing']['billing_last_name']['class'] = ['form-row-wide secondary effect']; return $fields; }

9. เปลี่ยนลำดับความสำคัญของฟิลด์อีเมล

 /* This code allows moving email after the last name field. The default priority for billing fields: billing_first_name (10) billing_last_name (20) billing_company (30) billing_country (40) billing_address_1 (50) billing_address_2 (60) billing_city (70) billing_state (80) billing_postcode (90) billing_phone (100) billing_email (110) */ add_filter('woocommerce_checkout_fields', 'place_email_after_last_name_classic_checkout'); function place_email_after_last_name_classic_checkout($fields) { $fields['billing']['billing_email']['priority'] = 25; return $fields; }

10. ลบฟิลด์รหัสไปรษณีย์

 // This code allows disabling the postcode field. add_filter('woocommerce_checkout_fields','disable_postcode_field_classic_checkout'); function disable_postcode_field_classic_checkout($fields) { unset ($fields['billing']['billing_postcode']); return $fields; }

11. สั่งซื้อชื่อใหม่ใหม่หลังจากนามสกุล

 // This code allows moving the first name field after the last name field add_filter('woocommerce_checkout_fields', 'place_first_name_after_last_name_classic_checkout'); function place_first_name_after_last_name_classic_checkout($fields) { $fields['billing']['billing_first_name'] = array( 'priority' => 22, 'class' => 'form-row-last', 'label' => 'First name', ); $fields['billing']['billing_last_name']['class'] = 'form-row-first'; return $fields; }

12. เพิ่มช่องทำเครื่องหมายสำหรับคำขอใบแจ้งหนี้

 // This code allows adding a custom checkbox for invoice request. add_filter('woocommerce_checkout_fields', 'add_custom_checkbox_field_classic_checkout'); function add_custom_checkbox_field_classic_checkout($fields) { $fields['billing']['request_invoice'] = [ 'label' => 'Request invoice', 'type' => 'checkbox', 'required' => false, 'priority' => 140, ]; return $fields; }

13. เพิ่มการเลือกแบบเลื่อนลงสำหรับเวลาจัดส่ง

 // This code allows adding a custom select field add_filter('woocommerce_checkout_fields', 'add_custom_select_classic_checkout'); function add_custom_select_classic_checkout($fields) { $fields['billing']['delivery_time'] = [ 'label' => 'Delivery time', 'type' => 'select', 'options' => [ '' => 'Select...', 'morning' => 'Morning', 'evening' => 'Evening', ], 'priority' => 150, ]; return $fields; }

14. ความคิดเห็นสั่งซื้อล่วงหน้า

 // This code allows adding a default field value for order notes add_filter('woocommerce_checkout_fields', 'add_default_value_extra_notes_classic_checkout'); function add_default_value_extra_notes_classic_checkout($fields) { $fields['order']['order_comments']['default']= 'No comments'; return $fields; }

15. เพิ่มฟิลด์หมายเลขที่กำหนดเอง

 // This code allows adding a custom number field add_filter('woocommerce_checkout_fields', 'add_custom_number_field_classic_checkout'); function add_custom_number_field_classic_checkout($fields) { $fields['billing']['number_field'] = [ 'label' => 'Number field', 'type' => 'number', 'validate' => 'number', 'required' => false, 'priority' => 200, ]; return $fields; }

16. เพิ่มตัวเลือกวันที่

 // This code adds a custom date picker add_filter('woocommerce_checkout_fields', 'add_custom_datepicker_classic_checkout'); function add_custom_datepicker_classic_checkout($fields) { $fields['billing']['pickup_date'] = [ 'label' => 'Pickup date', 'type' => 'date', 'validate' => 'date', 'required' => false, 'priority' => 170, ]; return $fields; }

17. ปิดการตรวจสอบความถูกต้องของโทรศัพท์

 // This code removes the phone field validation add_filter('woocommerce_checkout_fields', 'remove_phone_field_validation_classic_checkout'); function remove_phone_field_validation_classic_checkout($fields) { $fields['billing']['billing_phone']['validate'] = false; return $fields; }

18. ทำให้ทุ่งนาประเทศจัดส่งเป็นครั้งสุดท้าย

 /* This code allows moving shipping country after the last field. The default priority for shipping fields: shipping_first_name (10) shipping_last_name (20) shipping_company (30) shipping_country (40) shipping_address_1 (50) shipping_address_2 (60) shipping_city (70) shipping_state (80) shipping_postcode (90) */ add_filter('woocommerce_checkout_fields', 'place_country_after_last_field_classic_checkout'); function place_country_after_last_field_classic_checkout($fields) { $fields['shipping']['shipping_country']['priority'] = 999; return $fields; }

19. ลบฟิลด์รหัสไปรษณีย์การจัดส่ง

 // This code allows disabling the shipping postcode field. add_filter('woocommerce_checkout_fields','disable_shipping_postcode_field_classic_checkout'); function disable_shipping_postcode_field_classic_checkout($fields) { unset ($fields['shipping']['shipping_postcode']); return $fields; }

20. เพิ่มฟิลด์ที่กำหนดเองหลังจากรายละเอียดการสั่งซื้อ

 // This code allows adding a new text field after the order notes add_filter('woocommerce_checkout_fields', 'add_custom_text_field_after_order_notes_classic_checkout'); function add_custom_text_field_after_order_notes_classic_checkout($fields) { $fields['order']['order_extra_field'] = [ 'label' => 'Text field', 'type' => 'text', 'required' => false, 'priority' => 20, ]; return $fields; }

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

ไม่ใช่นักพัฒนา? ไม่มีปัญหา. ปลั๊กอิน Checkout Fields ที่ยืดหยุ่นช่วยให้คุณทำทุกอย่างข้างต้น - มองเห็นได้จากแผงควบคุม WordPress ของคุณ

  • เพิ่มลบและจัดเรียงฟิลด์ใหม่โดยใช้การลากและวาง
    จัดลำดับฟิลด์การชำระเงินใหม่ใน WooCommerce
    จัดลำดับฟิลด์การชำระเงินใหม่ใน WooCommerce
  • แก้ไขฉลากตัวยึดตำแหน่งและค่าเริ่มต้น
  • ตั้งค่าฟิลด์ตามต้องการตัวเลือกหรือซ่อนเร้น
    ซ่อนฟิลด์เช็คเอาต์ WooCommerce
    ซ่อนฟิลด์เช็คเอาต์ WooCommerce
  • ใช้คลาส CSS หรือกฎการตรวจสอบความถูกต้อง
    การตรวจสอบความถูกต้องของฟิลด์ในฟิลด์เช็คเอาต์ที่ยืดหยุ่นสำหรับ WooCommerce
    การตรวจสอบความถูกต้องของฟิลด์ในฟิลด์เช็คเอาต์ที่ยืดหยุ่นสำหรับ WooCommerce
  • เลือกส่วน: การเรียกเก็บเงินการจัดส่งหรือข้อมูลเพิ่มเติม
  • กำหนดค่าเริ่มต้นสำหรับการทดสอบหรือวัตถุประสงค์ UX
  • ทั้งหมดโดยไม่ต้องแก้ไข PHP หรือเขียนรหัสที่กำหนดเอง

ผลลัพธ์ที่ไม่มีค่าใช้จ่ายในการพัฒนา

ฟิลด์เช็คเอาต์ที่ยืดหยุ่น Pro - คุณสมบัติขั้นสูง

ต้องการพลังงานและความยืดหยุ่นมากขึ้นหรือไม่? เวอร์ชัน Pro เพิ่มความสามารถขั้นสูง:

  • ตรรกะแบบมีเงื่อนไขสำหรับการแสดง/ซ่อนฟิลด์ตามเนื้อหาของรถเข็นหรือข้อมูลผู้ใช้
  • รองรับประเภทฟิลด์เพิ่มเติม: ตัวเลือกวันที่ตัวเลือกเวลาวิทยุที่มีสีหรือรูปภาพและอื่น ๆ
  • การควบคุมการมองเห็นสำหรับบทบาทของผู้ใช้ - แสดงฟิลด์ที่แตกต่างกันไปยังผู้ใช้ B2B และ B2C
  • การแสดงผลฟิลด์ตามวิธีการจัดส่งหรือการชำระเงินที่เลือก
  • ราคาเพิ่มเติมต่อการตั้งค่าฟิลด์

คุณอาจเห็นคุณสมบัติปลั๊กอินในหน้าผลิตภัณฑ์

ฟิลด์เช็คเอาต์ที่ยืดหยุ่นโปร WooCommerce £ 59

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

การติดตั้งที่ใช้งานอยู่: 90,000+ | คะแนน WordPress:

เพิ่มลงในรถเข็น หรือ ดูรายละเอียด
การติดตั้งที่ใช้งานอยู่ 90,000+
อัปเดตล่าสุด: 2025-06-23
ทำงานร่วมกับ WooCommerce 9.6 - 9.9

สรุป: วิธีใดที่ดีที่สุดสำหรับการชำระเงินของคุณ?

การใช้ woocommerce_checkout_fields เป็นวิธีที่มีประสิทธิภาพในการปรับแต่งการชำระเงินของ WooCommerce - แต่ต้องใช้การเข้ารหัสและการทดสอบอย่างระมัดระวัง นอกจากนี้เราต้องดูแลรหัสและการอัปเดตชุดรูปแบบ

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

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

ประเด็นสำคัญ

  • ตัวกรอง woocommerce_checkout_fields ช่วยให้คุณปรับแต่งแบบฟอร์มการชำระเงินด้วย PHP
  • คุณสามารถใช้เพื่อเพิ่มลบเปลี่ยนชื่อการจัดลำดับใหม่หรือฟิลด์สไตล์
  • ปลั๊กอินฟิลด์ Checkout ที่ยืดหยุ่นทำเช่นเดียวกัน - แต่ไม่จำเป็นต้องใช้รหัส
  • เวอร์ชัน Pro เพิ่มตรรกะแบบมีเงื่อนไขประเภทฟิลด์พิเศษและกฎการกำหนดราคาฟิลด์
  • เลือกวิธีการที่เหมาะกับเวิร์กโฟลว์ของคุณ: รหัสสำหรับการควบคุมปลั๊กอินสำหรับความเร็ว