Overview #
Divi My Account Page 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.
Understanding “Before” and “After” Content Sections #
One of the most powerful features of the plugin is the ability to add custom Divi layouts before or after specific account endpoints.
For example, you can add:
• Promotional banners
• Dashboard cards
• Welcome sections
• Custom notices
• Extra buttons
• Custom layouts built with Divi
These layouts are added from the WordPress admin area:
Go to:
Divi My Account Page → Choose an Endpoint
Inside each endpoint settings panel, you can load Divi Library items into:
• Before Content
• After Content
You can insert:
• Sections
• Rows
• Modules
• Full layouts from the Divi Library
Important About the Visual Builder Preview #
Inside the Divi Visual Builder, the “Before” and “After” content areas appear only as placeholders.
This is intentional and helps keep the builder faster and lighter.
Your actual imported Divi layouts will still appear correctly on the real front-end account page.
My Account Classic Module Settings #
Content Tab #
Inside the Content tab 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
Design Tab Options #
Layout Settings
You can:
• Adjust spacing between navigation and content
• Enable or disable equal column heights
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
