How to Customize WooCommerce Login and Registration Form?

Customize WooCommerce Login & Registration Form

Have you ever wondered how you can change your WooCoommerce login and registration page? If you answered yes, then you’ve landed in the right place. 

WooCommerce is one of the best eCommerce platforms you can find on the web. You also can’t deny the fact that it’s very convenient to use and can benefit your online store a lot. 

But still, some of its features like the WooCommerce login or the WooCommerce registration form are quite limited. This is what we’ll be dealing with here in this article. Just like the WordPress login page and forms, you can do a lot with the WooCommerce login and registration forms.

Now without further ado, let’s go through them.

Reasons to Customize the WooCommerce Login and Registration Form

Before we start the tutorial, here are a few reasons why you should customize your WooCommerce Login and Registration page. 

  1. Limited Field Options: The default WooCommerce login registration form has adequate fields for a user to create an account. But, if you want to add some more fields, you can’t do it by default. You can’t add and display the fields like checkboxes, dropdown menus, and billing and shipping address wherever necessary or desired.
  2. Separate Login and Registration Pages: By default, both the WooCommerce login and registration forms are shown on the same page. Although this is very useful, you cannot create separate pages for the login and registration form if you want. You need to either use code or another plugin to overcome this.
  3. Design Limitations: For some users, the visual presentation of the default login and registration form might appear a bit dull and boring. Unfortunately, WooCommerce doesn’t let you customize it either if that’s the case. So, you can’t use different colors, text formats, or borders on the form by default.

That’s exactly why we’ve presented an easy way to customize your WooCommerce Login and Registration form which we’ll be discussing in detail next.


Step by Step Process to Customize WooCommerce Login and Registration Form

The easiest way to edit your WooCommerce login page is using a WordPress plugin. We know how difficult it’s to choose the best plugin that’s easy to use as well as customize your WooCommerce My Account page. 

That’s why we highly recommend the plugin User Registration. It’s a  WordPress plugin specially focused on creating effective login and registration forms for your website. It has an easy drag and drop interface with which you can easily customize without coding.

User Registration Plugin

And now, here’s a complete guide to editing the WooCommerce Login and Registration page. 

Step 1: Install and Activate User Registration Pro

First thing first, you need to install and activate the plugin to start using it. User Registration Pro is a premium plugin that’s why you need to buy it. You can start the purchasing process by visiting the plugin’s official homepage – WPEverest.

Next, go to Plugins >> User Registration from the top menu bar.

User Registration Homepage

Thereafter, head to the Pricing page. Get Started with the plan that suits your need.

User Registration Pricing

Fill out the necessary information and purchase the plan. An invoice with the necessary login links will be sent to your email address.

From your email, click on the log-in link. This takes you to your account. Then, navigate to the Downloads tab. 

User Registration Pro

You’ll find the User Registration Pro and also the download button as shown above. Download the zipped file on your computer. Now, go back to your WordPress dashboard. 

Click on the Plugins >> Add New from the sidebar. Select the Upload Plugin button at the top. Then, Choose the zipped file you downloaded earlier, Install, and Activate it.

Upload User Registration Pro-min

For the premium version, the license key is required to activate it. You can find the license key from your WPEverest account page under the License Key tab. 

License Key Tab

Copy the license key and paste it.

Don’t forget to allow users to register for your website. All you need to do is navigate to Settings >> General. Then, check the Anyone can Register box under the Membership option. Now, all your users can register for your site. 

Membership Option

Now you can access the add-ons without any hassle. User Registration offers many add-ons. For this tutorial, we suggest these 2 – WooCommerce, and Style Customizer

ii) Install the WooCommerce Add-on

In order to add extra fields on your WooCommerce login page, you need the WooCommerce add-on.

WooCommerce Addon

Below are some of the key features this add-on provides:

  • Offers Billing and Shipping fields that you can integrate in your registration form and also sync field details with WooCommerce.
  • The information added via WooCommerce is added to the Account Details tab which can be edited later.
  • Offers Orders tab in account page of users so that they can track their orders.
  • There’s Download tab as well in user’s account page to download the available products.
  • The Addressess tab allows users to edit their billing and shipping address.
  • You can also include User Registration’s extra fields on WooCommerce Checkout Page.

You can either download the add-on from your WPEverest account just like we downloaded the UR Pro plugin. Thereafter, upload the plugin, install and activate it. 

