วิธีเพิ่มฟิลด์ในแบบฟอร์มการลงทะเบียน WooCommerce

เผยแพร่แล้ว: 2021-04-20

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

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

วิธีเพิ่มฟิลด์ แบบฟอร์มลงทะเบียน WooCommerce

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

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

สำหรับสิ่งนี้ ไปที่ WooCommerce > การตั้งค่า > บัญชี และเลือกเปิดใช้งานการลงทะเบียนลูกค้าในหน้า “ บัญชีของฉัน ” ดังที่แสดงด้านล่าง:

เพื่อให้แน่ใจว่าแบบฟอร์มการลงทะเบียน WooCommerce จะแสดงที่ส่วนหน้า

ขั้นตอนในการเพิ่มฟิลด์ในแบบฟอร์มการลงทะเบียน WooCommerce

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

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

ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึงแดชบอร์ดในฐานะผู้ดูแลระบบ
จากเมนู Dashboard ให้คลิกที่ Appearance Menu > Theme Editor Menu เมื่อหน้า Theme Editor เปิดขึ้น ให้มองหาไฟล์ฟังก์ชันของธีมที่เราจะเพิ่มฟังก์ชันที่จะเพิ่มฟิลด์ในแบบฟอร์มการลงทะเบียน
เพิ่มรหัสต่อไปนี้ในไฟล์ functions.php:

 ฟังก์ชัน njengah_extra_register_fields() {?>

       <p class="form-row form-row-wide">

       <label for="reg_billing_phone"><?php _e( 'โทรศัพท์', 'woocommerce' ); ?></label>

       <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" />

       </p>

       <p class="form-row form-row-first">

       <label for="reg_billing_first_name"><?php _e( 'ชื่อ', 'woocommerce' ); ?><span class="required">*</span></label>

       <input type="text" class="input-text" name="billing_first_name" id="reg_billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST[' billing_first_name'] ); ?>" />

       </p>

       <p class="form-row form-row-last">

       <label for="reg_billing_last_name"><?php _e( 'นามสกุล', 'woocommerce' ); ?><span class="required">*</span></label>

       <input type="text" class="input-text" name="billing_last_name" id="reg_billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST[' billing_last_name'] ); ?>" />

       </p>

       <div class="clear"></div>

       <?php

 }

 add_action( 'woocommerce_register_form_start', 'njengah_extra_register_fields' );

นี่คือผลลัพธ์เมื่อคุณรีเฟรชหน้า:

ช่องแบบฟอร์มการลงทะเบียนจะเหมือนกับที่อยู่สำหรับเรียกเก็บเงิน

เราได้รวมคำนำหน้า “billing_” ไว้ข้างหน้าชื่อฟิลด์

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

billing_first_name
billing_last_name
billing_company
billing_address_1
billing_address_2
billing_city
billing_postcode
billing_country
billing_state
billing_email
billing_phone

เมื่อสร้างแบบฟอร์มแล้ว เราจำเป็นต้องตรวจสอบโดยใช้โค้ดต่อไปนี้ที่ควรแทรกลงในไฟล์ functions.php:

 /**

* ลงทะเบียนฟิลด์ตรวจสอบความถูกต้อง

*/

ฟังก์ชัน njengah_validate_extra_register_fields (ชื่อผู้ใช้ $, $อีเมล, $validation_errors) {




      if ( isset( $_POST['billing_first_name'] ) && ว่างเปล่า( $_POST['billing_first_name'] ) ) {




             $validation_errors->add( 'billing_first_name_error', __( '<strong>Error</strong>: First name is required!', 'woocommerce' ) );

      }

      if ( isset( $_POST['billing_last_name'] ) && ว่างเปล่า( $_POST['billing_last_name'] ) ) {




             $validation_errors->add( 'billing_last_name_error', __( '<strong>Error</strong>: Last name is required!.', 'woocommerce' ) );




      }

         ส่งคืน $ validation_errors;

}




add_action( 'woocommerce_register_post', 'njengah_validate_extra_register_fields', 10, 3 );

ขั้นตอนสุดท้ายคือการบันทึกค่าเหล่านี้ลงในฐานข้อมูลโดยเพิ่มโค้ดต่อไปนี้ในไฟล์ fucntions.php:

 /**

* รหัสด้านล่างบันทึกฟิลด์พิเศษ

*/

ฟังก์ชัน njengah_save_extra_register_fields ($customer_id) {

    if ( isset( $_POST['billing_phone'] ) ) {

                 // ไฟล์อินพุตโทรศัพท์ที่ใช้ใน WooCommerce

                 update_user_meta( $customer_id, 'billing_phone',ฆ่าเชื้อ_text_field( $_POST['billing_phone'] ) );

          }

      if ( isset( $_POST['billing_first_name'] ) ) {

             // ฟิลด์ชื่อซึ่งเป็นค่าเริ่มต้น

             update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );

             // ฟิลด์ชื่อที่ใช้ใน WooCommerce

             update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );

      }

      if ( isset( $_POST['billing_last_name'] ) ) {

             // ฟิลด์นามสกุลซึ่งเป็นค่าเริ่มต้น

             update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );

             // ฟิลด์นามสกุลที่ใช้ใน WooCommerce

             update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );

      }




}

add_action( 'woocommerce_created_customer', 'njengah_save_extra_register_fields' );

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

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

บทสรุป

ในโพสต์นี้ คุณได้เรียนรู้วิธีเพิ่มฟิลด์ในแบบฟอร์มการลงทะเบียน WooCommerce แล้ว

หากคุณประสบปัญหาใดๆ ในการติดตั้งโค้ดนี้ โปรดติดต่อนักพัฒนา WordPress ที่มีคุณสมบัติ

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

วิธีแก้ไขรายละเอียดการเรียกเก็บเงิน หน้าชำระเงิน WooCommerce
การเปลี่ยนเส้นทาง WooCommerce หลังจากชำระเงิน : เปลี่ยนเส้นทางไปยังหน้าขอบคุณแบบกำหนดเอง
WooCommerce Redirect หลังจากออกจากระบบ [สุดยอดคู่มือ]
วิธีเพิ่มการค้นหาไปยังหน้าร้านค้าใน WooCommerce
วิธีเปลี่ยนข้อความแสดงข้อผิดพลาดของ WooCommerce Checkout
วิธีเพิ่มฟิลด์วันที่เพื่อชำระเงินใน WooCommerce
วิธีเพิ่มการตรวจสอบยืนยันหมายเลขโทรศัพท์สำหรับชำระเงิน WooCommerce
30 ปลั๊กอินดาวน์โหลดที่ดีที่สุดสำหรับการแชร์ไฟล์ WordPress & More
35+ สุดยอดปลั๊กอินฟรีฟอร์ม WordPress
วิธีการเปลี่ยนสัญลักษณ์สกุลเงินใน WooCommerce
วิธีตั้งค่าราคาสินค้า WooCommerce ต่อกิโลกรัม
วิธีย้ายช่องชำระเงิน WooCommerce
วิธีตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้ WordPress
วิธีจัดสไตล์หน้าชำระเงิน WooCommerce
วิธีลบคูปองออกจากการชำระเงินใน WooCommerce
วิธีเพิ่มสกุลเงินใน WooCommerce [สกุลเงินที่กำหนดเอง]
วิธีสร้างช่องทำเครื่องหมายในหน้าชำระเงินของ WooCommerce
วิธีรับ URL ชำระเงินใน WooCommerce
คู่มือการเพิ่มประสิทธิภาพการชำระเงินผ่านมือถือ WooCommerce