How To Customize WooCommerce Registration Form (2020 Ultimate Guide)

WooCommerce Registration Form Cozmoslabs

Customizing the WooCommerce registration form in WordPress is something you should consider doing if you want to get more from your WooCommerce store and from the customer registration process.

The WooCommerce plugin comes with a registration form built-in, which collects basic information about your new users. But if you customize it using the Profile Builder Pro plugin, you can collect the exact information you need and make the registration process a better experience for your customers.

The plugin is a form builder that uses shortcodes to add custom registration forms to your WordPress site. You can use it for user login forms and registration forms on membership sites, but also for e-commerce sites using WooCommerce. With WooCommerce it makes it even easier – it taps into WooCommerce’s own API to add custom forms that you create.

Benefits of customizing the WooCommerce registration form include capturing user data that helps you upsell to customers, creating custom forms for individual user groups, reordering fields in your forms to make them more user-friendly, and redirect users to a custom page after registration – and lots more.

There are plenty of ways you can improve the WooCommerce registration and profile forms, but in this post, we’re going to look at some specific examples you’re likely to find the most useful.

These are:

  •   Adding custom fields to the WooCommerce registration form so you can collect additional information about your customers.
  •   Enabling avatar upload so your user’s profiles become more personal to them.
  •   Adding a reCAPTCHA to keep out spammers.
  •   Using conditional logic so that fields are only displayed if they’re needed. This way, you don’t force people to fill out fields that aren’t relevant.

While the inbuilt WooCommerce registration form allows you to make some customizations, you have much more flexibility with the Profile Builder Pro WordPress registration plugin.

So let’s take a look at how it works.

How Profile Builder Pro Can Improve Your WooCommerce Registration and Profile Forms

The Profile Builder Pro form builder plugin gives you endless flexibility when it comes to customizing your WordPress registration forms, including WooCommerce forms. In this tutorial, I’ll show you how to remove some unnecessary fields and add some useful fields to two forms: the registration form and the profile editing form.

Here’s an example of the default WooCommerce registration form.

default WooCommerce registration form

And here’s a custom registration form enhanced using the Profile Builder Pro plugin.

new registration form

 

You can also create enhanced customer profile forms. The default profile form includes fields that aren’t needed for a store, as well as leaving out some fields that would be quite helpful.

default WooCommerce edit profile form

But with the Profile Builder plugin, you can customize this and add extra fields that will help you communicate better and sell more to your customers. Here’s the form with customization:

account details screen

There’s a free version of the plugin plus a premium version with more features, so you can choose the one that’s right for you and your store. You can also use a wide variety of free and advanced add-ons to get access to extra functionality and integrations with other services or plugins.

So let’s take a look at how you can use Profile Builder to customize your WooCommerce registration form.

Installing and Configuring Profile Builder Pro and the WooCommerce Add-on

To customize your WooCommerce registration form, you’ll first need to have the free WooCommerce plugin installed, activated and configured on your site.

Once you’ve done that, it’s time to install and configure the Profile Builder Pro plugin and the  WooCommerce Sync add-on.

Follow these steps for each of those two plugins to install and activate them, starting with the Profile Builder Pro plugin.

When you purchase Profile Builder Pro, you’ll be sent a download link. Use this to download the plugin as a zip file and save it to your computer.

Go to Plugins > Add New and click the Upload Plugin button.

upload plugin screen

Upload the zip file you just downloaded and click the Install Now button. You’ll be prompted to activate the plugin – click the Activate Plugin button to do this.

Once you’ve installed the plugin in WordPress, you’ll need to register it. If you aren’t automatically taken to the registration page, go to Profile Builder > Register Version.

Profile Builder registration page

Find your license key in the email you were sent to confirm your purchase or by logging in to your account. Paste that into the Serial Number field and click the Save Changes button.

Now repeat the installation process for the WooCommerce sync add-on.

You’re ready to start customizing your WooCommerce registration pages.

Configuring Profile Builder Pro to Create Custom WooCommerce Registration Forms

WooCommerce has two types of forms you can customize using Profile Builder Pro:

  •   Registration forms
  •   Edit user profile forms

Before you can start adding those forms to your pages in WooCommerce, you need to configure the plugin to create custom forms you can use with WooCommerce.

In the WordPress admin, go to Profile Builder > Modules. Select Active for Multiple Registration Forms and Multiple Edit-Profile Forms.

Profile Builder Pro Modules

Click the Save Changes button. You’ll see that more options are added to the Profile Builder admin menu, which you can use to create your custom forms.

Creating Registration and Profile Forms with Profile Builder

The next step is to create the two forms we’ll be adding to the WooCommerce pages. Start with the user registration form.

The default WooCommerce registration form looks like this:

default WooCommerce registration form

It’s pretty sparse, with only an email field.

There is a case for keeping any form on your WordPress site as lean as possible: every field you add reduces the number of people filling it out. But on an e-commerce site, you may well want to collect more information about your customers, such as their name and what they’re interested in buying from you.