Alternatively, go to the User Registration >> Extensions menu from your dashboard.

Addon Navigation

It takes you to the add-ons page. Find the WooCommerce add-on and click on the Install Addon button. Also, Activate it. 

WooCommerce Activation

Step 2: Create a Custom WooCommerce Registration and Login Form

Once you’ve downloaded and installed the necessary plugin and add-on, you can easily create a registration and login form. For your convenience, User Registration also offers pre-built registration as well as a login form. 

You just have to click on the Install User Registration Pages message located at the top of your dashboard.

Install User Registration Pages

To view the installed pages click the Pages menu from the sidebar. However, these pages have just basic fields.

Therefore, we’re going to create a custom registration and login form from scratch. Start by selecting User Registration >> Add New option. 

UR Add New Button

There are two default fields – User Email and User Password already added on the form. You can either keep them or remove them. 

Give your untitled form a name and click on the Add New button to add a new field. Then, drag the WooCommerce fields of your choice from the left panel and drop them on the right side. You can add as many fields as you want. 

Add New Fields

You can also delete the fields if you want. Simply hover over to the field and select the Trash. A pop-up will appear; click on the Delete option. Similarly, you can Clone the field as well. 

Oh! And you can also change the positions of the fields by dragging and dropping them. 

Drag and Drop-min

I) Configure Form Fields and Form Settings

Now that you’ve added the necessary fields let’s configure form fields and settings. You can find the Form Fields tab right next to the Fields tab. It has the following options you can configure

Field Options

General Settings

  • Label: Add text for the form field label. 
  • Description: Add description to form fields. 
  • Field Name: Add field name.
  • Placeholder: Enter the placeholder for the field. 
  • Hide Label: Enabling this option will hide 
  • Required: The user cannot submit a form if all the required fields are not filled in. 

Advanced Settings

  • Custom CSS: You can embed a custom CSS class for a specific field. 

Likewise, Form Setting has the following options

Form Setting

General

  • User login option: Choose a login option for a user after the registration. 
  • Default user role: Select a role for registered users between subscribers, authors, editors, administrators, and contributors.
  • Enable strong password: Make strong password compulsory. 
  • Redirect URL: Pick a URL to redirect after the user registers. 
  • Form submit button custom class: Embed custom CSS class in the submit button. 
  • Form submit button label: Set label for the submit button. 
  • Success message position: Display the success message at the top or bottom after registration. 
  • Enable reCaptcha support: Enable strong security protection from spam and bots. 
  • Form template: Choose different form template to uses
  • Custom CSS: Add a custom CSS class in your registration form. 

Extra (User Registration Pro)

  • Enable reset button: Reset the default values of a user in the form. 
  • Enable form field icon: Show the field icons in the user registration form. 
  • Activate auto-generated password: This option enables auto-generated passwords. 
  • Activate spam protection by honeypot: Enabling this will protect your form from spam and bots. 

If you’re satisfied with the form and settings, hit the Create Form option at the right top. You can also Preview and Update the form once created. Now, let’s customize the form so that it can match your site’s vibe. 

ii) Customize Your Form With Style Customizer Add-on

In order to customize your WooCommerce registration form, the Style Customizer add-on is required. Hence, from the User Registration >> Extensions page, install and activate it. 

Style Customizer Activation

Now, go to User Registration >> User Registration page. You can find your newly created form there. Hover over the form and click on the Edit button. 

Edit Form

Simply select the Form Designer button with a paintbrush icon on the bottom right of your screen.

Customize Option

It takes you to the customization page. Below are the customization options

  • Form Wrapper: Change the total outline and background of the form. 
  • Field Labels: You can customize the font, color, style, height, margin, padding of the label, and description of form fields. 
  • Field Description: The field description can be customized from this option. 
  • Field Styles: Field data provided by the users can be customized in this section. 
  • Radio/Checkbox Style: Style the text, number, or symbol used for the checkbox or radio button. 
  • Section Title: Change the font, color, style, height, margin, padding of the section title. 
  • Button Styles: Customize different buttons on your form. 
  • Messages: Show error or success message and also change the styling of each message. 
  • Additional CSS: Add your own CSS code to customize the form. 

Lastly, don’t forget to click on the Save button at the top to save all the changes. 


Step 3: Replace the Default WooCommerce Registration and Login Form

