Overview #
Divi My Account Page Lite comes with a module called My Account Classic.
This module allows you to:
• Style the WooCommerce account navigation (endpoints/tabs)
• Customize tables, forms, notifications, buttons, and content areas
• Adjust the layout and spacing of the account page
• Add custom Divi content before or after individual account sections
Important — Where to Place the Module #
The My Account Classic module must be placed on the page assigned as your WooCommerce My Account page.
Usually this is:
yourdomain.com/my-account/
This is important because WooCommerce loads all account endpoints under that main URL, for example:
• /my-account/orders/
• /my-account/downloads/
• /my-account/edit-account/
• /my-account/custom-endpoint/
If the module is placed on another page, the endpoint navigation will not work correctly.
How to Add the My Account Classic Module #
1. Open your WooCommerce My Account page with the Divi Builder
2. Add the My Account Classic module
3. Save the page
You can now style the entire account experience visually with Divi.
My Account Classic Module Settings #
Content Tab – Divi 4 #
Inside the Content tab in Divi 4 you can:
Navigation Breakpoint
Choose the exact screen width where the account navigation switches to mobile layout.
Endpoint Preview
Preview different WooCommerce endpoints directly inside the Visual Builder while styling.
For example:
• Dashboard
• Orders
• Downloads
• Account Details
Custom endpoints
Background
Set a background for the entire account module.
This background affects both:
• Navigation area
• Content area
Content Tab – Divi 5 #
Inside the Content tab in Divi 5 you can:
Content Preview
Preview different WooCommerce endpoints directly inside the Visual Builder while styling.
For example:
• Dashboard
• Orders
• Downloads
• Account Details
Custom endpoints
Design Tab Options #
Layout Settings
You can:
• Adjust spacing between navigation and content (Divi 4 and 5)
• Enable or disable equal column heights (Divi 4 and 5)
• Set the Responsive Breakpoint – Choose the exact screen width where the account navigation switches to mobile layout (Divi 5)
Style the overall navigation area:
• Background
• Width
• Padding
• Borders
• Box shadows
You can also style individual navigation items:
• Active state
• Hover state
• Icon size
• Typography
• Spacing
• Borders
• Box shadows
Style the general content area:
• Text styles
• Padding
• Backgrounds
• Box shadows
These styles apply to all account endpoints.
WooCommerce tables appear in areas such as:
• Orders
• Downloads
You can customize:
• Table borders
• Backgrounds
• Row borders
• Header styling
• Alternating row colors
• Cell padding
• Buttons
Notifications appear when no content exists yet.
Examples:
• “No orders yet”
• “No downloads available”
You can style:
• Borders
• Backgrounds
• Typography
• Padding
• Buttons
• Box shadows
Forms appear in areas such as:
• Account Details
• Address forms
You can customize:
• Form backgrounds
• Labels
• Input fields
• Buttons
• Borders
• Padding
The module also supports standard Divi options such as:
• Transform
• Animation
• Sizing
• Spacing
