How to add custom fields to the WooCommerce customer registration form

WooCommerce has registration form out of the box, but the registration process itself can be improved by adding additional custom fields or even creating a completely new registration form. In this tutorial we are going to see how you can edit the default WooCommerce registration form to add some additional custom fields with just a few lines of code by using WooCommerce actions and filters.

Having registered users can be very important to any online store. Once a user creates an account you get to know them a lot better, and their future purchases are made a lot easier. There are two main approaches when it comes to modifying the WooCommerce registration form, the first and the more common one is to use a user registration plugin that should provide all the necessary options to create and modify your user registration forms. The other way, and the one we are going to explore in this tutorial is to modify and extend the existing WooCommerce user registration form by adding additional custom fields to it. Actually, we’re going to see two very different routes to achieve our WooCommerce custom fields registration from. The first method is by using a code snippet to actually modify the WooCommerce checkout form. Then we’ll show you how you can create a custom profile page to allow updating these fields. You’ll also learn how to add these fields to the WordPress registration form for the users that register before purchasing a product.

Here are the main topics for today:

  • Adding custom fields to the WooCommerce checkout form
  • Updating the custom fields data from the profile page
  • Adding the custom fields to the WordPress registration form
  • Reading and filtering the custom fields data

Now let’s get started!

woocommerce custom fields registration

Adding custom fields to the WooCommerce checkout form

When it comes to WordPress and WooCommerce, almost anything can be done with custom code. And that’s the case for our registration fields as well. It’s possible to actually edit WooCommerce’s registration form when users are in the checkout process.

We’ll need to use some of the WooCommerce hooks to edit the WooCommerce register form and checkout forms. Luckily their code is very well commented so this isn’t so hard as it seems. Here are the main elements of our customization:

  • Setup the fields – so it’s very easy for anyone to add or remove fields as they are needed
  • Displaying the fields on the WooCommerce checkout page
  • Validation – Showing an error message when the fields are not completed correctly
  • Saving the fields data – sanitize and save the custom fields

We recommend adding this code to a child theme’s functions.php file or creating a custom helper plugin. Let’s take a look at each part of it.

Creating the custom fields for our form

The following function registers the custom fields:

Overall, this function returns our desired custom WooCommerce fields, along with their attributes. Once we do our code in this way, it’s even possible to get these fields from another plugin such as ACF or even from a custom options page, if you want that to be customizable for your users.

Displaying the custom fields on the WooCommerce checkout page

After we have registered the custom fields, we’ll need to setup the data and create the HTML code. :

This is needed so that our customers can interact with our newly created WooCommerce registration form fields. This code could be expanded to accommodate multiple sub-sections. The real work here is done by the woocommerce_form_field()  function, which creates the HTML needed for a field based on certain attributes.

You should now see the new WooCommerce customer fields displayed on the checkout page:

New WooCommerce custom fields in effect

 

Showing an error message when the form fields are not completed correctly

Now we need to validate the field’s data when the checkout form is posted. For this example the field is required and not optional, so let’s make sure that we show an error message when the fields are empty:

For this we’ll hook into the woocommerce_checkout_process . Use this code only if your custom fields are required. If some of the fields are required and others are optional, you can add a "required"=>true  attribute for the required fields in the woo_custom_fields_setup()  function and call the wc_add_notice()  function only when this attribute is present and set to true.

Saving the fields data

The last part is saving the data:

This code will get the values for each field, and then will sanitize and save them as user meta. Once the code reaches this part, our custom user data is safe in our database.

You just need to replace our demo data (job title and company size) with your own. Lastly, don’t forget to keep the exact same array key names (key, label, placeholder, error). You can copy and paste the second bit if you need to more fields.

 

Updating the custom fields from a profile page

Once you have added the custom fields to your checkout form, you might also want to provide your users an option to update their custom fields data at a later point. This can be accomplished by creating a custom WooCommerce profile page, where your users can update their custom fields, as well as their general details (like name, billing address, etc.)

You can easily accomplish this by using the Advanced Custom Fields (ACF) plugin. We already have a guide on this entire process – if you are interested, check out the article on Creating custom user profile pages with ACF. The article includes detailed instructions, so here we’ll only share the WooCommerce specifics that you need to know.

Once you have ACF installed and active, you can create a new field group to contain the form for the profile edit page. Just create a field group and make sure to set its rules to be visible to all users. Then add the default fields and your custom fields. In our example, we’ve recorded the company size and job title, but you can add as many fields as you want.

User fields group

Don’t forget to add the default WooCommerce fields as well (with their default keys), here they are:

  • Billing
    • 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
  • Shipping
    • shipping_first_name
    • shipping_last_name
    • shipping_company
    • shipping_address_1
    • shipping_address_2
    • shipping_city
    • shipping_postcode
    • shipping_country
    • shipping_state

Once these fields are created, just follow the instructions from our ACF profile page article to create the [my_acf_user_form]  shortcode to load them in a page. So, whenever you need to load a profile edit page you can just paste that text in the page’s content.

And that’s it. You are ready to create a new menu item for the profile edit page with the custom fields as well as WooCommerce’s default fields.

 

Adding the custom fields to the WordPress registration form

If you have a site where some of the users register before making a purchase, you might also want to add your custom fields to the default WordPress registration form. In this way, you will also have these fields pre-filled once these users go to the checkout page. We have another detailed guide on how to use ACF for user registration and segmentation, that you can check out for detailed instructions.

Overall the process of adding the fields is the same as above, just create a new fields group, and add them to all users. Once you do that the WordPress registration page is going to include these fields:

Register with custom fields

 

Reading and filtering the custom user data

After saving all these great custom fields you may need to read and filter their data. We’ll see how you can use the Users Insights Custom Fields feature to do that.

You’ll first need to map your custom fields to tell Users Insights that there’s new data you want to read. In order to do that you can go to Users Insights > Custom Fields and add as many custom fields as you have, using the same keys that you used in the snippet above. The Name of the field can be anything you want.

Mapping custom fields

 

You can explore your custom fields from functions as simple as checking if the user has filled that field to complex filter combinations to analyze the lifetime value for each of your customer segments:

Filter WooCommerce customers by custom fields

 

Conclusion

Today we explored a few different methods that you can use to create WooCommerce custom fields registration forms. We learned how you can collect the custom user fields in a custom profile page, the WordPress’ default registration page or the WooCommerce’s checkout page.