วิธีเพิ่มฟิลด์พิเศษในแบบฟอร์มการชำระเงิน WooCommerce

เผยแพร่แล้ว: 2020-09-21

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

WooCommerce หน้าชำระเงิน

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

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

เมื่อมีข้อผิดพลาดในหน้านี้ ลูกค้าจะไม่สามารถทำการซื้อใดๆ ได้ ซึ่งจะส่งผลอย่างมากต่อประสิทธิภาพของร้านค้าของคุณ เนื่องจากคุณจะไม่สามารถทำยอดขายได้

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

เพิ่มฟิลด์พิเศษในแบบฟอร์มการชำระเงิน WooCommerce

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

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

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

เมื่อคุณได้ทราบพื้นฐานแล้ว ให้เราลงลึกในบทช่วยสอนนี้ ในการเพิ่มฟิลด์ที่กำหนดเองในหน้าชำระเงิน เราจะใช้สองวิธี:

  • การใช้ปลั๊กอิน
  • การสร้างรหัสที่กำหนดเอง

ก) ขั้นตอนในการเพิ่มฟิลด์พิเศษให้กับหน้าชำระเงิน WooCommerce ของคุณโดยใช้รหัส

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

นี่คือขั้นตอนง่าย ๆ ที่คุณต้องปฏิบัติตาม:

  1. ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
  2. จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > เมนูตัวแก้ไขธีม เมื่อเปิดหน้า Theme Editor ให้มองหาไฟล์ฟังก์ชันของธีมที่เราจะเพิ่มฟังก์ชันที่จะ เพิ่มฟิลด์พิเศษให้กับหน้าชำระเงินใน WooCommerce
  3. เพิ่มรหัสต่อไปนี้ ในไฟล์ php :
 /**

* เพิ่มฟิลด์ที่กำหนดเองในหน้าชำระเงิน

*/

add_action('woocommerce_after_order_notes', 'custom_checkout_field');

ฟังก์ชั่น custom_checkout_field($checkout)

{

echo '<div id="custom_checkout_field"><h2>' __('หัวข้อใหม่'). '</h2>';

woocommerce_form_field('custom_field_name', อาร์เรย์ (

'type' => 'ข้อความ',

'คลาส' => อาร์เรย์ (

'my-field-class form-row-wide'

) ,

'label' => __('Custom ฟิลด์เพิ่มเติม') ,

'placeholder' => __('New Custom Field') ,

) ,

$checkout->get_value('custom_field_name'));

ก้อง '</div>';

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

* ขั้นตอนการชำระเงิน

*/

add_action('woocommerce_checkout_process', 'customized_checkout_field_process');

ฟังก์ชั่น customised_checkout_field_process()

{

// แสดงข้อความแสดงข้อผิดพลาดหากไม่ได้ตั้งค่าฟิลด์

if (!$_POST['customised_field_name']) wc_add_notice(__('Please enter value!'), 'error');

}

หากไม่มีอินพุตในฟิลด์ที่กำหนดเอง จะมีข้อผิดพลาดและผลลัพธ์จะเป็น ดังนี้: ไม่มีการป้อนข้อมูลในฟิลด์ที่กำหนดเอง

  1. ตอนนี้เราได้เพิ่มช่องการชำระเงินแบบกำหนดเองและได้ตรวจสอบความถูกต้องแล้ว ให้เรา ยืนยันว่ารายละเอียดที่ป้อนลงในฟิลด์ที่กำหนดเองนั้นกำลังถูกบันทึกหรือไม่ สามารถทำได้โดยใช้รหัสต่อไปนี้ที่จะ เพิ่มลงในไฟล์ functions.php :
 /**

* อัปเดตค่าที่กำหนดในฟิลด์ที่กำหนดเอง

*/

add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');

ฟังก์ชั่น custom_checkout_field_update_order_meta($order_id)

{

ถ้า (!empty($_POST['customised_field_name'])) {

update_post_meta($order_id, 'บางฟิลด์',sanitize_text_field($_POST['customised_field_name']));

}

}

รหัสทำงานอย่างไร

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

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

b) ขั้นตอนในการเพิ่มฟิลด์พิเศษให้กับหน้าชำระเงิน WooCommerce ของคุณโดยใช้ปลั๊กอิน

โซลูชันนี้สำหรับผู้ใช้ WordPress ที่ไม่คุ้นเคยกับการเขียนโค้ด โซลูชันนี้เกี่ยวข้องกับการใช้ปลั๊กอิน WooCommerce Checkout Manager WooCommerce Checkout Manager

ฉันจะให้คำแนะนำอย่างเป็นระบบโดยละเอียดซึ่งจะช่วยให้คุณดาวน์โหลดปลั๊กอินและใช้เพื่อเพิ่มฟิลด์พิเศษในหน้าชำระเงิน

