The default WooCommerce registration form has its limitations, so creating a custom one is essential.
Since WooCommerce doesn’t support custom forms, you’ll need a third-party tool like User Registration.
In this guide, we’ll walk you through the step-by-step process of building your own WooCommerce registration form.
Let’s get into in-depth instructions on creating a custom WooCommerce registration form!
The Default WooCommerce Registration Form
The default WooCommerce registration form is limited to just email, password, and username fields, making it difficult to collect detailed customer information.
Adding custom fields requires extensive coding, which isn’t ideal for those without technical expertise.
Fortunately, third-party plugins simplify the process. While there are many options available, we recommend User Registration & Membership for building a custom WooCommerce registration form.
In the tutorial below, we’ll show you exactly how to do it—let’s get started!
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 & Membership Pro
The first step is to set up the User Registration & Membership Pro plugin.
Since the WooCommerce add-on is only available in the premium version of the User Registration & Membership plugin, you must buy a premium plan from User Registration & Membership’s official pricing page.
You can choose from any of the two pricing plans available.
We have a separate guide on installing User Registration & Membership, 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 & Membership Pro.
So, go to User Registration & Membership >> Dashboard >> All Features. Alternatively, you can open User Registration & Membership >> 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 & Membership >> 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 & Membership 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 & Membership 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 & Membership >> 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 & Membership’s in-built login form and the custom registration form.
6. Set Up the WooCommerce My Account Page
Both WooCommerce and User Registration & Membership 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 & Membership My Account page as the default.
We recommend using User Registration & Membership’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 & Membership’s My Account page from the dropdown and save the changes.
Your online store will now display the User Registration & Membership account page when a customer logs in. And with that, you’re done!
Note: To differentiate User Registration & Membership’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
The default WooCommerce registration form is too basic, so creating a custom form with extra fields is essential.
User Registration & Membership is the perfect solution, allowing you to add any necessary fields and fully customize your form.
Once created, you can easily replace the default WooCommerce form with your custom registration form.
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 & Membership, visit our blog or the official documentation page. Also, follow us on Twitter and Facebook to stay updated.
