Bank IFSC Codes |
09:00am - 06:00pm IST
USA - Canada - England - Australia - India | [ Special Offer - Responsive Website in USD $299 Only ]

How to Customize It (Full Tutorial)


The WooCommerce login page is sufficient for many stores, but it’s lacking in design control. And store owners may want to customize the WooCommerce login to better match their brand.

How the WooCommerce login page works

After installing WooCommerce, the plugin automatically generates a My Account page on your store – it’s a page that renders content with the [woocommerce_my_account] shortcode.

The My Account page is the primary login page for customers – you can rename it and add it to the navigational menu.

When a customer goes to the page, they see a simple form to type in a login username and password.

The built-in WooCommerce login form

Once logged in, they see the My Account module for viewing recent orders, downloads, addresses, account details, and more.

The default WooCommerce My Account page

The Account Details tab lets users adjust their login information.

Default WooCommerce login with Account details selected

In addition, you can add a Login/out widget to any widget-supported area of your website, like in the sidebar or footer.

Placing a login/out block in the sidebar widget area

This presents the same fields for site visitors to log in with their username/email and password.

WooCommerce login form as a widget, in the frontend sidebar

How do you customize the default WooCommerce login forms?

If you want to customize the WooCommerce login form, you have several options:

We encourage you to explore all options listed above. The average WordPress user is best off using a plugin to either replace the default My Account page or to keep that page and make some customizations. Page builders work well, too!

📌 Just keep in mind that just about every page builder and plugin requires a premium subscription to customize the WooCommerce login. There’s nothing wrong with that but, for this tutorial, we’ll use the only viable free plugin for customizing the login.

How to customize the WooCommerce customer login

The Login/Signup Popup plugin offers a free way to customize the WooCommerce customer login on the frontend. The plugin provides an inline form and a pop-up form for adding to any area of your website. It can also replace the My Account login/registration form automatically.

To begin the process, install and activate the plugin on your WordPress website.

  1. Enable the WooCommerce login/registration form
  2. Replace the My Account page form
  3. Manage registration/login form fields
  4. Customize the WooCommerce login/registration page styles
  5. Check the results on the frontend
  6. Add the WooCommerce login/registration form anywhere on your site
  7. View the results on the frontend

1. Enable the WooCommerce login/registration form

With the plugin active, you should now see a tab in the WordPress Admin panel called Login/Signup Popup. Click on that to proceed.

Going to the Login/Signup Popup tab in the WordPress Admin menu

Under General, ensure that you check the following tabs:

  • Enable Registration
  • Auto Login User on Sign Up
  • Handle Reset Password

These are usually all activated after installing the Login/Signup Popup plugin, but it’s a good idea to double-check. There are several other settings in this area that you may want to configure as well, like picking the user role after someone registers, or adding a login redirect page.

Enabling the new registration form

2. Replace the My Account page form

Scroll down to the WooCommerce Settings section.

Activate these settings if they’re not already turned on:

  • Replace myaccount form
  • Replace checkout login form

This makes the process much easier for you, since the plugin automatically swaps out the default My Account page registration/login form for a new one that you have control over. The same goes for the checkout login form.

Activating settings to replace default WooCommerce login forms

3. Manage registration/login form fields

While still under the General tab, go to the top of the page. Click the Manage link next to the Registration Fields option.

Clicking on the Manage link to control registration fields

That sends you to an area to customize the WooCommerce login and registration forms. You’re able to add fields for passwords, usernames, names, and more. There’s even a terms and conditions field available.

Click through the fields on the left side. When you click each one, you’ll see the unique field settings.

  1. Mark a field Active if you’d like to include it on your login/registration form
  2. Customize the WooCommerce login field by changing things like placeholders, maximum characters, and autofilling with WooCommerce billing and shipping information

Make sure to click the Save button once you’re satisfied with the fields and their settings.

Adding fields to the WooCommerce login, and setting them as Active

4. Customize the WooCommerce login/registration page styles

Select the Settings tab to open more advanced options to stylize and customize the WooCommerce login and registration.

