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.
- 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.
And here’s a custom registration form enhanced using the Profile Builder Pro plugin.
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.
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:
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.
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 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.
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.
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:
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:
- Email address
- Interests (from a selection)
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
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
Let’s create a new form with some extra profile fields. This form is going to include:
- Email address
- Phone number
- Billing Address
- Shipping Address
You’ll need to start by deleting some fields we don’t need. These are:
- 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.
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).
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.
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.
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.
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.
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.
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:
When a new user completes the form, they’ll be redirected to your thank you page:
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.
You now have two new forms, with fields that will be more useful for you and your customers than the default forms. Well done!
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!