Let’s create a form that includes four fields:

  •   Name
  •   Email address
  •   Interests (from a selection)
  •   ReCaptcha

You’ll create a form with these options and then tell Profile Builder Pro to display it on the WooCommerce registration page.

Creating a New Registration Form

To create a new form, open up the WordPress admin and go to Profile Builder Pro > Registration Forms > Add New

Add new registration form

Give it a name and then select the user role a person will have after completing it – Customer is good. Select whether you want the user to be automatically logged in or not and whether you want to redirect them to a special page. If you do, you’ll need to create a thank you page – or you could redirect them to the ‘My Account’ page. You’ll learn how to do this in more detail shortly.

The form will by default include the list of fields that you can see in the next section of the screen. This is a lot of fields, so if you want to remove any, you can do so by clicking the Delete link next to each.

As we’re creating a very simple form here with just three fields, go ahead and delete every field except for these:

  •   Username ( Default – Username ) ( you can’t delete this one as it’s essential to create  a user account)
  •   First Name ( Default – First Name )
  •   Last Name ( Default – Last Name )
  •   E-mail ( Default – Email )
  •   Password ( Default – Password ) (you can’t delete this either)
  •   Repeat Password ( Default – Repeat Password )

Your screen will now look something like this:

Registration form builder with less fields

Click the Publish button at the top right to save your changes.

Creating New Fields – Select Box and reCAPTCHA

So far, we don’t have our interests field or our reCAPTCHA. Let’s create them using the form fields option.

Go to Profile Builder > Form Fields.

form fields screen

First, the Interests field. Click into the Select an option field at the top and select the Select (Multiple) option. The screen will change to show the settings for a multiple select box.

Give your field a title and fill out other fields as follows:

  •   Meta-name: ‘interests’
  •   Description: type in a description such as ‘Select the products you’d like to know more about.’
  •   Options: Type in the options for your store, separated by commas. For example in a clothing store, you might type ‘clothes, shoes, accessories’.
  •   Labels: the labels for the options that the user will see, again separated by commas. So the above would be ‘Women’s clothing, Shoes, Accessories’.
  •   Default option: type in one of your options which will be checked by default, if you want.
  •   Required: select whether this field is required.
  •   Overwrite existing: select No.
  •   Display on WooCommerce Checkout: Select Yes if you want to collect this data from customers when they check out.

 Click the Add Field button to save it.

Creating the select box field

Now let’s create the ReCaptcha field. Still on the same screen, click the Select an option field and select reCAPTCHA in the Advanced column.

select the reCAPTCHA option

Give it a name and then in the ReCAPTCHA type select box, choose whether you want to use reCAPTCHA type 2 or invisible reCAPTCHA. The invisible version is less intrusive for visitors but version 2 might give them some peace of mind: it’s up to you.

Click the link under the Site Key field to be taken to the Google reCAPTCHA settings where you will need to set up a key for using reCAPTCHA.

google reCAPTCHA console

Click the Admin console button and then click the plus sign at the top right to add a new reCAPTCHA. If you don’t see this, you may need to set up a Google account – see the documentation on reCAPTCHA fields for more information.

Complete the form to create your key and click the Submit button.

creating a reCAPTCHA key

You’ll be taken to a screen with two keys: your site key and your secret key. Copy them into the relevant fields back in the screen for creating your field with the plugin and click the Add Field button.

Adding Your New Fields to the Form

Now go back to your registration form in WordPress. Go to Profile Builder > Registration Forms and select your form.

In the Add New Field to the List section, click on the Field dropdown box and select the Interests field (or whatever you called your new field). Click the Add Field button.

It will now be added to your form. Don’t forget to click the Update button to save the changes you’ve made.

Repeat that for the reCAPTCHA field, putting that field at the end.

Registration form with all fields included

Adding a Redirect to the Form

After people have registered for the site, let’s redirect them to a thank you page. I’m going to send them to a simple page with a thank you message, but you might want to send them to a more detailed page with a message and information about things they might like to buy.

Let’s get it set up.

Start by creating your page. In the WordPress admin, go to Pages > Add New. Create your new page and click the Publish button to publish it.

thank you page

Make a note of the page’s URL – you’ll need that later.

Now go to Profile Builder > Registration Forms and click on your form. In the Redirect dropdown box, select Yes.

A URL field will appear. Copy the URL of your new page into it.

redirect setup

Finally, click the Update button to save your changes.

Now it’s time to create another form – the edit profile form.

Creating a New Edit Profile Form

You can also edit the form that your users access to edit their WooCommerce user account. Go to Profile Builder > Edit-profile Forms. Click the Add New button.

You’ll see a very similar screen to the one you used to create the custom WooCommerce user registration form.

Creating the Form

The default edit profile form in WooCommerce has just a few fields again: name, display name, password, and email address.

default WooCommerce edit profile form

Let’s create a new form with some extra profile fields. This form is going to include:

  •   Name
  •   Username
  •   Email address
  •   Avatar
  •   Interests
  •   Password
  •   Phone number
  •   Billing Address
  •   Shipping Address