🗏 On this page, you can:

  • Show icons
  • Adjust icon size
  • Change container width
  • Change icon and icon background colors
  • Choose a border color
  • Set a bottom margin for all fields
  • Choose the background color for input fields

And keep scrolling down on the page, since there are several other tools to customize the WooCommerce login area.

Changing settings like for showing icons, choosing colors, and more

5. Check the results on the frontend

To view your results, you must log out of your admin account or open an Incognito tab. Then, navigate to the My Account page for your WooCommerce store. You’ll see a new, customized WooCommerce login form with whatever fields and styles you decided on.

The new form on the Login tab

The Sign Up tab functions as your registration form, with all the fields you chose. In this tutorial, for example, we opted to ask customers to type in their first and last name, email, password, and to accept the terms of service.

An inline WooCommerce login form with sign up tab

6. Add the WooCommerce login/registration form anywhere on your site

If you want to, the plugin also lets you add the login form to other parts of your WooCommerce store.

Go back to Login/Signup Form Popup > Settings. Select the Info tab. This page details how to display the WooCommerce login form using several methods.

You can:

  1. Open a pop-up version of the login/signup form from the menu, using a link, class, or with a shortcode
  2. Use a shortcode to display an inline or pop-up version of the login form
Copying the shortcode for the login

Since we already looked at an inline version of the WooCommerce login form, let’s explore how to display the pop-up form.

Go to a page, post, or widget area (anywhere that provides a content editor) and add a Shortcode block. Paste the pop-up form shortcode from the previous page into that block. Click Update or Publish for the page/post.

Note: If using the Classic WordPress Editor, paste that shortcode into the Visual Editor for it to work.

Inserting a shortcode for WooCommerce login popup form

7. View the results on the frontend

Go to the frontend version of your website – particularly an area where you can view where you added that login shortcode to a page, post, or widget. Make sure you’re logged out of your Admin account, so you can see the form.

You’ll notice a Login link if working with a pop-up form. The inline form simply displays the entire form on one page.

WooCommerce login link on the shop's homepage

After clicking that link, a pop-up version of the WooCommerce login form appears for customers to sign in to their accounts. Clicking the Sign Up tab presents additional fields for new customers to create an account. There are also settings to customize the image on the form to better match your brand.

View of popup WooCommerce login form

How to add social logins to WooCommerce

A more modern way to customize the WooCommere login area is by adding social login buttons. These minimize the amount of typing the customer must complete, since it pulls their current information from places like Facebook or Twitter to create an account on your site.

Similar to customizing the basic WooCommerce login page, there are dozens of options for incorporating a social login into your WooCommerce site. For instance, the Login/Signup Popup plugin from earlier in this article actually provides a social login add-on for $9.

Yet, for the simplest, cheapest way to add social buttons to your WooCommerce login, install the free Super Socializer plugin.

  1. Enable social login feature
  2. Set up social networks
  3. Enable social login for WooCommerce forms
  4. Test your WooCommerce social login functionality

1. Enable social login feature

Once activated, you’ll find a Super Socializer tab in the WordPress Admin menu. Open that, then select the Social Login option.

Going to the Social Login page in Super Socializer plugin

Check the box to Enable Social Login – it’s under the Master Control section.

checking off the Enable Social Login box

2. Set up social networks

In the Basic Configuration tab, check the social networks you’d like to include with the social login. For each one, you need to also paste in a Key/ID and Secret to activate the login functionality.

picking social networks to include in WooCommerce login

Unfortunately, every social network has its own ways to find its IDs, Keys, and Secrets. Luckily, there are red question mark icons that you can click on to explain the steps to find each one.

Information on how to obtain Facebook and Twitter App secrets and IDs

For example, Facebook lets you quickly create an “App,” which provides an App ID and Secret. There’s no need to know anything about the development of Facebook Apps – simply generate the app (and don’t ever delete it) to obtain the ID and Secret.

App ID and Secret shown in the new Facebook App

For each social login you want, paste the ID/Key and Secret back on WordPress.

Be sure to click the Save button at the bottom when you’re done.

