How to customize WooCommerce signup and login forms

Why customize WooCommerce login and registration forms?

Limited field options:

The default WooCommerce registration and login form has adequate fields for a user to create an account. But, if you want to add a few more fields, you can't do that by default. You can not add and display fields like checkboxes, drop-down menus, and billing and shipping address when needed or desired.

Separate login and registration pages

By default, the WooCommerce login and registration forms are displayed on the same page. While this is very useful too, you cannot create separate pages for login and registration forms if you wish. You have to use code or some other plugin to overcome this.

Design limitations

For some users, the visual representation of the default WooCommerce login and registration forms can be a bit dull and boring. Unfortunately, WooCommerce doesn't give you the option to customize them. Thus, you cannot use different colors, text formats, or borders on the default form.

Customize your WooCommerce login and registration forms:

Most of the customizations of your WooCommerce login page and registration form can be easily done with just one plugin, User Registration. This is a plugin that is specially focused on creating efficient login and registration forms for your website. It has a interface that supports drag and drop functionality  with which you can easily make your customizations without coding.

All you need to do is to install and activate it.

You also need to add some of its extensions.WooCommerce Addon can help to continue further. With this addon, you can integrate your personalized registration forms into WooCommerce effortlessly and overcome WooCommerce limitations.

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

1. Add additional fields to your WooCommerce login or registration form

Le WordPress Plugin User Registration gives you an option to add more fields to your registration form. First of all you need to create a new registration form from there go to User Registration >> Add New in the WordPress dashboard.

See also How to add a background image in WordPress

You can use the fields of WooCommerce billing and shipping additional from the tab Fields on the left side of the screen.

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

These fields can be easily added using the drag and drop functionality of the WordPress Plugin 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 forms

Once you have created your new WooCommerce login or registration form, you should replace it with the default WooCommerce form.

See also our guide on How to add a WooCommerce store on Facebook

All you need to do is go on WooCommerce >> Settings and open the tab Accounts and confidentiality. Under the section Account creation, check Allow customers to create an account on the "My account" page and Save changes.

Then go to User Registration >> Settings and open the tab WooCommerce. Here, select the registration form you want to integrate. Then, check the option Replace Registration Page and save the changes.

Read also our article on How to display a menu for your WooCommerce conditional subscribers

Now your personalized WooCommerce login form and registration form will be displayed.

Both WooCommerce login and registration forms will be displayed on the same page by default. But if you want to display them on different pages, you can do that as well using the plugin User Registration. 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 display. You should also redirect it to the account page link after the user logs in. Just add the parameter redirect_url  to the link of the page and publish the latter.

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

To display the registration page separately, you must have the WooCommerce registration shortcode that you created. You can have it by going on User Registration >> User Registration from the WordPress dashboard.

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

Ou

You can just use the block editor to view the registration form you created. Just search for the block User Registration and select the registration form you want to view. Then publish the page.

3. Show additional fields on the account page

After logging in or registering for a new account, the user is redirected to the page Account. But the additional details on the WooCommerce login or registration page may not be displayed on the account page.

Here is 10 WordPress plugins to add a calculator to your website

But once you have successfully replaced the login and registration forms, you can view its additional details on the account page. Just go on  My Account >> Account Details.

4. Integrate the WooCommerce account on the checkout page

For the convenience of your customers, you can also display the personalized registration form at the checkout page with the User Registration plugin. You can even choose which fields you want them to fill out on the checkout page. To add your WooCommerce account on the checkout page, you just need to follow the given steps.

Read also our article on 10 WordPress WooCommerce plugins to use on your blog

Just go on WooCommerce >> Settings and open the tab Accounts and confidentiality. Then in the section Account & Privacy, check the option Allow customers to create an account during order validation.

Again, navigate to User Registration >> Settings, and under the tab WooCommerce, you will see the section Sync Checkout Registration. Here it suffices check the option: Check this option to sync user registration with WooCommerce checkout registration. Additional fields that are not available on the WooCommerce registration form will be displayed.

Then you just need to select the fields you want to display to your customers on the checkout registration form. It even includes fields for billing and shipping addresses.

The next time your customer wishes to checkout, they will receive the form with additional specific fields for them to complete.

5. Redesigning WooCommerce login and registration forms

User Registration is an excellent WordPress Plugin of form builder that even lets you fully customize WooCommerce login and registration forms.

You can use his addon Style Customizer to help you change the look of the entire registration form as you want. It is quite easy to use as it has an interface that supports Drag and Drop functionality with real-time preview options.

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

Now you will be able to see the Customizer panel.

Here you can change all kinds of design elements for your login and registration forms. Some of them deal with the overall appearance of the form, field labels, description, and radio button or checkbox button styles. It even has additional options for section titles, posts, and additional CSS.

When you're done customizing them, save them. Every change you make on the style customization will be automatically integrated on the WooCommerce login or registration form.

See also  How to password protect your WordPress forms

So you will be able to see these changes wherever you place the form on your online store.

Summary :

Here are some of the most useful tips on how you can use and customize different aspects of your WooCommerce login and registration forms. It can be of great help in attracting a number of customers to your website with an easy interface that allows them to create or login to their WooCommerce account.

Other additional premium WordPress plugins 

Also discover other WordPress plugins premium that optimize the performance of your WordPress blog or website.

1. MapSVG

MapSVG est l’un des plugins WordPress de création d’annuaire les plus puissants et les plus performants. Il vous permet de transformer n’importe quel fichier SVG en cartes vectorielles interactives et en cartes entièrement personnalisables. Il vous permet de créer un répertoire d’entreprises local, supplier lists, etc. 

Il propose une carte pour tous les principaux pays du monde. Ses principales fonctionnalités sont : l’édition des cartes SVG dans n’importe quel éditeur de vecteurs afin de pouvoir facilement dessiner vos propres cartes, une base de données intégrée pour afficher tout type d’objet, des outils puissants de création de formulaire, pour renseigner la base de données, l’ajout des marqueurs de géolocalisation et autres.

Read also our article on How to keep your visitors longer on your website

Download| Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's it for our article that shows you how to customize WooCommerce signup and login forms. Now you will have  the possibility of creating registration forms and bitchy connection to the User Registration plugin. Small details like these are very important to your online store to make sure your customers use them often.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on WordPress blog creation or the one on Divi: the best WordPress theme of all time.

If you have comments or suggestions, do not hesitate to let us know in the reserved section. But meanwhile, share this article on your different social networks. 

...