How To Add Custom Registration Form Fields In WooCommerce

Mega Monsoon Days Sale

Limited-time deal: Up to 70% off Hurry before it ends!
Save Now

Days

Hrs

Min

Sec

Product successfully added to your shopping cart.

How to Add Custom Registration Form Fields in WooCommerce

Table of Contents

Step 1: Enable the Customer Registration Option
The first step is to enable the WooCommerce registration forms on the account login page.

Go to WooCommerce → Settings → Accounts
Check to Enable Customer Registration on the “My Account” page

Step 2: Add Custom Code in Functions.php File
add the following lines of code toward the end of your functions.php file, 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' );

List of WooCommerce Form Fields

  1. billing_first_name
  • 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

Step 3: Validate Registration Form Fields
To validate these structure fields, include the accompanying lines of code toward the end of your functions.php file, which is located in the theme folder.

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', __( 'Error: First name is required!', 'woocommerce' ) );
      }
      if ( isset( $_POST['billing_last_name'] ) && empty( $_POST['billing_last_name'] ) ) {
          $validation_errors->add( 'billing_last_name_error', __( 'Error: Last name is required!.', 'woocommerce' ) );
      }
      return $validation_errors;
}
add_action( 'woocommerce_register_post', 'wooc_validate_extra_register_fields', 10, 3 );

Step 4: Save the Values into the Database
To insert values in the database, add the following function in your theme’s functions.php file.

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' );