How to Style the WooCommerce Login & Registration Page in Divi 5

by Mariya Dimitrova | Jun 30, 2026

1. Overview
2. Why this page matters more than you think
3. First, where the login page actually lives
4. Login or login + registration? It depends on a setting
5. It’s not just the login form (this is the part most people miss)
6. What Divi 5 can do on its own
7. The manual route: styling the screens with CSS
8. Where this starts to hurt
9. The complete way: the My Account Login module
10. Pulling it all together

You spent hours getting your Divi site just right. The fonts, the colours, the spacing… all of it feels like you.

Then a customer goes to log in.

And suddenly they’re looking at a plain, boxy WooCommerce form that looks nothing like the rest of your site. Grey borders. Default fonts. That generic look every unstyled WooCommerce store shares.

It breaks the spell. And it happens at the worst possible moment.

Why this page matters more than you think

The login and registration page isn’t a quiet corner of your store. It’s a checkpoint almost every customer passes through.

Returning buyers log in here before they order again. New customers create an account here, often right in the middle of checkout. It’s the doorway to the whole account experience… and right now, for most Divi WooCommerce stores, that doorway looks unfinished.

An off-brand, clunky login screen does two things you don’t want. It chips away at trust at the exact moment someone is about to spend money. And it adds friction to a step that should feel effortless.

Styling it isn’t about vanity. It’s about removing doubt at a revenue-critical moment.

First, where the login page actually lives

Before styling anything, it helps to know where this page comes from, because it’s not where people expect.

Your login and registration forms live on the WooCommerce My Account page. That single page is the hub for everything account-related: logging in, registering, viewing orders, managing addresses and payment methods, and editing account details. WooCommerce creates it automatically during setup and runs it through the woocommerce_my_account shortcode.

Here’s the part that catches people out. The My Account page serves its different sections through endpoints — URL-based sub-pages that WooCommerce generates and manages itself. They aren’t normal WordPress pages, they don’t exist individually in your page editor, and you can’t open them up and design them the usual way.

A few you’ll recognise:

your-site.com/my-account/ — the dashboard for logged-in users, or the login and registration forms for guests
your-site.com/my-account/lost-password/ — the password reset form
your-site.com/my-account/orders/ — the customer’s order history

That’s the whole reason styling this is trickier than styling a normal page. WooCommerce is generating these screens dynamically, so you can’t just drop a Divi module on them. Which brings us to the part most store owners miss.

Login or login + registration? It depends on a setting

When a guest visits your My Account page, what they see depends on one WooCommerce setting.

By default they may see only the login form. But you can also show a registration form right beside it, so new customers can create an account without leaving the page.

To turn the registration form on, go to WooCommerce → Settings → Accounts & Privacy, find the Account creation options, and tick “Allow customers to create an account on the My Account page.”

With that enabled, the login and registration forms appear together on the same screen. With it off, only the login form shows. Worth knowing before you style, because it changes what’s actually on the page.

It’s not just the login form (this is the part most people miss)

The login experience isn’t a single screen. As customers move through it, they can land on several:

The Login & Registration screen (login alone, or login + registration, per the setting above)
The Lost Password screen, when someone clicks “Lost your password?”
The Reset Password screen, after they follow the email link
The Password Reset Confirmation, once they’re done

On top of those, WooCommerce shows notifications throughout — “Invalid username or password”, “Check your email”, and so on. These aren’t a separate page; they appear inline, right on whichever screen triggered them.

Customers hit all of these at one point or another. Someone forgets their password… they land on the lost password screen. They click the email link… they’re on the reset screen. They finish… they see the confirmation.

If you only style the login form and forget the rest, your customer gets a polished front door and then walks into a series of unfinished rooms. The experience falls apart exactly when they need reassurance the most.

What Divi 5 can do on its own

Let’s be honest about where Divi 5 stands natively, because it’s better than it used to be, but it only goes so far.

Divi 5 includes a native Login module. It’s genuinely improved, with real styling control over fields, buttons, focus states, and layout. If all you need is a standalone login form somewhere on your site, it does a nice job.

But there’s a catch, and it’s a big one.

The native Login module only handles the login part. It can redirect users after they log in (to the same page or the WordPress admin area), but beyond that there are no further options without a code snippet. And it has no native way to display or style the registration form, the lost password form, or the password reset and confirmation screens.

So for everything beyond that single login form, you’re left with one native option: custom CSS.

The manual route: styling the screens with CSS

The honest native route here is to keep WooCommerce’s default output and target it with custom CSS. You add this under Divi → Theme Options → Custom CSS, or in your child theme’s stylesheet.

The CSS below is a complete starting point. It uses CSS variables at the top, so you can change a colour or size in one place and have it apply across the login, registration, and password screens. Read the comments, adjust the values to match your brand, and paste the whole thing in.

Get the Code!

