Want to improve the customer registration process of your WordPress site? Building a custom WooCommerce registration form and login form is a step in the right direction.
The default WooCommerce plugin has a registration form but only collects basic information. But with the help of a plugin called ProfilePress, you can collect more information from the user and reorder the form to make it user-friendly. Information collected through the form can be used for your email marketing campaigns, among other things.
This article will show you how to create a custom registration form and replace it with your default WooCommerce form. Let’s dive in.
Creating a Custom WooCommerce Registration Form
To create a custom WooCommerce registration form, you need a plugin called ProfilePress. Below, we will show you how to set up the plugin.
Step 1: Install ProfilePress
Sign up with ProfilePress, and you will receive a receipt with a link to download the plugin and a license key. Download and install the plugin on your WordPress website. Enter the license key to activate the plugin.
Step 1.5: Enable WooCommerce Registration
Go to WooCommerce->Settings of your dashboard. Click on the Privacy and Accounts section and check the option to the Allow customers to create an account on the “My Account” page option.
Step 2: Creating a Custom Form With ProfilePress
Now comes the fun part. On your WordPress dashboard, go to ProfilePress > Forms & Profiles > Registration > Add New.
You have two options to create a custom registration form. You can either use a pre-made template or build a form from scratch. If you don’t know how to code and don’t want to invest time in building a form from scratch, we recommend choosing a template.
Select the Drag & Drop Builder.
Give the form a name, and then choose one of the pre-built templates. For this tutorial, we chose Tulip. On the next page, you can customise the form according to your needs.
Adding Custom Fields
You can add the following custom fields to the form, including WooCommerce billing and shipping fields, to your registration form.
- Email Address
- Confirm Email
- Confirm Password
- Password Strength
- Website Nickname
- Display Name
- First Name
- Last Name
- Upload Profile Picture
- Upload Cover Photo
- Select Role
- Custom HTML
Here’s a quick look at the custom fields we choose for our registration form:
Modifying Form Settings
ProfilePress allows you to change the appearance of the form. This means you can create a form that compliments your branding and style. We recommend spending a few minutes modifying the looks of your form.
And before moving to the next step, make sure you go to Registration Settings and choose Customer as the New User Role. Anyone signing up using this custom form will be counted as a customer.
When the form is ready, save the changes. Now, it’s time to display the new custom registration form on your website.
Step 3: Replacing the WooCommerce Registration Form
This section will teach you how to replace the default WooCommerce registration form with the new custom registration form.
Go to ProfilePress > Settings > WooCommerce. You should see an option called My Account Registration Form. From the dropdown menu, select the new registration form you had just built and save the setting.
If you want, you can use this form as your default registration page for your website. All you need to do is, go to ProfilePress > Settings > General > Global. Then from the Registration Page option, select the new custom registration page.
It’s worth noting that if you ever choose to create a new registration page, copy the form’s shortcode, create a new page, add the shortcode and publish the page. Yes, it’s that easy!
That’s it, folks! That’s how you create a custom WooCommerce registration form! You should see the registration form displayed when you preview your WooCommerce My Account page.
Now that you have the custom registration form, some of you are wondering if you can also create a custom login form. The process of creating a custom WooCommerce login form is identical to the process of creating a custom registration form. We will quickly show you the steps in the next section.
How to Create Custom WooCommerce Login Forms
To create a custom WooCommerce login form, go o to ProfilePress > Forms & Profiles > Login > Add New.
Select the Drag & Drop Builder. Give the form a name, and then choose one of the pre-built templates.
Next, add custom fields and modify the appearance of the form as per your needs.
And finally, to replace the default WooCommerce login form with the new custom form, go to ProfilePress > Settings > WooCommerce > My Account Login Form and select the new login form.
If you’d like to make the new login form your default login form for your entire website, then go to ProfilePress > Settings > General > Global. Then from the Login Page option, select the new custom login form.
Here’s how the custom login page will look on our website:
So with that, you now know how to create a custom WooCommerce login form.
If you replace the default registration and login forms in the My Account page with custom forms from ProfilePress, here’s how it might look on your site.
In any WooCommerce store, apart from the registration and login form, visitors often use another essential form – the checkout form. Next, we will look at why you should consider customising the checkout form and what steps you need to take.
Adding Custom Registration Fields to WooCommerce Checkout
Adding custom fields to the checkout page is a great way to gather additional information from the customer. For instance, you can let customers add their social media accounts to make the registration process easier. This helps offer a better customer experience and boost your sales.
Go to WooCommerce > Settings > Accounts & Privacy and select Allow customers to create an account during checkout.
Next, go to ProfilePress > Settings > Custom Fields. You should find one or two custom fields available on this page. To add more custom fields, select Add New.
ProfilePress supports the following custom field types:
- Hidden Field
- Single Checkbox
- File Upload
- Select Dropdown
- Radio Buttons
When you have created all the required fields, save the settings and then go to ProfilePress > Settings > WooCommerce > Checkout Registration Fields. Add the registration fields you just created.
If you want to make the fields required, then in the Required Registration FIelds, add the fields you think should be mandatory.
Don’t forget to save the changes.
That’s it. You now have a custom checkout registration form.
Collecting user information via a custom WooCommerce registration or form can help boost your sales. However, WooCommerce does not offer options to add fields or customise its forms; hence, you need a plugin like ProfilePress to modify the WooCommerce login and registration forms.
That said, ProfilePress is more than just a form builder. It can help you manage users’ profiles and member directories. It can help you restrict access to content on your website, among other things. Give ProfilePress a spin!
If you liked our guide, you might find some of our other WooCommerce guides helpful. Take a look at our blog.