How To Add WooCommerce Registration Form Fields

In this tutorial, we’ll figure out how to add fields to user registration form in WooCommerce.
First of all, enable the registration form backend WooCommerce settings.


After enabling this option, you can see the registration form at the frontend.
As should be obvious, it is a pretty modest form. However, we can add more fields to this structure by utilizing the following actions. Presently, to include extra fields like first name, last name and phone number, and so on, include the following lines of code toward the end of your functions.php, which is located in your theme folder.

function wooc_extra_register_fields() {?>
       <p class="form-row form-row-wide">
       <label for="reg_billing_phone"><?php _e( 'Phone', '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( 'First name', '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( 'Last name', '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', 'wooc_extra_register_fields' );

Now if you refresh the page, you’ll see the fields being added to WooCommerce registration form.

To relate these registration form fields with the billing address, you have to include the prefix “billing_” before the field name. The following is a list of all the valid form fields that can be added to registration form and can be associated with billing address.

+ 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

Now we also need to validate these newly added form fields. To validate these structure fields, include the accompanying lines of code toward the end of your functions.php file which located in theme folder.

/**

* register fields Validating.

*/

function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) {

      if ( isset( $_POST['billing_first_name'] ) && empty( $_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'] ) && empty( $_POST['billing_last_name'] ) ) {

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

      }
         return $validation_errors;
}

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

On the off chance that you like into the code of this function you’ll make sense of that it is simply checking $_POST array for form values and including an error message if value is not present or in valid data.

Along these lines, you can likewise include various validation rules and you also add validation rules to different fields as well. You can see one of our custom validation rules being applied:

At long last, we need to save these values to database.

To insert values in database add the following function in your theme’s functions.php file:

/**
* Below code save extra fields.
*/
function wooc_save_extra_register_fields( $customer_id ) {
    if ( isset( $_POST['billing_phone'] ) ) {
                 // Phone input filed which is used in WooCommerce
                 update_user_meta( $customer_id, 'billing_phone', sanitize_text_field( $_POST['billing_phone'] ) );
          }
      if ( isset( $_POST['billing_first_name'] ) ) {
             //First name field which is by default
             update_user_meta( $customer_id, 'first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
             // First name field which is used in WooCommerce
             update_user_meta( $customer_id, 'billing_first_name', sanitize_text_field( $_POST['billing_first_name'] ) );
      }
      if ( isset( $_POST['billing_last_name'] ) ) {
             // Last name field which is by default
             update_user_meta( $customer_id, 'last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
             // Last name field which is used in WooCommerce
             update_user_meta( $customer_id, 'billing_last_name', sanitize_text_field( $_POST['billing_last_name'] ) );
      }

}
add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );

And we are done here! Now the recently added fields have been added, validated, and inserted for future use.
On the billing address page in your account, you need to click on edit to go there. You can see the values from registration form already being populated.

Conclusion

This tutorial allows the users to add extra from fields in registration page which is My Account page of WooCommerce. So, now you can add more fields other than firstname, lastname and contact fields. You may also make them mandatory fields.

I hope you found the article helpful.

Thank you Owais Alam !