Searching for a solution to customize how WooCommerce user registration works at your store?
For example, your store might need to collect more information from users during registration, which isn’t something WooCommerce lets you do by default.
Thankfully, you can easily customize how it works using a dedicated WooCommerce user registration plugin, which is what we’re going to show you how to do in this guide.
By the end of this post, here’s everything that you’ll be able to do:
- Replace the default WooCommerce user registration forms with your own custom forms.
- Extend your custom WooCommerce registration forms with as many custom fields as needed, including conditionally displaying certain fields and using repeater fields.
- Add custom fields to the WooCommerce checkout page.
- Create multiple different WooCommerce registration forms, including adding users to different WooCommerce roles based on the form they chose.
- Create custom edit profile forms in the WooCommerce “My Account” area so that users can edit the information on your custom registration forms.
Basically, you’ll be able to create a 100% custom WooCommerce user registration system and make it as complex or as simple as you need.
Let’s dig in!
Examples of a Custom WooCommerce Registration System
Before we get into the how-to, let’s go over a few examples of the types of modifications that you’ll be able to make by following this tutorial.
Customize Registration Form on “My Account” Page
The default WooCommerce registration form on the “My Account” page looks something like this:
By following this tutorial, you’ll be able to replace it with a completely custom form that includes as many fields as needed – you can even add unlimited custom fields to collect additional information:
Add Custom Fields to WooCommerce Checkout Registration
The default registration form on the WooCommerce checkout page looks something like this:
By following this tutorial, you’ll be able to add as many new fields as needed. You can even use advanced tactics like conditional logic and repeater fields to still keep your checkout registration forms short while still collecting all of the information that you need:
You can also use different sets of fields on the “My Account” page and checkout page registration forms.
Finally, if you want to go beyond the default WooCommerce registration system, you can also add your own custom registration forms anywhere on your site.
What You’ll Use to Customize WooCommerce Registration
To customize the WooCommerce registration process, you’ll need the help of a dedicated WooCommerce user registration plugin. Specifically, you need the Profile Builder plugin.
Profile Builder is a full-service WooCommerce registration and user profile plugin that has a dedicated integration with WooCommerce.
While the basic Profile Builder plugin is available for free at WordPress.org, you’ll need the premium version to access the WooCommerce Sync add-on. WooCommerce Sync lets you sync your custom registration forms with WooCommerce fields, such as shipping and billing fields. It also lets you replace parts of the default WooCommerce registration system with your own custom system.
To access this integration, you’ll need to purchase the Hobbyist plan. To access some other advanced features such as repeater fields, you’ll need the Pro license.
Overall, you can follow 90%+ of this tutorial using just the Hobbyist license and we’ll be sure to note which features require the Pro license.
How to Customize WooCommerce User Registration Using Profile Builder
Now, let’s get into the step-by-step tutorial part of our post and we’ll show you how to use the Profile Builder WooCommerce user registration plugin to customize your setup.
To follow this tutorial, the only things that we’ll assume are that:
- You already have a working WooCommerce store.
- You’ve installed and activated both the Profile Builder plugin and the WooCommerce Sync add-on. Again, you can get access to the WooCommerce Sync add-on by purchasing at least the Hobbyist license.
Let’s dig in!
1. Set Up Basic WooCommerce Registration Behavior
Before you can start customizing the WooCommerce registration process, you’ll first want to make sure you’ve properly configured WooCommerce to achieve the registration behavior that you want.
For example, do you want users to be able to register for an account from the checkout page? And if so, do you want to force them to register for an account or do you want to still give them the option of checking out as a guest?
To make these choices, go to WooCommerce → Settings → Accounts & Privacy. In this area, you’ll be looking at the Guest checkout and Account creation settings, which are both located at the top.
In the Guest checkout settings, you can choose whether or not shoppers should be able to place an order without an account. If you uncheck the box, shoppers will be forced to register before they can check out.
Second, you can use the Account creation settings to control where/when shoppers can register. For this tutorial, we recommend allowing users to register on both the checkout and “My Account” pages, but you can disable certain locations if you prefer. You could even disable both options and force users to register via a custom form that you place somewhere else (you’ll learn how to create this form in a second).
In the next steps, we’ll show you how to customize the registration forms/fields that appear in both of those locations.
If you’re not sure where to start, we recommend the following configuration as a good basic setup to follow this tutorial, though you can adjust things if needed:
2. Customize Your WooCommerce Registration Form
Now, you’re ready to create the custom registration form that you’ll use to replace the default WooCommerce user registration form.
To do this, go to Profile Builder → Form Fields.
Here, you’ll be able to choose exactly which fields to include on the WooCommerce registration form. You can use:
- Default WordPress fields – for example, “Email”, “Name”, “Password”, etc.
- Default WooCommerce fields – you can add dedicated fields for “Billing Address” and “Shipping Address” that sync with WooCommerce.
- Custom fields – you can add your own custom fields to collect whatever information you want. You can choose from a variety of field types including text, drop-down, file upload, checkbox, and more.
By default, Profile Builder will have already added the bare minimum that you need for a WooCommerce registration form. That is, essential fields like “Email”, “Billing Address”, and “Shipping Address”.
You can use drag-and-drop to rearrange the order of all the existing fields. You can also click the Edit option next to a field to edit its settings and the Delete option to remove a field:
To add your own custom fields, use the Field drop-down at the top to choose the type of field that you want to add:
For example, here we’ve added some additional fields that let shoppers choose whether they’re a wholesale or retail customer. With the Select (User Role) field, you can even register shoppers as different WooCommerce user roles depending on how they answer – check out our post on WooCommerce user roles to learn why this is useful:
You can add whatever field types you want and however many fields you need. For each field, you’ll also be able to choose whether it’s required as well as other options.
Advanced: Use Conditional Logic
One of the advanced features Profile Builder gives you is conditional logic. With conditional logic, you can choose to show/hide certain WooCommerce registration fields based on how a user has answered previous fields.
For example, you could set it up so that a user needs to enter some additional information if they mark themselves as a wholesale customer.
In this configuration, the user will only need to enter their business phone number if they indicate that they’re a wholesale customer on the registration form:
Advanced: Add Repeater Fields
Another advanced feature that Profile Builder gives you is the ability to use repeater fields in your WooCommerce registration forms.
Repeater fields let you give users the option to enter the same information multiple times. For example, if you’re selling to wholesale customers and you want to give customers the option to add multiple contact people for the account, you could create a repeater field that lets users add as many names and phone numbers as needed.
You can even display repeater fields on the WooCommerce checkout, which opens up a lot of possibilities.
To learn how it works, check out our guide on repeater fields in Profile Builder.
Note – you’ll need to purchase the Pro plan to access repeater fields.
3. Replace the “My Account” Registration Form With Your Custom Form
Once you’ve created your custom WooCommerce registration form, the next step is to use it to replace the default WooCommerce forms.
In this section, you can replace the default WooCommerce registration form on the “My Account” page with your own custom form.
For reference, here’s what the default form looks like:
To replace this form with your own, go to Profile Builder → WooCommerce Sync. Then, use the Choose Register form to display on My Account page drop-down and change it from None to Default Register:
Now, users will see your custom registration form when they go to the “My Account” page (as long as they aren’t already logged in):
4. Add Custom User Registration Fields for WooCommerce Checkout
At this point, you’ve replaced the WooCommerce registration form on the “My Account” page with your own custom form. However, if users register during checkout, they’ll still see the default WooCommerce registration form – it looks like this:
We’re going to fix that in this step…
Because you might not want to use the same registration form on your checkout page, Profile Builder lets you choose which individual fields you want to display on the checkout.
You could use all of the registration fields to create the exact same registration form…or you could leave out some nonessential fields to shorten your form and reduce friction during the checkout process – you can choose whichever approach best fits your needs.
To make these choices, go back Profile Builder → Form Fields. Then, edit one of the form fields that you want to include on the WooCommerce checkout and set the Display on WooCommerce Checkout drop-down equal to Yes:
Then, just repeat the process for as many fields as you want to include on the WooCommerce checkout registration form.
You’ll still be able to use the advanced features in Profile Builder, including conditional logic and repeater fields.
Here, you can see the new field on the checkout. It also uses conditional logic so that, if a shopper indicates that they’re a wholesale customer, it will display two additional fields on the checkout page:
And that’s it! You’ve created your own custom WooCommerce registration forms for both the “My Account” page and the checkout.
Now, let’s talk about some other optional enhancements that Profile Builder can help you make to your WooCommerce user registration setup.
Optional: Create Separate Registration Forms for Different Users
So far, we’ve focused on the idea that you want to use the same form for all your WooCommerce shoppers (though you do have the option to customize the fields to set up custom user registration fields for the WooCommerce checkout).
However, you might have situations in which you want to use completely separate registration forms for different types of shoppers. For example, let’s keep going with our retail vs wholesale customer example.
If you want your public-facing store to be entirely focused on retail customers, you might not want to add any mention of wholesale to the registration form that retail shoppers use.
To accomplish this, you could still use all the steps that you saw above to have Profile Builder customize the native WooCommerce registration forms for retail customers. But then you could also create another separate form that you place on a different page for wholesale customers.
To create a different form, you can go to Profile Builder → Registration Forms → Add New.
Now, you can set up a registration form that’s 100% dedicated to wholesale shoppers. If you’ve set up a dedicated WooCommerce role for wholesale shoppers, you can also automatically assign people who use this form to the wholesale user role.
Then, you can add the form anywhere on your site using its shortcode:
Another neat thing you can do is require manual admin approval for people who use certain registration forms. For example, you might not want to let just anyone register to be a wholesale user, so you could manually hold wholesale registrations for admin approval.
To enable this, you can go to Profile Builder → Settings. Then, set the “Admin Approval” Activated drop-down equal to Yes and then choose which user roles should require manual approval (e.g. the wholesale role):
Optional: Customize the WooCommerce Edit Profile Form
Because you’re creating a custom WooCommerce user registration form that collects additional information, you might also want to give shoppers the option to edit that custom information after they’ve registered (or, you might not, which is why this step is optional).
To accomplish that, Profile Builder also lets you create custom edit profile forms, which you can then use to replace the “Edit Profile” area in the default WooCommerce “My Account” page.
You can use your custom edit profile forms to let users edit:
- All of the fields on your registration form.
- Just some of the fields on your registration form.
To create a new WooCommerce edit profile form, go to Profile Builder → Edit-profile Forms → Add New (or edit the default form that Profile Builder adds).
Then, you can choose which fields you want to make editable. If you click the Add Field button, you’ll be able to add any one of the fields from your registration form:
Once you’ve added all of the fields that you want your shoppers to be able to edit, you need to tell WooCommerce to replace its default form in the “My Account” area with your custom form.
To do this, go to Profile Builder → WooCommerce Sync and use the Choose Edit Profile form to display on My Account page drop-down to select Default Edit Profile (or the name of your form if you created a custom edit profile form):
Now, users will be able to edit those fields from the Account details tab in the regular WooCommerce “My Account” area:
Create Your Own Custom WooCommerce User Registration Setup Today
The default WooCommerce registration system is one-size-fits-all, which may or may not work for your store.
Thankfully, it’s possible to customize how users register for WooCommerce.
With Profile Builder and the WooCommerce Sync add-on, you can create custom WooCommerce registration forms to replace the forms on the “My Account” page and on the WooCommerce checkout.
You’ll be able to add new fields, change the order, and even use advanced tactics like conditional logic and repeater fields.
If you need to go further, Profile Builder can also help you create unlimited different registration forms, including the option to feed the forms into different WooCommerce user roles and even hold certain user roles for manual approval.
You can also bring this same flexibility to the WooCommerce edit profile form in each shopper’s “My Account” area.
If you’re ready to get started, purchase Profile Builder today to get access to the WooCommerce Sync add-on and customize your store.
Source: https://www.cozmoslabs.com/299957-woocommerce-user-registration/
