Woocommerce registration form: How to set up + add custom fields

If you want to collect the customers’ data, then having a registration form is essential for your eCommerce website. Specifically, with the help of the collected data, you can organize and group your registered customers according to your needs and requirements. As a result, this will help you upsell to customers, creating custom forms for individual user groups, reordering fields in your forms. All in all, you can make them more user-friendly. What’s more, WooCommerce is one of the popular platforms in the e-commerce world. This is because it consists of a variety of valuable and great features that are helpful for store owners. Also, it is a good idea to make customers register on your WooCommerce site before they purchase. So now, we – ArrowHiTech would like to introduce to you guys the basic knowledge on how to set up and add custom fields to your WooCommerce registration form.

Let’s get into it

How to set up your own WooCommerce registration form?

The WooCommerce plugin allows you to add a registration form on the Website. But, this form only asks you to enter your email address for the registration. So, all the billing and shipping details of the customers are entered only after they want to purchase the products.

Adding a registration form to your WooCommerce stores
Adding a registration form to your WooCommerce stores

Consequently, to set up this form, you need to do these things:

Step 1: Install the User Registration Plugin

woocommerce registration form
User Registration plugin integration

Firstly, you need to install the User Registration Plugin. In order to do this, go to your WordPress dashboard and click on Plugins -> Add New. Then, search for the User Registration plugin and click on the Install Now button. After it installs, don’t forget to activate the plugin. 

Step 2: Install the WooCommerce Integration Add-on

Now, you need to get the premium User Registration WooCommerce Add-on. Go to User Registration->Extensions. Here, you can see all the Add-ons offered by the User Registration plugin. Click on your preferred extension, and you’ll be taken to the Add-on overview page on the official site. Then, click on the View Pricing button there to visit the Plans and Pricing page for more details.

Step 3: Creating a WooCommerce registration form

Once the add-on is downloaded and installed on the site, we can move on to creating the custom WooCommerce registration form. However, you should make sure all the plugins: WooCommerce, User Registration, and WooCommerce Integration are activated first. 

Registration form creating in WooCommerce
Registration form creating in WooCommerce

Then, go to User Registration -> Add New, and you’ll be taken to the easy drag-and-drop form builder. Creating this form is super easy with this user-friendly interface. If you scroll down then, you can find the WooCommerce Form Fields for Billing, and Shipping information is added to the form builder. After you finish the form, don’t forget to save it.

Step 4: Displaying the registration form

So now, you can move on to displaying the registration form on your site. That is to say, you can add this WooCommerce form on any WordPress page or post. You can either use the shortcode provided for each form or use the User Registration Gutenberg block to easily add the form. Subsequently, after you’ve published the WooCommerce registration form, your customers can register a new account on your eCommerce website. 

How to add custom fields to your WooCommerce registration form?

By default, the WooCommerce registration form contains the only field which, to clarify, is an email address field. However, what if we need to add something else there? All you have to do is by following this instruction:

  • Navigate to Appearance → Editor from the left side of your dashboard:
  • On the right side you will see the Theme Files section, then click on functions.php to open this file.
  • Now you will see the editor for your functions.php file:
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' );

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

#1. Add Custom Fields to the Frontend

Firstly, add your custom fields to the frontend of your WooCommerce Registration Form. In order to 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_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', 'woocom_extra_register_fields' );

In the above code, the function woocom_extra_register_fields() is created and from that, we can add the fields (First Name and Last Name) which will show in the frontend. So, you can add more fields to your registration form. The prefix “billing_” before the name of each custom field must appear in order to relate it with the billing address. Here is a list of all the valid fields which you can add to your form and they can also 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

Then, 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.

#2. Add Validations to Custom Fields

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

/** 
*
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 );

In the above code, the function woocom_validate_extra_register_fields( $username, $email, $validation_errors ) is created and set validation that if the created custom fields of registration form are empty then show the message. 

3. Save the custom fields to your registration form

Now, in order to save the data of these custom fields, you have to add it to the database. As a result, you should 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, the function woocom_save_extra_register_fields($customer_id) must appear, which should certainly save the data of the custom fields in the registration form. Also, you can just click on Update File from the bottom of the Editor. After that, it’s time to verify 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. Then you’re all set!

Final words

To sum up, this article above is all the basic knowledge you may need for setting up and adding custom fields to your WooCommerce registration form. In fact, as you can see creating registration forms plays a significantly important role with any e-commerce site. And also, with the registration WooCommerce Add-on, you can integrate WooCommerce fields to add the custom fields on your registration form. Moreover, if you have any questions about this topic, let’s CONTACT US right now!

Tags

Share