Facebook App ID an Secret pasted into the right fields

You also might have to add a link from your site to the app, but it depends on the social network – Facebook requires this step.

A link from the website that's required to be put into Facebook

3. Enable social login for WooCommerce forms

To enable social login buttons in WooCommerce, go to the Advanced Configuration tab in the Super Socializer plugin.

There are four boxes 📦 to check (unless you’d rather not have the social buttons appear on certain login forms):

  1. Enable before WooCommerce Customer Login Form
  2. Enable at WooCommerce Customer Login Form
  3. Enable at WooCommerce Customer Register Form
  4. Enable at WooCommerce Checkout Page
Enabling the social login in various places like the register form and before the login form.

4. Test your WooCommerce social login functionality

Finally, it’s time to check out what the social login looks like on the frontend. Go to the My Account page in WooCommerce – we’ve already configured the settings for the social login buttons to be added to that page.

You’ll now see every social login button that you activated before. For this tutorial, we only turned on Facebook, but there are various others to choose from. And when someone clicks the buttons, they can register or log into your WooCommerce site with their previously created social credentials!

Facebook login button for WooCommerce on the frontend

Note: the default styling works better with the regular WooCommerce login form. If you’ve already customized the login page, you might need to add some custom CSS to make things look nice.

Other ways to customize the WooCommerce login

The possibilities are endless for customizing 🎨 the WooCommerce login and registration page, so it’s always good to keep in mind what’s available.

👉 Here are other options to consider:

Do you still have any questions about how to customize the WooCommerce login page? Let us know in the comments!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.


Hello my name is Gurjinder Cheema. I create beautiful website for all type of businesses. I 'm Punjab based web developer running this company. I have a 10 years of experience in web designing field. Gurjinder Singh Cheema, the lead web developer at Cheema Developers. Gurjinder Singh Cheema is a highly skilled and experienced developer who specializes in creating beautiful logos, websites, social media posts, and ecommerce stores. He is also proficient in blogging and designing business cards. Gurjinder Singh Cheema is based in Punjab, Phagwara and is known for his ability to bring a client's vision to life through his technical expertise and design skills. He is a master at creating visually stunning and functional websites that are optimized for search engines and user experience. As the lead web developer at Cheema Developers, Gurjinder Singh Cheema  is responsible for managing a team of developers and ensuring that all projects are completed on time and to the client's satisfaction. He is able to provide guidance and mentorship to his team members, while also taking on complex development projects himself. Gurjinder Singh Cheema's expertise in ecommerce development has been instrumental in helping many of Cheema Developers' clients to establish and grow their online businesses. He designs and develops online stores that are easy to navigate, secure, and effective in converting visitors into customers. He is also able to assist clients with setting up payment and shipping options, as well as inventory management systems. Gurjinder Singh Cheema's design skills are also highly sought after by Cheema Developers' clients. He is able to create logos and business cards that are both visually appealing and reflective of a client's brand. He also has a keen understanding of social media marketing, and is able to create social media posts that are both visually stunning and effective in increasing engagement and follower numbers. In addition to his technical skills, Gurjinder Singh Cheema is also a great communicator and works well with clients. He takes the time to understand a client's needs and preferences, and is able to provide clear explanations of technical concepts in layman's terms. He is also able to manage client expectations and provide regular updates on project progress. Gurjinder Singh Cheema's leadership skills and ability to manage a team has been instrumental in making Cheema Developers a success. He has been able to foster a positive and productive work environment and has helped to build a team of highly skilled developers. His dedication to his work and his team has earned him the respect of his peers and clients alike. In summary, Gurjinder Singh Cheema is a talented and dedicated lead web developer who brings a unique combination of technical skills, design expertise and leadership skills to the Cheema Developers team. His work is of the highest quality and his clients are always satisfied with the end results. With Gurjinder Singh Cheema leading the team, Cheema Developers is able to offer a wide range of web development services to its clients, and it is able to complete complex projects efficiently and effectively.


Click one of our contacts below to chat on WhatsApp

× How can I help you?