After you’ve created and customized your new WooCommerce login and registration form, you’ll need to replace it with the default WooCommerce form. All you need to do is go to WooCommerce >> Settings. 

WooCommerce Settings Navigation

Open the Accounts & Privacy tab. Under the Account creation section, check the Allow customers to create an account on the “My Account” page option and Save Changes.

Account Creation

Now, navigate to the User Registration >> Settings option and select the WooCommerce tab. Select the Registration Form we created earlier from the dropdown menu. 

User Registration WooCommerce Tab

After you select the form, other fields will appear below. From there, check on the Replace registration page option. Enabling this option will replace the default WooCommerce registration and login form. Hit the Save Changes button at last. 

i) Create Separate Registration and Login Page

By default, both the WooCommerce login and registration form are shown on the same page. But if you want to show them on different pages, you can also do that using the User Registration plugin. 

Go to Pages >> Add New menu from the sidebar. 

Add New Page

Give your page a title (for example – Woo Registration). Next, press the Plus (+) icon to add a new block. Search User Registration and add the block. 

User Registration Page

From the dropdown button, select the registration form we created earlier. Publish the page at the end. 

Woo Registration Form

Step 4: Add Registration Form to the Menu

In the next step of our tutorial, we’re going to add the WooCommerce registration form on the frontend so that your users can access the form. 

Select Appearance >> Menus from the sidebar of your dashboard. 

Menu Navigation

Among the different pages, check on the Woo Registration page and click on Add to Menu button. Lastly, Save Menu.

New Menu

You can check the live preview of your site and notice that the new WooCommerce registration form is displayed on your front page. This is what the form looks like in the Zakra Shop theme. However, it may differ according to your active theme. 

Registration Form

After the registration, users are redirected to their my account page. 


Step 5: Replace WooCommerce My Account Page With UR My Account page

The registered user can log in to their my account page. However, there are two my account pages on your site right now – User Registration My Account Page and WooComerce My Account Page. 

Further, both the page might have the same name i:e My Account. This might create a conflict. To avoid this situation, click on the Edit option, check the shortcode for user registration and change the title of the page to UR My Account

UR My Account Page

Now, go to WooCommerce >> Settings and select the Advanced tab. Select the UR My Account page on the My account page option and Save Changes

Change My Account Page

Step 6: Integrate WooCommerce Account on Checkout Page

For the further convenience of your customers, you can also show the custom registration form at the checkout page with User Registration. You can even choose the fields you want them to fill on the checkout page. To integrate your WooCommerce account on the checkout page, you can simply follow the given steps.

Just go to WooCommerce>>Settings and open the Accounts and Privacy tab. Then on the Account creation section, check the Allow customers to create accounts during checkout option. 

Checkout Option

Again, go to User Registration>>Settings, and on the WooCommerce tab, you’ll see the Sync checkout registration section. Here, just check the option to sync user registration form with WooCommerce checkout registration. The extra fields that aren’t available on the WooCommerce registration form will be shown.

WooCommerce Login Page Integration

Then you can simply select the fields that you want to show your customers on the registration form for checkout. This even includes all the fields for billing and shipping addresses.

The next time your customer would like to checkout, they will be shown the form with particular additional fields if they need to fill them out.


Wrapping It Up!

These are some of the most useful tips on how you can use and customize the various aspects of your WooCommerce login and registration forms. 

The very first step is to install the User Registration plugin. Along with that, UR offers many add-ons to make your job easier. 

It can be a great help to attract a number of customers to your site with an easy interface for them to create or log in to their WooCommerce account. Small details like these are very important for your online store to make sure that your customers use them often.

We’ve come to the end of this article. Hope you enjoyed reading this article, and it was helpful for you. Why not share it with your friends and family on social media if it was helpful. 

Also, here’s an interesting article on how to create a multi-step form in WordPress. Finally, follow us on Twitter and Facebook to get updates about our blog and exciting news. 

Introducing modern block theme for magazine, news & blogging sites.

ThemeGrill Editorial

We are a team of WordPress enthusiasts comprising of professional WordPress developers, contributors, and SEO copywriters. We undertake in-depth research & come up with valuable WordPress content & resources to help the WP users of all levels. Follow us @themegrill on Twitter and +ThemeGrillOfficial on Google+.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top

Pin It on Pinterest