The default WooCommerce registration form has limitations, so you must build your own WooCommerce registration form.
Since WooCommerce doesn’t let you create custom forms, you’ll need a third-party tool like User Registration.
In this article, we’ll walk through the step-by-step process of creating a custom WooCommerce registration form. Let’s start!
The Default WooCommerce Registration Form
The default WooCommerce registration form has minimal fields for your customers to fill in. You can only place email, password, and username fields in the form.
These form fields aren’t enough to collect substantial information about your customers. You’ll have to rely on extensive coding to add custom fields to a WooCommerce registration form.
For those without any coding knowledge, you’ll need a third-party plugin.
Although the WordPress market offers a fantastic collection of third-party plugins, we recommend User Registration to build a WooCommerce registration form for your store.
We’ll be using the same plugin in the tutorial below. Let’s jump right into it!
How to Create a Custom WooCommerce Registration Form?
Before we proceed with the steps below, let us remind you that your site must have the core WooCommerce plugin installed and activated on your site.
So, we suggest you install WooCommerce and set up your online store if you haven’t already.
1. Set Up User Registration Pro
The first step is to set up the User Registration Pro plugin.
Since the WooCommerce add-on is only available in the premium version of the User Registration plugin, you must buy a premium plan from User Registration’s official pricing page.
You can choose from any of the two pricing plans available.
We have a separate guide on installing User Registration, if you need reference. After the setup is complete, you can move on to the next step.
2. Install and Activate the WooCommerce Add-on
The next step is installing and activating the WooCommerce add-on in User Registration Pro.
So, go to User Registration >> Dashboard >> All Features. Alternatively, you can open User Registration >> Extensions; you’ll end up on the same page.
Here, find the WooCommerce add-on and activate it.
As quick as that, you’ve installed and activated the WooCommerce add-on for your WordPress site.
3. Create a WooCommerce Registration Form
Now, it’s time to create a custom WooCommerce user registration form. You’ll later replace the default WooCommerce form with this one.
Navigate to User Registration >> Add New. Here, you can choose to build the form from scratch or customize a pre-built template.
For this tutorial, let’s pick Start from Scratch. Then, give your form a name and click Continue.
The form has four default fields on the right: Username, User Email, User Password, and Confirm Password. You can drag and drop any other field you need from Fields on the left.
User Registration offers numerous custom fields like Display Name, Secondary Email, Privacy Policy, and more. So, you can collect any crucial information you need from your customers.
You can even add the following billing and shipping address fields in the registration form:
WooCommerce Billing Address
- Billing Address
- Country
- First Name
- Last Name
- Company
- Address 1
- Address 2
- Town/City
- State/County
- Postcode/Zip
- Phone
- Separate Shipping
WooCommerce Shipping Address
- Shipping Address
- Country
- First Name
- Last Name
- Company
- Address 1
- Address 2
- Town/City
- State/County
- Postcode/Zip
Moreover, User Registration lets you customize each form field you’ve added to your form. Just click on the field you want to customize, and its Field Options will appear on the left.
You can edit the field’s Label, Description, Placeholder, and so on. You can also add custom CSS classes in the Advanced Options. Do note that the customization options available might vary depending on the field.
When the form is complete, press the Publish form button at the top.
4. Configure the Registration Form Settings
Besides form building, setting up the form settings is equally important. You’ll find the General and Extras settings in the Form Settings tab.
General: The General settings allow you to change login options, redirect URL, success message position, etc.
Extras: You can enable a keyboard-friendly form, reset button, form field mapping with external fields, etc.
When you’re done with the editing, click on Update form.
5. Replace the Default WooCommerce Registration Form with the Custom One
By default, your online store will display WooCommerce’s registration form. So, you’ll need to replace the default form with the custom one you created in the steps above.
For that, open WooCommerce >> Settings >> Accounts & Privacy.
Under Account Creation, find the option that says “Allow customers to create an account: and tick the On “My account” page checkbox. Then, scroll down to the bottom of the page and click Save changes.
This enables your customers to register using a front-end WooCommerce registration form.
After that, open User Registration >> Settings >> WooCommerce. Select the custom WooCommerce Registration form from the dropdown and tick the Replace Registration Page option.
You can even replace WooCommerce’s default login on the checkout page and sync this form with the WooCommerce checkout registration page if necessary.
Finally, hit Save Changes. This will now replace the default registration and login forms with User Registration’s in-built login form and the custom registration form.
6. Set Up the WooCommerce My Account Page
Both WooCommerce and User Registration have their own pre-built My Account pages. So, this may cause a conflict when a customer navigates their account profile.
To avoid such issues, choose either the WooCommerce My Account page or the User Registration My Account page as the default.
We recommend using User Registration’s My Account page since it has a beautiful, customizable layout.
For that, open WooCommerce >> Settings >> Advanced. Under the Page setup section, find the My account page option. Choose User Registration’s My Account page from the dropdown and save the changes.
Your online store will now display the User Registration account page when a customer logs in. And with that, you’re done!
Note: To differentiate User Registration’s My Account with the WooCommerce one, check the POST ID in the URL of the account pages. Otherwise, you can change the title of the account pages.
Wrapping Up
Since the form fields in the default WooCommerce registration form are so limited, you’ll need to create a custom form with extra fields. And User Registration is the perfect solution.
It lets you add any necessary fields to your registration form. You can then replace the default form with the custom registration form you create with User Registration.
But that’s not all. You can use this fantastic feature-rich plugin to prevent spam registrations, change the default login URL, restrict content to users, etc.
To read more about User Registration, visit our blog or the official documentation page. Also, follow us on Twitter and Facebook to stay updated.