WooCommerce is a customizable e-commerce open source platform that is built on WordPress. For online large and small-sized merchants it has been designed for using WordPress. It became popular because of its simplicity and it is very easy to install.
Just like other software WooCommerce also has some downsides and restrictions. But without a doubt, it is the most popular system which is available today. Being a WooCommerce user you might be thinking about the page getting quite dull which is due to the tedious process of WordPress registration and login page. Due to this, your site may look unprofessional.
Here in this article, I will tell you about how quickly you can build a registration page and login page with less fuss. This will work for both standard and e-commerce WordPress.
Why you should consider customizing the WooCommerce Login Form?
There are a few reasons why you need to customize the login form or registration page of WooCommerce.
Field Options with Limitations:
The registration login form of WooCommerce comes with enough fields that will help you to create an account. As you are looking to add more fields like drop-down menus, checkboxes, shipping and billing addresses, etc. These fields cannot be requested or if you need this then also these fields won’t be shown.
A Separate Registration and Login Pages:
You might have seen in the WooCommerce registration and login forms are on the same pages but this feature arises because of default. As it is not possible to build a specific page for the registration and login forms, eventually we know it is useful but still it can’t be created. You can only circumvent this problem by using codes or plugins.
Designs are Limited:
As in WooCommerce if registration and login forms look unappealing, monotonous, and drab. Still by default also you are not allowed to alter any visual appearance. Although you own various multi-font types, borders, or colors but still by default also you are not allowed to use all this in the forms.
Customization is important due to these problems. If you are worried about what’s the solution for all these then continue your reading here. I will discuss the three ways in which you can customize your login page.
WooCommerce Customization: User Registration Plugin
Finding a plugin that makes your task simple and customizable is tough, especially when it is for your “My Account Page” in WooCommerce.
To make your website registration and login forms more effective we usually suggest a user registration plugin (i.e) WordPress plugin. This plugin’s main focus is to make the forms effective. It includes a simple process of drag and drop. This can be done by anyone as in this process no experience in coding is required.
Process for User Registration Plugin:
- Start the process by activating and installing the plugin. Click on the plugin as soon as you navigate to the dashboard. A page will appear for Add new plugin on the left-hand side, search for the user registration and then click on the install tap. Once you find the plugin, activate it.
- For the plugin a setup wizard will open which will guide you about the entire process
- All the necessary pages will get created and installed automatically and in the remaining steps, you can customize fields and style on your login page.
- Once you cover all the three steps of the process. You can go to the dashboard and use user registration as you get access to the plugin. Now a window will appear where all the aspects of your registration and login page will get customized.
Now we have completed all the steps and everything is set up. So let’s do a check on the plugin action.
Two default fields are already added to the form (i.e) user email and user password. For creating the new field, press “Add New”.
Now drag and drop the fields that you want on the right side. This will appear in the left panel. Now you have the whole right to create as many fields you want but keep in mind to give a name to your form.
Removing the fields is also easy; you simply need to move your cursor on the field you don’t want and then pick up the trash. A window will pop up where you can choose to delete it. Customizing Form settings and Fields:
Now let’s set up the form fields and settings for the essential information that you have added. The following settings can be customized in general settings.
- Label: For the form field you can add text to the label.
- Description: For the form field you can easily add a description.
- Field Name: In the list, you can add a field name for more clarity.
- Placeholder: In the placeholder, you have to fill in the text for fields.
- Hide Label: This will be enabled if the option is hidden
- Required: This is required because if the mandatory details are not filled then the user will not be able to submit the form.
As you have various functions for Form fields similarly Form settings also provide you with various functionality. Once you are done with your Customization your other work is to create the Form which you can do by clicking on the create form option which is available on the top right.
As now you have created the form so now copy the code which is there on your screen. Your other task is to paste this code by creating a new page of your account and then you have to publish it.
It’s time to save the customization. So go to the advanced tab in the WooCommerce settings. Click on the new my account page which is an option available on my account page. You have to save the changes done by you.
Replace WooCommerce Login Defaults:
Once you have altered and generated your default WooCommerce form you have to replace it with your new WooCommerce registration and login form. For this, you need to go to the WooCommerce setting and there you can make the necessary changes.
To save the changes from the drop-down menus select “Account and Privacy.” Then on the page of “My Account” which is there in the column of account creation, click on ” Allow customers to create an account.”
In the setting option, you will see a user registration option selected on the WooCommerce tab. A drop-down menu will appear where you have to click on the registration form which has been created by us before. When you pick the form you will see other fields which will appear below.
On the menu, press “Click on this option to Replace registration page.” to enable. Once this option is enabled you will see that the place of WooCommerce default login and registration form has been taken. The last step is to save these changes, so click on the “save changes option.”
Moving forward to the login page Customization
Things don’t end here for more extended functions like customizer, style is some add-ons which have been offered by user registration Plugin, but as said you can get everything in a shot so for these add-ons you have to upgrade it to “user registration pro.”
WooCommerce Login Page Customisation by Elementor
For this, we will start with activating and installing Elementor in your WordPress. Once the activation is done, go to the dashboard pages of WordPress. Now the login page that we have created previously selects that (i.e) the registration/login page with the code. After selecting it, click on the option “Edit with Elementor.”
An Elementor page planner will open that will allow you to customize your account page/login page. As we have already customized it so you can do the customization in the background as per your choice.
As per your creativity level, you can make the changes, note that the changes you make in the background will rely on the aesthetics of the website. With the pro option of Elementor, you will get an upper hand which will give you more add-on tools. As though you can add or make as many customizations in your created registration/login page.
All these changes include various new background options, you can change the color, text, and button in the background, you can add new borders, can customize the texts, images, and buttons in an animation way, and many more.
WooCommerce Login Page Customisation: With Additional Plugins
The most common request from WooCommerce users is to configure and change both the registration and login page. As they don’t want to have all things on a single page, basically they would like to divide these pages. In today’s internet world it is important to have secure logins that is why many have social login issues. As this is a feature where it takes your information from other websites (i.e) it auto-fills your data.
As we are dependent on plugins because WooCommerce doesn’t allow us to customize directly for my account and login page. Don’t worry we have various plugins to help in Customization. Some additional plugins that can solve your issues are:
Plugin WooCommerce Login/signup Lite
A free WooCommerce Login/signup Lite plugin is available with a premium version but our purpose will be done by the free version. As it is very easy to use. Once it gets installed it allows you to develop codes so as per your form you can generate codes and then you can paste those codes on any page you choose.
Plugin Login/Signup Popup
This plugin gives you pop-up login forms instead of on-page forms. It’s easy to activate because it doesn’t take your user to another site for registration and login.
Plugin WooCommerce Social Login
Through this plugin from different social sites like Facebook, Amazon, Twitter, Google, etc. As all these social platforms are supported by the WooCommerce social login plugin. Another best part is with one credential your user can operate all other platforms. Also if they want they can link their personal social media profiles without any hassle.
Plugin Nextend Social Login
Another free plugin that gives you permission in your WordPress site to add logins for social networking. With numerous social networking accounts, it will be easy for the customers to connect with your WooCommerce store. For more activity on your WooCommerce, you need to add more add-ons to your WooCommerce shop.
Last Words:
As you can’t change the default login page in WordPress because WooCommerce is not allowing you to do it, and it might be possible that your style on the website may clash. Adding bit customization to your WooCommerce registration/login page may attract more customers to your site.
Through this, small changes and customization help you to generate more success in your online store. Also, it will retain and attract more long-term clients.