TUTORIAL

How to Create a Custom WooCommerce Registration Form Easily?

Last Updated: 6 mins By: Akriti Pant

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.

Default WooCommerce Registration Form

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.

Go to All Features in Dashboard

Here, find the WooCommerce add-on and activate it.

Activate WooCommerce Addon

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.

Create Registration Form from Scratch

For this tutorial, let’s pick Start from Scratch. Then, give your form a name and click Continue.

Name WooCommerce Registration Form

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.

Add New WooCommerce Form Fields

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
  • Email
  • Phone
  • Separate Shipping
Drag Drop WooCommerce Fields

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. 

Form Field Options

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.

Advanced Settings for Form Field

When the form is complete, press the Publish form button at the top.

Publish WooCommerce Registration Form

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.

Customize General Form Settings

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.

Extras Form Settings

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

Allow Customers to Create Account

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.

Select Custom WooCommerce Registration Form

You can even replace WooCommerce’s default login on the checkout page and sync this form with the WooCommerce checkout registration page if necessary.

Replace WooCommerce Login

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.

Custom WooCommerce 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.

Select My Account Page

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.

How to Create a Custom WooCommerce Registration Form Easily?
Scroll to top

Pin It on Pinterest