Overview #
Starting with version 1.1.6, Divi My Account Page includes a brand-new module called My Account Login.
This module allows you to fully customize the WooCommerce login and registration experience using Divi.
With the My Account Login module, you can style:
• Login/Registration page
• Lost Password page
• Reset Password page
• Password Reset Confirmation page
Instead of relying on the default WooCommerce styling, you can now create a login experience that matches the rest of your website.
Before You Start #
Please make sure you are using:
Divi My Account Page v1.1.6 or later #
If you are using an older version of the plugin, update it before following this guide.
Adding the My Account Login Module #
The My Account Login module should be placed on your WooCommerce My Account page.
Usually this page is:
yourdomain.com/my-account/
Steps #
1. Open your WooCommerce My Account page with the Divi Builder
2. Add the My Account Login module
3. Place it above or below the My Account Classic module
4. Save the page
Important: Disable the Default WooCommerce Login Output #
If you use the My Account Login module, you must disable the default WooCommerce login output inside the My Account Classic module.
Otherwise both login forms may appear on the page.
Steps #
1. Open the My Account Classic module
2. Go to the Content tab
3. Enable: Disable Login Page
4. Save the page
This allows the custom login form from the My Account Login module to be displayed instead of the default WooCommerce version.
What Can Be Styled? #
The My Account Login module includes dedicated styling settings for:
• Login & Registration
• Lost Password
• Reset Password
• Password Reset Confirmation
• Notifications
Each screen can be styled independently, while Notifications are styled globally and applied across all authentication screens.
For example, you can use different:
• Layouts
• Backgrounds
• Borders
• Typography
• Buttons
• Messages
for the Login & Registration screen than for the Lost Password or Reset Password screens.
Login & Registration Screen #
When customer registration is enabled in WooCommerce, the Login and Registration forms are displayed together on the same page.
When registration is disabled, only the Login form is displayed.
The My Account Login module provides dedicated styling options for this entire screen.
Layout Settings #
Control the overall structure of the Login & Registration area.
Available options include:
• Login / Registration gap
• Flex direction (swap the places of login and register forms and/or have them in a column)
• Equalize column heights
These settings make it easy to create different layouts depending on your design needs.
Login & Registration Containers #
The Login & Registration screen includes three different container levels that can be styled independently.
Understanding the difference between them will help you achieve the exact layout you want.
Login Page Wrapper #
The Login Wrapper is the outermost container of the Login & Registration screen.
It includes:
• Login heading
• Registration heading
• Notices and messages
• Login form
• Registration form
Think of this as the wrapper around the entire Login & Registration area.
You can style:
• Background
• Spacing
• Border
• Box shadow
This is useful when you want to place the entire login area inside a styled section or card.
Login Page Content #
The Login Page Content container applies separately to the Login and Registration sections.
Each container includes:
• Heading
• Form
but excludes:
• Notices and messages
For example:
If registration is enabled, the Login form and Registration form each receive their own Login Page Content container.
This makes it possible to create two separate card-style boxes side by side.
You can style:
• Background
• Spacing
• Border
• Box shadow
A common use case is adding a border, background, and shadow to create separate Login and Registration cards.
Login Page Form #
The Login Page Form container applies only to the form itself.
Unlike Login Page Content, it does not include the heading.
This matches WooCommerce’s default structure, where only the form is enclosed inside a bordered box.
You can style:
• Background
• Spacing
• Border
• Box shadow
In addition to the standard styling options, the Login Form container includes: Form Row Gap
This option controls the spacing between the individual form rows.
Examples include:
• Form fields
• Helper text
• Checkboxes
• Buttons
Increasing the Form Row Gap creates more breathing room between elements, while reducing it creates a more compact form layout.
WooCommerce typically displays a border around both the Login and Registration forms.
If you prefer a cleaner design and want to remove this border:
Go to: Login Page Form → Login Form Border
and set the border width to: 0px
This removes the default form border and allows you to create your own styling using the Login Wrapper or Login Page Content containers instead.
Headings #
Customize the Login and Registration headings.
Available options include:
• All Font related styling
• Spacing
Labels & Text #
Customize:
• Form labels
• Description text
• Helper text
including:
• Typography
• Colors
• Spacing
Form Fields #
Style all input fields, including:
• Username
• Email
• Password
Available options include:
• Background color
• Text color
• Placeholder color
• Borders
• Border radius
• Padding
• Focus state styling
Buttons #
Customize:
• Background color
• Text color
• Typography
• Border radius
• Padding
• Sizing
• Alignment
• Hover effects
for both the Login and Registration buttons.
Checkboxes #
The module includes dedicated styling options for WooCommerce checkboxes.
This allows you to customize:
Checkbox Box
• Background color
• Border color
• Border width
• Border radius
Checkbox Tick
• Tick color
• Tick size
Checkbox Label
• Typography
• Color
• Spacing
Checkbox States
You can style both:
• Unchecked state
• Checked state (through Divi responsive options)
independently.
This is particularly useful for the Remember Me checkbox on the login form.
Lost Password Screen #
The Lost Password screen is displayed when a customer clicks:
Lost your password?
from the Login form.
This screen can be styled independently from the Login & Registration screen.
Available styling options include:
• Form container
• Heading
• Description text
• Username / Email field
• Submit button
Reset Password Screen #
After a customer follows the password reset link sent by WooCommerce, they are taken to the Reset Password screen.
This screen includes:
• New Password field
• Confirm Password field
• Reset Password button
All elements can be styled independently.
Available styling options include:
• Form container (wrapper)
• Headings
• Form fields
• Buttons
• Typography
• Spacing
Password Reset Confirmation Screen #
After successfully resetting their password, WooCommerce displays a confirmation message.
The My Account Login module allows you to customize:
• Confirmation message styling
• Text appearance
• Backgrounds
• Borders
• Padding
• Success notices
independently from the other authentication screens.
Notifications #
WooCommerce displays various notifications throughout the authentication process.
Examples include:
• Invalid username or password
• Registration errors
• Password reset errors
• Password reset success messages
• Confirmation messages
Unlike the other styling sections, Notifications are styled globally and apply across all authentication screens.
This includes:
• Login & Registration
• Lost Password
• Reset Password
• Password Reset Confirmation
Notification Styling Options #
You can customize:
• Background color
• Text color
• Borders
• Border radius
• Padding
• Margin
• Box shadow
• Typography
This allows you to create a consistent appearance for all WooCommerce messages displayed during the login and password recovery process.
Useful Design Tips #
How to Center a Heading #
Open the heading settings for the screen you are styling and set:
Text Alignment → Center
This will center the heading.
How to Create a Full-Width Button #
Open the button settings and set:
Width → 100%
This will make the button span the full width of the form.
How to Create a Card-Style Layout #
A popular design approach is to create a card-style layout by:
• Adding a background color
• Increasing padding
• Adding a border radius
• Applying a subtle box shadow
This helps visually separate the form from the page background and creates a more modern appearance.
How to Style the Remember Me Checkbox #
The module includes separate controls for:
• Checkbox box styling
• Checkbox tick styling
• Checkbox label styling
• Unchecked state checkbox color
• Checked state (through Divi responsive options)
This gives you complete control over the appearance of the Remember Me checkbox.