/* CSS variables for easy styling across all WooCommerce account pages */
.woocommerce-account{

    /* Input text color.
       Change this to update the text color in all login, registration,
       and password reset fields. */
    --login-input-color: #000;

    /* Input padding.
       Format: top/bottom left/right */
    --login-input-padding: 10px 10px;

    /* Input text size. */
    --login-input-font-size: 14px;

    /* Input background color. */
    --login-input-background: #eee;

    /* Input border.
       Format: width style color */
    --login-input-border: 0px solid #000;

    /* Input corner rounding. */
    --login-input-border-radius: 4px;


    /* Input text color when the field is focused
       (clicked or selected). */
    --login-input-focus-color: #000;

    /* Input padding when focused. */
    --login-input-focus-padding: 10px 10px;

    /* Input text size when focused. */
    --login-input-focus-font-size: 14px;

    /* Input background color when focused. */
    --login-input-focus-background: #eee;

    /* Input border when focused. */
    --login-input-focus-border: 0px solid #000;

    /* Input corner rounding when focused. */
    --login-input-focus-border-radius: 4px;


    /* Button text color.
       Used for Login, Register, and Reset Password buttons. */
    --login-button-color: #fff;

    /* Button padding.
       Format: top/bottom left/right */
    --login-button-padding: 8px 20px;

    /* Button text size. */
    --login-button-font-size: 14px;

    /* Button background color. */
    --login-button-background: #20ad96;

    /* Button border.
       Format: width style color */
    --login-button-border: 0px solid #20ad96;

    /* Button corner rounding. */
    --login-button-border-radius: 6px;


    /* Button text color on hover
       (when the mouse is over the button). */
    --login-button-hover-color: #fff;

    /* Button padding on hover. */
    --login-button-hover-padding: 8px 20px;

    /* Button text size on hover. */
    --login-button-hover-font-size: 14px;

    /* Button background color on hover. */
    --login-button-hover-background: #20ad96;

    /* Button border on hover. */
    --login-button-hover-border: 0px solid #20ad96;

    /* Button corner rounding on hover. */
    --login-button-hover-border-radius: 6px;
}
/* Login Page -- Headings "Login/Register" */
/* Styles the Login heading on the WooCommerce My Account page.
   This rule only applies when the login form is displayed (guest users). */
.woocommerce-account:has(.woocommerce-form-login) h2 {

    /* Sets the heading size to 20px. Increase for larger headings. (usually inherit by Divi) */
    font-size: 20px;

    /* Aligns heading horizontally. Options: left, center, right. */
    text-align: left;

    /* Removes the space below the heading. Increase to add separation from the form. */
    margin-bottom: 0;

    /* Removes all internal spacing (top, right, bottom, left).
       Format: top right bottom left */
    padding: 0px 20px 0px 20px;

    /* Sets the heading color, usually inherit by Divi Theme.
       Can be changed to any HEX, RGB, or CSS color value. */
    color: #333;
}
/* Login Page -- If registration is enabled, styles both the Login and Register columns */
.woocommerce-account .woocommerce:has(.u-columns) .u-column1,
.woocommerce-account .woocommerce:has(.u-columns) .u-column2{

    /* Adds a border around each column.
       Format: width style color */
    border: 1px solid #666;

    /* Rounds the corners of each column container. */
    border-radius: 4px;
    /* Inner spacing on top */
    padding-top: 20px;
}
/* Login Page -- If registration is disabled, styles Login column */
.woocommerce-account .woocommerce:not(:has(.u-columns)):has(form.login){
     /* Adds a border around each column.
       Format: width style color */
    border: 1px solid #666;

    /* Rounds the corners of each column container. */
    border-radius: 4px;
    /* Inner spacing on top */
    padding-top: 20px;
}


/* Login Page -- Login form */
.woocommerce-account .woocommerce form.login{

   /* Adds a border around the login form.
      Set to 0px to hide the border. */
   border: 0px solid #cfc8d8;

   /* Rounds the corners of the login form container. */
   border-radius: 5px;

   /* Adds internal spacing between the form border
      and the form fields/content. */
   padding: 20px;
   /* Adds external spacing outside the form */
   margin: 0 0;
}

/* Login Page -- Register form (when registration is enabled) */
.woocommerce-account .woocommerce form.register{

   /* Adds a border around the registration form.
      Set to 0px to hide the border. */
   border: 0px solid #cfc8d8;

   /* Rounds the corners of the registration form container. */
   border-radius: 5px;

   /* Adds internal spacing between the form border
      and the form fields/content. */
   padding: 20px;
   /* Adds external spacing outside the form */
   margin: 0 0;
}

