Easily Add Custom Fields to WooCommerce Registration Form

The registration form of any ecommerce store is an essential component that collects valuable customer data. As the data accumulates, store owners can organize and group the data to gain actionable insights that add to your revenues.
Since WooCommerce is among the top three ecommerce platforms in the world today, it follows that the default WooCommerce registration should be a great asset for the store owners. Surprisingly, the default form has only two fields, Email and Password. As you can judge for yourself, this is a lost opportunity for collecting user information. Fortunately, you can easily add custom fields to WooCommerce registration form to remedy the situation.
Today in this tutorial, I will teach you how to add custom fields in WooCommerce registration form.

Add Custom Fields in WooCommerce Registration Form

Follow these steps:

  • Enable WooCommerce Registration Form
  • Add Custom Field(s) 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 WordPress Admin Panel and navigate to WooCommerce → Settings in the left-side menu:

enable-woocommerce-reg-form
Next, first click the Account & Privacy tab, and then then check the checkbox labelled Allow customers to create an account on the “My account” page in the Account creation section:

accounts-and-privacy
Next, click Save Changes found at the bottom of this page:

sav-changes

Add Custom Field(s) to the WooCommerce Registration Form

Navigate to Appearance → Editor from the left-side menu:

apperance-editor
In the Theme Files section, click functions.php to open this file:

theme-files
The functions.php file will open up in an editor:

edit-themes
Here you can add the custom fields for the WooCommerce registration form.

Add Custom Field(s) to the Website Frontend

First, add the following code for the custom fields to the frontend of your WooCommerce registration form. Remember to add this code block at the end of the functions.php file:

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 a function function woocom_extra_register_fields() in which I have added the fields (First Name and Last Name) that will be visible on the frontend. You can add more fields by adding the code for the fields.
Note that I have also added the prefix ‘billing_‘ before the name of each custom fields in order to link it to the billing address.
Here is a list of all the valid fields you can add to WooCommerce registration form, and associate them with the 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

Next, I will verify that the custom fields are added and properly visible in the WooCommerce registration form. For this, go to your store account page, and you will see them on the page:

form
Add Validation to Custom Fields

Adding validation to the fields is a best development practice that ensures that the data collected through the form is uncontaminated and can be used for determining the policies of the store.
To add validation for the custom fields, add the following code block at the end of the previous function, function woocom_extra_register_fields():

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 a function function woocom_validate_extra_register_fields( $username, $email, $validation_errors) in which I have set validation rules that print out the following error messages if the custom fields are left empty:

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

Save the Data of Custom Fields to Database

Now to save the data of the custom fields, you should add it to the database. For that, add the following code block after is code after the end of the function woocom_validate_extra_register_fields() 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 the function woocom_save_extra_register_fields($customer_id)  which will save the data of the custom fields into the database.

At this point, all the work is done, and all I need to do is to click the ‘Update File‘ button at the from the bottom of the Editor.
update
The final step is to verify if everything is working as intended and the data from the custom fields is being saved to the database. For this, register an 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:

billing-address

Conclusion

Now with the help of this guide, you can 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!

About the Author

Moeez is ‘The’ blogger in charge of WPblog . He loves to interact and learn about WordPress with people in the WordPress community. Outside of his work life, Moeez spends time hanging out with his friends, playing Xbox and watching football on the weekends. You can get in touch with him at moeez[at]wpblog.com.

Leave a Reply

Your email address will not be published. Required fields are marked *