How to create WooCommerce customer registration with custom fields

Registered users are very important to any store. Once a user creates an account you get to know them a lot better, and their future purchases are made easier. But the registration process itself can be improved besides the default registration page, by adding custom fields or even a whole new registration form. Today we are going to see how you can create WooCommerce custom registration forms and add custom user fields to it.

There are many ways to collect and use custom fields to provide your users a better shopping experience. But usually the best place to add these custom fields is in the registration form. In this way your users already fill in all the data you need from them at once and don’t need to update their profiles afterwards.

In fact, creating or editing a registration form for WooCommerce can be a daunting task. There are a lot of details to cover, from something as simple as which fields to add, to complex matters such as security. That’s why we usually need to use plugins for this kind of task.

On the other hand, during our research we couldn’t find any good free options to extend WooCommerce’s registration page. We found a few freemium options but none seemed to be good enough for most users. So today we are going to look into the other options that we have left.

From here on, 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 from a profile page
  • Adding the custom fields to the WordPress registration form
  • Reading and filtering the custom user data

Now let’s get started!

woocommerce custom fields registration

Adding custom fields to the WooCommerce checkout form

When it comes to WordPress and WooCoomerce, 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
  • 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.

Setup the fields

The following function registers the custom fields:

Overall, this function returns our desired 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 fields on the WooCommerce checkout page

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

This is needed so our users can interact with our newly created form fields. This code could be expanded to accommodate multiple sub-sections. The real magic 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 fields are not completed correctly

Now let’s make sure that we show an error message when the fields are empty:

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 my_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 edit 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.

Advanced Custom Fields Plugin

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

There are also other premium options that can edit the WooCommerce registration form itself, such as Ultimate Member’s WooCommerce integration. So there are different products depending on where exactly you want to collect your user data.

 

Reading and filtering the custom user data

After saving all these great custom fields you may need to read and manipulate them. 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

 

Now it’s time to get creative! You can explore your custom fields from functions as simple as checking if the user has filled that field to complex manipulation to analyze the lifetime value for each of your customer segments:

Filter WooCommerce customers by custom fields

 

Conclusion

Today we explored a few different meothds 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.

We hope you enjoyed it, and see you next time!