Account / Login Module
The Account / Login module lets you build polished WooCommerce customer account, login, and registration experiences directly in Divi. Instead of relying only on the basic WooCommerce My Account appearance, you can control how customers move through their account, what appears on the Dashboard, and how each area matches the rest of your site.
It combines normal WooCommerce account pages with statistics, Quick Links, Recent Orders, Downloads, Purchased Products, Custom Tabs, flexible layouts, responsive navigation, smooth account transitions, and focused Design controls. WooCommerce continues to manage customer data, account actions, and authentication.
Adding the Account / Login Module
Open the page where you want to show the customer account experience in the Divi Visual Builder.
Add the Account / Login module.
Enable the Account Area, Login / Register area, or both, then choose the layouts and Dashboard features you need.
The two areas can be used independently. For example, create a dedicated Login/Register page and place an account-only module elsewhere, or place introductory content in one Divi column and the forms in another.
Account Area
Logged-in customers can use a complete WooCommerce account area with the Dashboard, Orders, Downloads, Addresses, Payment Methods, Account Details, and Log Out. These are the normal WooCommerce account destinations, presented inside the layout and styling you create with the module.
Use Navigation Items to decide which destinations appear and in what order. Labels and icons can be changed where supported, so the menu can follow your store's language and visual style without changing the underlying account functions.
Customer Dashboard
WooCommerce normally keeps its account Dashboard very simple and basic, a regular user would be lost on how to customize it so that it matches their brand identity and overall website look.
Account / Login can turn it into a more useful customer overview by combining the information and shortcuts that matter to your store while providing a bunch of design and customization options right inside the Divi 5 Visual builder.
Statistics can show metrics such as orders, unique products purchased, spending, refunds, reviews, downloads, Wishlist items, saved payment methods, and other available customer totals. Reorder the cards and adjust their labels to suit your account experience.
Quick Links provide direct access to Orders, Billing Address, Shipping Address, Payment Methods, Account Details, Downloads, and Wishlist where available. Titles, optional descriptions, and icons can be customized.
Recent Orders places an order summary on the Dashboard with a link to the full Orders area.
Downloads surfaces recent downloadable purchases and links customers to all available downloads.
Purchased Products displays previously purchased items through the DEM product presentation system, with controls for the number of products and card styling.
Account Navigation
Navigation Items use a sortable list, so you can drag destinations into the preferred order, change visible labels, choose icons, hide items, and add removed items back later. The real WooCommerce endpoints remain underneath the presentation, preserving normal account URLs and actions.
Account tabs added through WooCommerce's standard My Account endpoint system can also be displayed automatically. Compatibility depends on how each extension builds its account content, so extensions with proprietary routing may keep their normal page-loading behavior.
When Dynamic Navigation is enabled and the content is compatible, customers can switch between account areas without a full page reload. Transitions can be customized, the real WooCommerce URL stays in the browser, and Back and Forward navigation continues to work. Links fall back to a normal page load when an action or extension requires it.
Custom Tabs
Custom Tabs add store-specific areas to the customer account. Position them before or after the normal WooCommerce items and give each tab its own title and icon.
Custom Content can include a content title, rich description or other content, an optional button, and shortcodes from compatible providers. This works well for membership information, rewards, support, tutorials, customer resources, or account-specific instructions.
Divi Library Layout uses an entire saved Divi layout as the tab content. Use it when a tab needs a composed design, such as a support area, learning resources, member downloads, or a detailed rewards page.
Login & Registration
For logged-out visitors, choose Tabs, Side by Side, or Stacked. Tablet and phone layouts can be adjusted separately, so a wider desktop presentation can become a simpler tabbed or stacked arrangement on smaller screens.
The forms retain Login, Registration, Remember Me, and Lost Password. Registration follows your WooCommerce account settings, while WooCommerce and WordPress continue to handle authentication.
Because the normal WooCommerce Login/Register hooks are preserved, compatible extensions can add social login, CAPTCHA, custom registration fields, or consent fields. Availability and placement depend on the extension.
Account Layouts
Choose Sidebar Left, Sidebar Right, Top Navigation, or Compact / Stacked. Sidebar layouts create a familiar account portal, Top Navigation suits wider pages, and Compact / Stacked works well in narrow areas. Sidebar and content sizing can be refined, and Sticky Sidebar can keep eligible desktop or tablet navigation visible while the customer scrolls.
Mobile Navigation
On smaller screens, account navigation can use a Dropdown, Accordion, or Stacked layout. Style the mobile trigger, current-item icon, indicator, and open or closed icons to match the site.
Here's a quick example of Account Area with Dropdown Navigation Style.
Design & Styling
The Design tab provides focused sections for the Account Container, Profile, Navigation, Dashboard, Tables, Forms, Custom Tabs, Login/Register area, Woo Notices, and Buttons. Depending on the element, you can adjust colors, typography, spacing, borders, sizing, icons, table presentation, form fields, and buttons.
Set the main account layout and container first, then style only the Dashboard features, navigation states, forms, and content areas that are enabled.
Builder Preview
Builder Preview can display Account, Login / Register, or Both inside the Visual Builder. Sample customer information, orders, forms, downloads, and products are used where appropriate, letting you design logged-in and logged-out states without repeatedly changing authentication state.
WooCommerce Compatibility
Account / Login keeps WooCommerce's normal account endpoints, forms, registration settings, authentication, and account actions. Extensions that use WooCommerce's standard account endpoints and form hooks can integrate with the module, but compatibility is not guaranteed for every plugin or for extensions that replace the normal account flow.
Last updated
Was this helpful?