How to customise your WooCommerce login page colours

A login page in default blue can look out of place next to your store’s own brand colours. Customers notice. A button that doesn’t match your logo, or a promo panel that clashes with your header, makes the page feel unfinished. Custom Login for WooCommerce lets you set the main login page colours from one screen, with no code.

This article shows you how to set the panel, text, button, link, input, and promo button colours. You’ll also choose how the promo panel behaves on phones. Choosing a template, renaming form labels, and editing promo text each have their own articles.

Prerequisites

If you haven’t set up the plugin yet, start with Getting started with Custom Login for WooCommerce. Not sure which layout to use? See how to choose a login page template first, because the template you pick decides which colour settings take effect.

Step 1: Open the Design tab

1. Go to WooCommerce → Custom Login in your WordPress admin.
2. Click the Design tab.

The colour settings sit in their own sections: Panel Colors, Button Colors, Promo Button Colors, Link Colors, and Input Colors. Mobile Promo Display sits below them.

Each colour has a colour swatch and a small text box. Click the swatch to pick a colour visually. Or type a hex code straight into the text box.

Enter colours as hex codes that start with #, like #1e40af. Colour names such as “blue” aren’t accepted. If a value isn’t a valid hex code, the login page uses that setting’s default colour instead.

Step 2: Set the panel colours

The Panel Colors section sets the background and text colours for the two sides of a split login page. The left side holds your login form. The right side holds your promo message.

Pick a background and a text colour with strong contrast. For example, light text on a dark background stays easy to read, while grey text on a pale grey background doesn’t.

Step 3: Set the button colours

The Button Colors section styles your login button. Hover means the moment a customer moves their mouse over the button. A different hover colour tells them the button is ready to click.

A hover colour that is slightly darker than the main colour works well.

Step 4: Set the promo button colours

The Promo Button Colors section styles the button inside your promo panel, such as Learn More. These colours only matter when the promo panel is visible. If you switched off Enable promo section on the Content tab, you can skip this step.

Make sure the button stands out against the Right Panel Background. If both are the same colour, the button blends into the panel.

Step 5: Set the link colours

The Link Colors section styles the Lost your password? link under the login form.

Step 6: Set the input colours

The Input Colors section styles the Email Address and Password boxes.

Focus means the box a customer has clicked into. A bolder focus colour shows them where they are on the form.

Step 7: Choose how the promo shows on mobile

On a wide screen, the promo panel sits beside the login form. On a phone there isn’t room for both. The Mobile Promo Display section lets you decide what happens instead.

These options apply to screens about 768 pixels wide or narrower. On Gradient Modern and Warm Organic, the switch happens at 900 pixels. Stack below login form only has an effect when Enable promo section is on.

Choose Hide on mobile for the fastest, cleanest login. Choose Stack below login form when your promo carries an offer you want phone shoppers to see.

Step 8: Save and check your login page

1. Click Save Settings.
2. Log out, or open a private browser window.
3. Visit yourstore.com/login to see the new colours.
4. Hover over the login button to check its hover colour.
5. Hover over the Lost your password? link to check its hover colour.
6. Open the page on your phone to check the mobile layout.

Which colours each template uses

Every template reads your colour settings, but some templates also set a few colours of their own. Those template colours win over the matching setting. Classic Split follows all of your colours. The other templates keep part of their built-in look, so some settings have no visible effect there.

“Partly” means the form labels use your text colour, but the template sets its own heading and promo text colours. Centered Card hides the promo panel on wide screens, so the promo settings have nothing to colour there.

On every template, Button Background also colours the Remember Me checkbox when it is ticked.

If you want full control of every colour, choose Classic Split. For detailed instructions, see how to choose a login page template.

Troubleshooting

Frequently asked questions

Need help?

Custom Login for WooCommerce is a premium plugin, so if you run into trouble, open a support ticket and our team can help you get set up.