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.

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

The Account Details tab lets users adjust their login information.

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

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

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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

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!

⚠ 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

👉 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!