You’ll need to start by deleting some fields we don’t need. These are:

  •   Nickname
  •   Website
  •   About yourself
  •   Biographical Info

Now you’ll have 11 fields in total, some of which are just headings and not fields. Click the Publish button to save your form.

creating edit profile form - step 2

Now let’s add two more fields: the Interests dropdown we created already, and new phone number and avatar fields which we’ll need to create.

Creating New Fields for Location, Phone Number and Avatar

Now let’s add the location field. We’ll use this to identify which country people are in.

Go to Profile Builder > Form Fields and click the Select an option field. Click the Select (Country) option.

Fill out the details for this field, giving it a name and ID, adding a description and choosing whether to make it optional (if you select No you’ll get everyone’s country, which is helpful as we’re going to be using this field for conditional logic later on).

creating the location field

Click the Add Field button to add it to the available fields.

Now add a second new field: phone number. Click the Select an option field. Select Phone in the Advanced column.

Now edit the phone number field in the same way you did your new Interests field.

Creating the phone number field

Click the Add Field button.

Repeat the for the avatar field. Click Select an option, then in the Standard column, select Avatar.

Fill out the field title and meta-name and add a description. Leave the Allowed Image Extensions field at the default so it accepts standard image files.

setting up the avatar field

Click the Add Field button to add the avatar field to those you now have available.

Adding Conditional Logic to Fields

When you added the phone number field, you may have noticed that it includes formatting for the phone number which is USA-specific.

But what if your customer is outside the USA and their phone number is in a different format?

You have two options, both using conditional logic:

  •   Create a second phone number field, which will only be displayed to customers outside the USA while the existing field is only displayed to customers in the USA.
  •   Add conditional logic to the existing phone number field so it’s only shown to customers inside the USA.

If your business is in the USA and you won’t be able to call customers elsewhere in the world without significant costs, there isn’t much point in collecting that information. Remember that every field you add to a form makes it less likely the form with be completed. So I’m going to show you how to do the second option, which is to only show the phone number field to customers in the USA.

Still in the Manage Form Fields screen, click the Edit button next to your new phone number field.

Just above the Save Changes button, check the Enable conditional logic checkbox. In the Choose… field, select Country, then Is, then type in the United States. You can find out all about the Country field and the values it returns on the documentation for the field.

setting up conditional logic

Click the Save Changes button. The field for phone numbers will now only be displayed to people who selected the United States for their country.

Adding Your New Fields to the Form

Now you need to add those two new fields to the profile form. Go to Profile Builder > Edit-profile Forms and select your form.

Click the Field: field and select Interests. Click the Add Field button. Repeat this for the Phone number field, the Location (or Country) field, and the Avatar field.

Now drag and drop the fields in your form into the correct order, by grabbing the left-hand side of each one with your mouse. It should look something like this, but you might prefer to use a slightly different order from the image below. 

complete editing profile fields

Now click the Update button to save the changes to your form.

Adding Your Forms to the WooCommerce Screens

You now have your forms set up but they aren’t showing up on your site yet. That’s because you need to tell Profile Builder Pro which forms to use on which WooCommerce pages on the front-end of your site.

Go to Profile Builder > WooCommerce Sync.

Profile Builder WooCommerce sync screen

In the Choose Register form to display on My Account page dropdown box, select Default Register.

In the Choose Edit Profile form to display on My Account page dropdown box, select Default Edit Profile.

Click the Save Changes button. Your forms will now display on the relevant WooCommerce pages.

On your live site, go to the WooCommerce My Account page. When you aren’t logged in, you’ll see the new custom registration form:

new registration form

When a new user completes the form, they’ll be redirected to your thank you page:

thank you page front end

Now when someone has registered, when the user logs in and navigates to the My Account page, they’ll be able to access their profile page.

account details screen

You now have two new forms, with fields that will be more useful for you and your customers than the default forms. Well done!

Wrapping Up

Using the Profile Builder Pro WordPress plugin, you can easily create custom WooCommerce registration and profile forms that will help you collect valuable customer information and boost your sales.

In this tutorial, you’ve learned how to use the form builder to create a range of fields with this great plugin including avatars, selects and reCAPTCHAs, but there are plenty more options. Try exploring the available field types and finding out which ones would work for your store.

Profile Builder Pro

Get the Profile Builder Pro plugin today and customize your WooCommerce Registration Forms on your WordPress site!

Get the plugin

Subscribe to get early access

to new plugins, discounts and brief updates about what's new with Cozmoslabs!

One thought on “How To Customize WooCommerce Registration Form (2020 Ultimate Guide)

  1. Is it possible to show custom registration form fields based on the product being purchased? For instance, I use Woocommerce Membership & Subscription plugins. When a user purchases a membership product from my store, I’d like to present them with the opportunity to provide more information about themselves. I can then make their information/profile available in a membership directory. Ths membership directory would only consist of active members (member role = Premium Subscriber). This will enable members to get to know each other and connect based on location, interests, circumstances, etc.. Is this possible using your plugin(s)? If so, can you assist? Thanks!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.