How to Customize WooCommerce Login and Registration Form?

Have you ever wondered how can you change your WooCoommerce login and registration page? If you are using WooCommerce for your online store, then you are already quite familiar with it. It is one of the best eCommerce platforms that you can find nowadays.

You also can’t deny the fact that it is very convenient to use and can benefit your online store a lot. There are many collections of WordPress themes and WooCommerce plugins and extensions to help you with it too.

But still, some of its features like the WooCommerce login or the WooCommerce registration form is quite limited. This is what we will 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.

Why to Customize the WooCommerce Login and Registration Form?

  • 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.

  • 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 too, 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.

  • Design Limitations

  • For some users, the visual representation of the default WooCommerce login and registration form might be a bit dull and boring. Unfortunately, WooCommerce doesn’t let you to customize it either if that’s the case. So, you can’t use different colors, text formats, or borders on the form by default.

Customize your WooCommerce Login and Registration Form:

Most of the customizations for your WooCommerce login page and registration form can be easily done with just one plugin, User Registration. It is a plugin that is 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 carry out your modifications without coding.

All you need to do is install and activate it.

You will also need to add a few of its add-ons, the WooCommerce add-on to continue further. Through this addon, you can integrate your custom user registration forms with WooCommerce effortlessly and overcome the limitations of WooCommerce.

After that, you can use it to create a WooCommerce login or registration form and start editing it.

1. Add Additional Fields on your WooCommerce Login or Registration Form

The User Registration plugin provides you with an option to add more fields to your registration form. First, you need to create a new user registration form from User Registration>>Add New in the WordPress dashboard. You can use the additional WooCommerce billing and shipping fields from the Fields tab on the left side of the screen.

You can even add the additional fields with drop down menus, check boxes, and radio buttons if needed.

These fields can be easily added using the drag and drop feature of User Registration. Your new form fields will then be visible on the registration form when your users want to create a new account.

2. Replace the default WooCommerce Login and Registration Form

After you have created your new WooCommerce login or registration form, you will need to replace it with the default WooCommerce form.

All you need to do is go to WooCommerce>>Settings and open the Accounts and Privacy tab. Under the Account creation section, check the Allow customers to create an account on the “My Account” page option and save changes.

Then, go to User Registration>>Settings and open the WooCommerce tab. Here, select the registration form that you want to integrate. Afterward, check the Check this option to replace default WooCommerce’s login and registration page option and save changes.

Now, your customized WooCommerce login form and user registration form will be shown. 

Both the WooCommerce login and registration form are shown on the same page by default. But if you want to show them on different pages, you can do that as well using the User Registration plugin. First, create separate pages for the registration and login pages.

To display the login page separately, add the following shortcode on the page you want to show it. You also need to redirect to the link of the account page after the user logs in. Just add the link of the page at the redirect_url parameter and publish the page.

[user_registration_my-account redirect_url=”account page link”]

To display the registration page separately, you need to get the shortcode of the WooCommerce Registration that you created. You can get it from User Registration>>User Registration from the WordPress dashboard.

Now, copy and paste the shortcode to the page where you want to display the registration form. Then, publish the page.

Or,

You can simply use a block on the block editor to display the registration form that you created. Just search for the User Registration block and select the registration form that you want to display. Then, publish the page.

3. Display Additional Fields on My Account Page

After logging in or registering for a new account, the user is redirected to the My Account page. But the additional details filled on the WooCommerce login or registration page might not be shown on the account page initially.

But after you have successfully replaced the login and registration forms, you can view the additional details on the account page. Just go to My Account>>Account Details and it will be displayed here.

Note: The Account page might vary from theme to theme as we have used the eStore theme for this representation.

4. 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. 

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.

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.

5. Re-Design the WooCommerce Login and Registration Form

User Registration is an excellent registration form builder plugin that even lets you fully customize your WooCommerce login and registration form too.

You can use its Style Customizer addon to help you change the appearance of the entire registration form as you like. It is quite easy to use as it has a drag and drop interface with real-time preview options.

All you need to do is buy the Style Customizer addon and edit your existing WooCommerce form or create a new one. Then click on the Form Designer button with a paint brush icon on the bottom right of your screen. 

Now, you will be able to see the customizer panel. 

Here, you can edit all sorts of design elements of your login or registration form. Some of them include form wrapper, field labels, description and styles, radio or checkbox styles, and button styles. It even has additional options for section titles, messages, and additional CSS.

After you’re done customizing them, save it. Each and every edit you make with the Style Customizer will be automatically integrated on the WooCommerce login or registration form. So, you’ll be able to see these modifications wherever you place the form on your online store.

Wrapping 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. It can be a great help to attract a number of customers to your site with an easy interface for them to create or login to their WooCommerce account. Small details like these are very important for your online store to make sure that your customers use them often.

If you found this article helpful, do check out some more of our interesting blogs as well:

 

mm

Sajan Ratna Shakya

An ambitious person who loves to acquire knowledge about technology, play video games, and debate. I'm also an auto enthusiast with a keen interest on anything that has an engine. Find me on Twitter @RatnaSajan

Leave a Reply

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

Scroll to top

Pin It on Pinterest