/* All pages form fields */
.woocommerce-account .woocommerce form.login .woocommerce-Input,
.woocommerce-account .woocommerce form.register .woocommerce-Input,
.woocommerce-account .woocommerce .woocommerce-ResetPassword .woocommerce-Input{
    color:var(--login-input-color);
    padding:var(--login-input-padding);
    font-size:var(--login-input-font-size);
    background:var(--login-input-background);
    border:var(--login-input-border);
    border-radius:var(--login-input-border-radius);
}
/* All login pages form fields focus (when clicked) */
.woocommerce-account .woocommerce form.login .woocommerce-Input:focus,
.woocommerce-account .woocommerce form.register .woocommerce-Input:focus,
.woocommerce-account .woocommerce .woocommerce-ResetPassword .woocommerce-Input:focus{
    color:var(--login-input-focus-color);
    padding:var(--login-input-focus-padding);
    font-size:var(--login-input-focus-font-size);
    background:var(--login-input-focus-background);
    border:var(--login-input-focus-border);
    border-radius:var(--login-input-focus-border-radius);
}
/* All login pages buttons */
.woocommerce-account .woocommerce form.login .woocommerce-button::after,
.woocommerce-account .woocommerce form.register .woocommerce-button::after,
.woocommerce-account .woocommerce .woocommerce-ResetPassword .woocommerce-button::after,
.woocommerce-account .woocommerce form.login .woocommerce-button::before,
.woocommerce-account .woocommerce form.register .woocommerce-button::before,
.woocommerce-account .woocommerce .woocommerce-ResetPassword .woocommerce-Button::before,
.woocommerce-account .woocommerce .woocommerce-ResetPassword .woocommerce-button::before{
    display: none !important; /* Get rid of the icons */
}
.woocommerce-account .woocommerce form.login .woocommerce-button,
.woocommerce-account .woocommerce form.register .woocommerce-button,
.woocommerce-account .woocommerce .woocommerce-ResetPassword .woocommerce-button,
.woocommerce-account .woocommerce .woocommerce-ResetPassword .woocommerce-Button{
    color:var(--login-button-color) !important;
    padding:var(--login-button-padding) !important;
    font-size:var(--login-button-font-size) !important;
    background:var(--login-button-background) !important;
    border:var(--login-button-border) !important;
    border-radius:var(--login-button-border-radius) !important;
}
/* All login pages buttons hover (when mouse over) */
.woocommerce-account .woocommerce form.login .woocommerce-button:hover,
.woocommerce-account .woocommerce form.register .woocommerce-button:hover,
.woocommerce-account .woocommerce .woocommerce-ResetPassword .woocommerce-button:hover,
.woocommerce-account .woocommerce .woocommerce-ResetPassword .woocommerce-Button:hover{
    color:var(--login-button-hover-color) !important;
    padding:var(--login-button-hover-padding) !important;
    font-size:var(--login-button-hover-font-size) !important;
    background:var(--login-button-hover-background) !important;
    border:var(--login-button-hover-border) !important;
    border-radius:var(--login-button-hover-border-radius) !important;
}

Where this starts to hurt

Here’s the honest part.

That CSS works, but it’s manual, screen by screen. You’re targeting WooCommerce’s HTML structure by hand, testing each state, and keeping it all consistent. The registration form, the lost password screen, the reset screen, the confirmation, the inline notifications… each needs its own attention.

And those password-recovery screens are the ones almost everyone gives up on. They’re awkward to even preview (you have to actually trigger a password reset to see them), so they quietly stay default. The result, for most stores, ends up being a styled login form and a trail of unfinished screens behind it.

If you’re comfortable with CSS and you only care about the login and registration view, the manual route is a perfectly reasonable place to stop. But if you want the whole authentication experience to feel finished, without writing and maintaining CSS for several separate screens, there’s a faster way.

The complete way: the My Account Login module

This is exactly the gap our Divi My Account Page plugin closes.

Starting with version 1.1.6, the plugin includes a new My Account Login module, built for Divi 5. Instead of styling one screen and patching the rest with CSS, it lets you design the entire authentication experience natively inside the Divi Builder… no code.

That means every screen, styled consistently:

Login & Registration — style the login and registration forms together, swap their order, control the gap between them, or stack them in a column. Three independent container levels (wrapper, content, and form) let you build clean card-style layouts with backgrounds, borders, and shadows.
Lost Password — styled independently, so the forgot-password step stays on-brand.
Reset Password — full control over the new password and confirm password fields and buttons.
Password Reset Confirmation — even the success message matches your design.
Notifications — styled globally, so every WooCommerce message that appears during login and recovery looks consistent, wherever it shows up.

You get dedicated control over headings, labels, helper text, form fields (including placeholder and focus states), buttons, links, and even the WooCommerce checkboxes… right down to separate styling for the checked and unchecked states of the Remember Me box.

Setup is simple. You add the My Account Login module to your WooCommerce My Account page, disable the default login output in the My Account Classic module so you don’t get two forms, and then style every screen visually. That’s it.

The honest pitch: Divi 5 lets you style the login form. The My Account Login module lets you style the whole journey — and that’s what actually makes the experience feel finished.

Pulling it all together

Your login and registration page is the gateway to your customer’s account. The account page itself is what’s behind that gate. Style one without the other, and the experience still feels broken somewhere.

If you haven’t polished the account dashboard side yet, that’s the natural next step, and we walk through it here: How to Customize the WooCommerce My Account Page in Divi.

Together, the two cover the full account experience your customers actually see… from the moment they log in to everything they do once they’re inside.

By Mariya Dimitrova

Mariya is a web designer and a co-founder of Powdi Themes and Powdi Studio. With over 10 years of experience working with WordPress and Divi, she focuses on creating beautiful, practical designs and helping others achieve the same. Mariya shares hands-on tutorials, tools, and insights to make building with Divi easier and more enjoyable.