The registration form of any ecommerce store is an essential aspect which used to collect data of the customers. With the help of collected data, you can organize and group your registered customers according to your need and requirements. See now how to add WooCommerce custom fields on it.

WooCommerce is one of the popular platforms in the e-commerce world. It consists of a variety of valuable and great features that are helpful for store owners and in the same way it offers you the option to set WooCommerce registration form. By default, it has two fields, Email, and Password. However, sometimes you have to add your custom fields to it which can also be done.

So, today in this tutorial, I will teach you how to add custom fields in WooCommerce Registration Form.

Add WooCommerce Custom Fields in Registration Form

How to Add WooCommerce Custom Fields in Registration Form
How to Add WooCommerce Custom Fields in Registration Form

 

To achieve it, you need to follow these steps:

  • Enable WooCommerce Registration Form
  • Add Custom Field in WooCommerce Registration Form
  • Add Custom Fields to the Frontend
  • Add Validations to Custom Fields
  • Save the Data of Custom Fields to Database

Enable WooCommerce Registration Form

Open your WordPress admin panel and navigate to WooCommerce → Settings from the left side of the dashboard:

Now here first click on Account & Privacy tab and then select checkbox Allow customers to create an account on the “My Account” page:

Then just click on Save Changes from the bottom of this page:

Go to the account page and you will see the default WooCommerce registration form:

Add WooCommerce Custom Fields in Registration Form

Navigate to Appearance → Editor from the left side of your dashboard:

At the right side you will see Theme Files section, here click on functions.php to open this file:

Now you will see the editor for your functions.php file:

From here you will add the custom fields in WooCommerce Registration Form.

Add Custom Fields to the Frontend

First, add your custom fields to the frontend of your WooCommerce Registration Form. To do it, add this code at the end of functions.php:

function woocom_extra_register_fields() {?>

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

<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-wide”>

<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>

<?php

}

add_action( ‘woocommerce_register_form_start’, ‘woocom_extra_register_fields’ );

In the above code, I have created function woocom_extra_register_fields() in which I have added the fields (First Name and Last Name) which will show in the frontend. You can add more fields according to your need. I have also added the prefix “billing_” before the name of each custom fields in order to relate it with the billing address. Here is a list of all the valid fields which you can add to your WooCommerce registration form and they can be associated with billing address:

  • billing_first_name
  • billing_last_name
  • billing_address_1
  • billing_address_2
  • billing_phone
  • billing_company
  • billing_city
  • billing_postcode
  • billing_country
  • billing_state
  • billing_email

Now to verify that the fields are properly added to your WooCommerce Registration Form, go to your store account page and here you will see them:

Add Validations to Custom Fields

As your WooCommerce Registration Form fields are added, now to add validation to these fields add this code after the end of the previous function:

function woocom_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’, __(‘First Name is required!’, ‘woocommerce’));

}

if (isset($_POST[‘billing_last_name’]) && empty($_POST[‘billing_last_name’]) ) {

$validation_errors->add(‘billing_last_name_error’, __(‘Last Name is required!’, ‘woocommerce’));

}

return $validation_errors;

}

add_action(‘woocommerce_register_post’, ‘woocom_validate_extra_register_fields’, 10, 3);

In the above code. I have created function woocom_validate_extra_register_fields( $username, $email, $validation_errors ) in which I have set validation that if the created custom fields are empty then show the message. I have set this message:

  • First name field, First Name is required!
  • Last name field, the Last Name is required!

Save the Data of Custom Fields to Database

How to Add WooCommerce Custom Fields in Registration Form
How to Add WooCommerce Custom Fields in Registration Form

 

Now to save the data of these custom fields you have to add it to the database. For that, add this code after the end of the previous function:

function woocom_save_extra_register_fields($customer_id) {

 

if (isset($_POST[‘billing_first_name’])) {

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, ‘billing_last_name’, sanitize_text_field($_POST[‘billing_last_name’]));

}

}

add_action(‘woocommerce_created_customer’, ‘woocom_save_extra_register_fields’);

In the above code. I have created function woocom_save_extra_register_fields($customer_id)  which will save the data of the custom fields in the database.

All done, just click on Update File from the bottom of the Editor:

It’s time to verify that whether the data of the custom fields are getting saved in the database? To check it, register the account and then go to your billing address. Here you will see that the first name and last name is added automatically to the billing address:

It means that custom fields are successfully added to your WooCommerce Registration Form.

Conclusion

Now with the help of this guide, you can now easily add custom fields to your WooCommerce registration form. Don’t forget to leave your feedback or if you have any query, feel free to drop it!

Author

WP Blog is dedicated to getting you up and running in the field of Wp blog wizardry – No Wands Involved!



Share This Post