นี่คือขั้นตอนที่คุณต้องปฏิบัติตาม:

  1. ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
  2. จากนั้นเราจะติดตั้งปลั๊กอินที่เราได้ระบุไว้ก่อนหน้านี้ หากคุณดาวน์โหลดโดยใช้ลิงก์ด้านบน ให้ไปที่ Plugins > Add New หลังจากนั้น คลิกที่ Upload Plugin แล้ว เลือก Browse สำหรับไฟล์ที่ดาวน์โหลดมาดังรูปด้านล่าง: การติดตั้งปลั๊กอิน
  3. หากต้องการดาวน์โหลดโดยตรงในแผงการดูแลระบบ ให้ไปที่ ปลั๊กอิน > เพิ่มใหม่ หลังจากนั้น คุณจะต้องทำการค้นหาคำหลักสำหรับปลั๊กอิน 'WooCommerce Checkout Manager' คุณต้อง ติดตั้ง และ เปิดใช้งาน ดังที่แสดงด้านล่าง: การติดตั้ง WooCommerce Checkout Manager
  4. ในการสร้างฟิลด์ใหม่ ไปที่ WordPress Dashboard และคลิกที่ WooCommerce > Settings จากนั้น คลิกที่ แท็บ ชำระเงิน และคลิกที่ แท็บเพิ่มเติม คลิกที่ เพิ่มฟิลด์ใหม่ ดังที่แสดงด้านล่าง: เพิ่มฟิลด์ใหม่โดยใช้ plugin
  5. หน้าต่างใหม่จะปรากฏขึ้นและคุณต้องเพิ่มรายละเอียดที่เกี่ยวข้อง อย่าลืมบันทึกการเปลี่ยนแปลงทั้งหมดที่คุณทำ: ใช้ปลั๊กอิน
  6. หากต้องการดูผลลัพธ์ ให้รีเฟรชหน้าการชำระเงิน และคุณจะเห็นช่องการชำระเงินใหม่: ช่องที่กำหนดเองในการชำระเงิน

บทสรุป

ในบทช่วยสอนสั้นๆ นี้ ฉันแสดงวิธีเพิ่มฟิลด์ใหม่ให้กับหน้าการชำระเงิน ฉันแน่ใจว่าตอนนี้คุณรู้วิธีเพิ่มฟิลด์พิเศษแล้ว และมันไม่ยากเลย ฉันได้แบ่งปันสองวิธีแก้ไขปัญหา หนึ่งเกี่ยวข้องกับการใช้โค้ด PHP ที่จะเพิ่มฟิลด์พิเศษและอีกอันคือกับปลั๊กอิน ปลั๊กอินมีคุณลักษณะเพิ่มเติมอื่นๆ ที่คุณสามารถดูได้เช่นกัน และเป็นวิธีแก้ปัญหาสำหรับผู้ที่ไม่ค่อยเข้าใจเทคโนโลยี อย่างไรก็ตาม คุณสามารถเปลี่ยนชื่อฟิลด์ได้ตามความต้องการของคุณ

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

  1. วิธีข้ามรถเข็นและเปลี่ยนเส้นทางไปยังหน้าชำระเงิน WooCommerce
  2. วิธีผสานรวม Stripe กับ WooCommerce
  3. วิธีลบแถบด้านข้างออกจากหน้าผลิตภัณฑ์ในธีม WooCommerce
  4. วิธีเพิ่มไอคอนการชำระเงิน WooCommerce ในส่วนท้าย [HTML]
  5. วิธีรับวิธีการชำระเงินใน WooCommerce » ตัวอย่างโค้ด
  6. วิธีซ่อนผลิตภัณฑ์โดยไม่มีราคาใน WooCommerce
  7. วิธีลบรายละเอียดการเรียกเก็บเงินออกจาก WooCommerce Checkout
  8. ซ่อนหรือลบช่องปริมาณจากหน้าผลิตภัณฑ์ WooCommerce
  9. วิธีซ่อนฟิลด์รหัสคูปอง WooCommerce
  10. วิธีเปลี่ยนชื่อข้อความสถานะคำสั่งซื้อใน WooCommerce
  11. วิธีลบการเรียงลำดับผลิตภัณฑ์เริ่มต้น WooCommerce
  12. วิธีจัดเรียงหมวดหมู่ WooCommerce เพื่อประสบการณ์ผู้ใช้ที่ดีขึ้น
  13. วิธีเพิ่มรูปสินค้าหน้าชำระเงิน WooCommerce
  14. วิธีซ่อนปุ่ม Add to Cart ใน WooCommerce
  15. วิธีซ่อนผลิตภัณฑ์ WooCommerce จากผลการค้นหา
  16. วิธีซ่อนสินค้าทั้งหมดจากหน้าร้านค้าใน WooCommerce
  17. วิธีปิดการใช้งานวิธีการชำระเงินสำหรับหมวดหมู่เฉพาะ
  18. วิธีตรวจสอบว่าปลั๊กอินมีการใช้งานใน WordPress หรือไม่ [ 3 วิธี ]
  19. วิธีใช้คุณสมบัติของผลิตภัณฑ์ WooCommerce ทีละขั้นตอน [คู่มือฉบับสมบูรณ์]
  20. วิธีปรับขนาดรูปภาพผลิตภัณฑ์ WooCommerce
  21. วิธีเพิ่มหมวดหมู่ให้กับผลิตภัณฑ์ WooCommerce
  22. วิธีสร้างหน้าบัญชีของฉันใน WooCommerce
  23. วิธีสร้างประกาศผู้ดูแลระบบ WooCommerce สำหรับปลั๊กอิน – การพัฒนา WooCommerce
  24. วิธีค้นหา ID ผลิตภัณฑ์ของคุณอย่างรวดเร็วใน WooCommerce
  25. วิธีเปลี่ยนข้อความปุ่มชำระเงินใน WooCommerce [สั่งซื้อ]