---
title: My Account Overview
description: "The [DiviMerc My Account module](https://divimerc.com/modules/my-account/) lets you build and customize a WooCommerce customer account area in Divi, with eight child modules for managing orders, downloads, addresses, payment methods, and more. **Important Note:** - The My Account module must be enabled…"
url: "https://divimerc.com/docs/my-account/"
updated: "2026-10-19"
category: Modules
---

# My Account Overview

The [DiviMerc My Account module](https://divimerc.com/modules/my-account/) lets you build and customize a WooCommerce customer account area in Divi, with eight child modules for managing orders, downloads, addresses, payment methods, and more.

**Important Note:**

- The My Account module must be enabled under DiviMerc > Modules. The module must be used on the page assigned under WooCommerce > Settings > Advanced > My account page.
- Logged-out visitors don’t see the account area. Use the Login & Register module to display login and registration forms.

## Content Tab

The Content tab lets you manage account navigation, logout options, signed-out messages, and preview content.

### Account Elements

The My Account module supports eight child modules:

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-1.webp)

- Dashboard
- Orders
- Downloads
- Addresses
- Payment Methods
- Account Details
- View Order
- Custom Page

Each child module has its own settings, which are explained in the [Child Module Settings](#Child-Module-Settings) section below.

**Note:** View Order does not appear in the account menu. Customers open it by clicking View on an order in the Orders screen.

### Navigation

The Navigation section lets you control the account menu’s layout, visibility, and behavior.

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-2.webp)

- **Show Navigation:** Show or hide the account navigation menu.
  - **Layout:** Choose where the account navigation appears:
    - Navigation left
    - Navigation right
    - Navigation on top
  - **Mobile Menu:** Choose how navigation appears on smaller screens:
    - Stack above content
    - Collapse to a dropdown
    - Scroll sideways
  - **Mobile Menu Below:** Choose whether the mobile menu applies below 767px (phones) or 980px (phones and tablets).
  - **Collapsible Menu:** Allow the side navigation to collapse into a smaller menu. (Available with Navigation left or right when Show Menu Icons is enabled.)
    - **Start Collapsed:** Keep the navigation collapsed when the page first loads.
    - **Collapsed Width:** Adjust the width of the collapsed navigation.
  - **Sticky Navigation:** Keep the account navigation visible while scrolling.
    - **Sticky Offset:** Adjust the spacing from the top of the screen.
  - **Show Profile:** Show or hide the customer’s profile information in the navigation.
  - **Show Menu Icons:** Show or hide icons alongside the menu items.

### Logout Settings

The Logout Settings section lets you control the logout option in the account menu.

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-3.webp)

- **Show Log Out:** Show or hide the Log out option.
  - **Menu Name:** Customize the logout menu text.
  - **Menu Icon:** Choose an icon for the logout option.
  - **Pin To Bottom:** Keep the logout option at the bottom of the navigation menu.

### Signed Out Notice

The Signed Out Notice section controls what visitors see when they are not logged in.

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-4.webp)

- **Signed-Out Visitors:** Choose whether to display a message or hide the module.
  - **Signed-Out Message:** Customize the message shown to logged-out visitors. (Applies when Signed-Out Visitors is set to Show a message.)

### Builder Preview

The Builder Preview section lets you choose which account information appears in the Divi Builder.

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-5.webp)

- **Preview Content:** Choose between:
  - **Sample content:** Display example orders, downloads, addresses, and other account details for designing the module.
  - **My real account:** Preview information from your own logged-in account.

**Note:** Buttons and links in Sample content are for preview purposes and are not interactive. Test actual account actions on the live page.

**Background:** Add a background color, gradient, image, video, pattern, or mask to the module.

**Element Label:** Rename the module for easier identification in the Divi Builder. This label is only visible to you.

## Design Tab

The Design tab lets you customize the appearance of the account navigation, customer profile, messages, and other shared elements.

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-6.webp)

**Navigation:** Customize the account navigation's appearance. (Available when Show Navigation is enabled.)

**Profile Wrapper:** Style the container holding customer profile information. (Applies when Show Profile is enabled.)

**Avatar:** Customize the customer's profile image. (Applies when Show Profile is enabled.)

**Name:** Customize the customer's name typography. (Applies when Show Profile is enabled.)

**Email:** Customize the customer's email typography. (Applies when Show Profile is enabled.)

**Menu Items:** Style the account navigation items. (Available when Show Navigation is enabled.)

### Active Item

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-7.webp)

- **Indicator Color:** Customize the color of the indicator beside the currently selected menu item.

You can also customize the active menu item's appearance. (Available when Show Navigation is enabled.)

**Menu Icon:** Customize the navigation icons. (Applies when Show Navigation and Show Menu Icons are enabled.)

**Signed Out Message:** Style the message displayed to logged-out visitors. (Applies when Signed-Out Visitors is set to Show a message.)

**Empty State Card:** Customize the appearance of empty-state sections.

**Empty State Button:** Style buttons displayed in empty states.

**Notices:** Customize general account notices.

**Error Notice:** Customize the appearance of error messages.

**Sizing:** Adjust the width, height, and alignment of the module.

**Spacing:** Adjust the margin and padding around the module.

**Border:** Customize the border radius, style, width, and color.

**Box Shadow:** Add and customize shadow effects.

**Filters:** Apply visual filter effects to the module.

**Transform:** Adjust the module's scale, position, rotation, and more.

**Animation:** Add animations and customize their style, duration, delay, and other effects.

## Advanced Tab

The Advanced tab provides Divi’s additional controls, including custom CSS, conditions, visibility, and other advanced settings.

## Child Module Settings

Each child module controls a specific part of the My Account area and has its own content and design settings.

Let’s take a closer look at each one.

### Dashboard

The Dashboard child module displays the greeting, account statistics, quick links, and recent orders.

#### Content Tab

##### Elements

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-8.webp)

- **Enable Dashboard:** Enable or disable the Dashboard screen.
  - **Show in Menu:** Show or hide Dashboard in the account navigation.
    - **Menu Name:** Customize the Dashboard menu text.
    - **Menu Icon:** Choose an icon for the menu item.
- **Show Heading:** Show or hide the Dashboard heading.
  - **Heading Text:** Customize the heading text. When empty, the menu name is used.

##### Greeting

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-9.webp)

- **Show Greeting:** Show or hide the greeting.
  - **Greeting:** Customize the greeting text. Keep {display_name} in the text to show the customer’s name.
  - **Sub-heading:** Customize the text below the greeting.

##### Statistics

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-10.webp)

- **Show Statistics:** Show or hide the statistics cards.
  - **Total Orders:** Show the total number of orders.
  - **Completed Orders:** Show the number of completed orders.
  - **Total Spent:** Show the total amount spent.
  - **Orders In Progress:** Show the number of orders still in progress.
  - **Products Purchased:** Show the number of products purchased.
  - **Downloads Available:** Show the number of available downloads.

##### Blocks

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-11.webp)

- **Show Quick Links:** Show or hide the quick link cards.
- **Show Recent Orders:** Show or hide the recent orders table.
  - **Recent Orders Shown:** Set how many recent orders appear.
- **Show Next Step:** Show or hide the next step block.

##### Quick Links

The Quick Links section lets you add shortcut cards to the Dashboard, helping customers quickly access different account screens or other pages. You can add, remove, and rearrange these cards. (Available when **Show Quick Links** is enabled.)

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-12.webp)

Each card has the following settings:

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-13.webp)

- **Enable Card:** Show or hide the shortcut card.
- **Links To:** Choose where customers go when they click the card:
  - Orders
  - Downloads
  - Addresses
  - Payment Methods
  - Account Details
  - Log Out
  - Custom Link
- **Link URL:** Enter the page URL you want the card to open. (Available when Links To is set to Custom Link.)
- **Title:** Customize the card title. When empty, the selected destination's name is used.
- **Description:** Add a short description below the card title.
- **Icon:** Choose an icon for the card.

##### Order

- **Menu Position:** Set the Dashboard's position in the account menu. Lower numbers appear first, while 0 keeps WooCommerce's default order.

In the content tab, you will also find Background and Element Label settings.

#### Design Tab

**Heading:** Customize the screen heading. (Applies when Show Heading is enabled.)

**Greeting:** Customize the greeting and sub-heading typography.

**Statistics:** Customize the statistics cards, values, and labels.

##### Quick Links

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-14.webp)

- **Columns:** Choose how many quick link cards appear in each row (2, 3, or 4).
- **Icon Position:** Choose where the icon appears on the card.
- **Icon Color:** Customize the color of the quick link icons.
- **Icon Size:** Adjust the size of the icons.

You can also customize the title, description, background, border, box shadow, and spacing of the quick link cards.

**Recent Orders:** Customize the recent orders section.

##### Orders Table

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-15.webp)

- **Border Color:** Customize the table's border color.
- **Corner Radius:** Adjust the roundness of the table's corners.
- **Row Hover Color:** Set the background color when hovering over a table row.

You can also customize the header row, header background, row text, and cell spacing.

**Status Badge:** Customize the order status badge text and shape.

**Status Colors:** Set the badge background and text color for each order status: Default, Processing, Completed, On Hold, Cancelled, Failed, and Refunded. These colors apply to the Dashboard only.

**Order Button:** Customize the order button text, background, border, and spacing.

**Next Step:** Customize the next step block.

In the design tab, you will also find settings like sizing, spacing, border, box shadow, filter, transform and animation.

### Orders

The Orders child module displays the customer’s order history.

#### Content Tab

##### Elements

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-16.webp)

- **Enable Orders:** Enable or disable the Orders screen.
  - **Show in Menu:** Show or hide Orders in the account navigation.
    - **Menu Name:** Customize the Orders menu text.
    - **Menu Icon:** Choose an icon for the menu item.
- **Show Heading:** Show or hide the Orders heading.
  - **Heading Text:** Customize the heading text. When empty, the menu name is used.
- **Orders Per Page:** Set how many orders appear per page (1–100). Leave empty or enter 0 to use WooCommerce's default.
- **Show Pagination:** Show or hide pagination controls.
  - **Pagination Style:** Choose how customers navigate between pages:
    - **Previous / Next:** Display Previous and Next buttons.
    - **Numbered:** Display numbered page links.
- **Mobile Layout:** Choose how orders appear on phones:
  - **Keep the table:** Display the standard orders table.
  - **Cards on phones:** Display each order as a separate card.
- **View Button:** Show or hide the button for viewing individual orders.
- **Pay Button:** Show or hide the payment button. (Appears only for orders with Pending payment or Failed status.)
- **Cancel Button:** Show or hide the cancellation button. (Appears only when WooCommerce allows an order to be canceled.)
- **Show Empty State:** Show or hide the message displayed when no orders are available.
  - **Empty Message:** Customize the no-orders message.

##### Order

- **Menu Position:** Set the Orders screen's position in the account menu. Lower numbers appear first, while 0 keeps WooCommerce's default order.

You will also find Background settings to customize the module's background and Element Label to rename it for easier identification in the Divi Builder.

#### Design Tab

**Heading:** Customize the screen heading. (Applies when Show Heading is enabled.)

**Table:** Customize the table header, rows, and borders.

**View Button:** Customize the View button text, background, border, and spacing.

**Pay Button:** Customize the Pay button text, background, border, and spacing.

**Cancel Button:** Customize the Cancel button text, background, border, and spacing.

**Status Badge:** Customize the order status badge text and shape.

**Status Colors:** Customize the badge background and text colors for each order status. These colors apply to the Orders screen only.

**Pagination Bar:** Customize the pagination area. (Applies when Show Pagination is enabled.)

**Numbered Pagination:** Customize the numbered page links.

**Pagination Button:** Customize the Previous and Next buttons. (Applies when Pagination Style is set to Previous / Next.)

In the design tab, you will also find settings like sizing, spacing, border, box shadow, filter, transform and animation.

### Downloads

The Downloads child module lists the downloadable products the customer has purchased.

#### Content Tab

##### Elements

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-17.webp)

- **Enable Downloads:** Enable or disable the Downloads screen.
  - **Show in Menu:** Show or hide Downloads in the account navigation.
    - **Menu Name:** Customize the Downloads menu text. When empty, the default name is used.
    - **Menu Icon:** Choose an icon for the menu item.
- **Show Heading:** Show or hide the Downloads heading.
  - **Heading Text:** Customize the heading text. When empty, the menu name is used.
- **Show Empty State:** Show or hide the message displayed when there are no downloads.
  - **Empty Message:** Customize the no-downloads message. When empty, “No downloads available yet.” is shown.

##### Order

- **Menu Position:** Set the Downloads screen's position in the account menu. Lower numbers appear first, while 0 keeps WooCommerce's default order.

In the content tab, you will also see background and element label settings.

#### Design Tab

**Heading:** Customize the screen heading. (Applies when Show Heading is enabled.)

**Table:** Customize the table header, rows, and borders.

**Download Button:** Customize the Download button text, background, border, and spacing.

In the design tab, you will also find settings like sizing, spacing, border, box shadow, filter, transform and animation.

### Addresses

The Addresses child module displays the customer’s billing and shipping addresses and their edit forms.

#### Content Tab

##### Elements

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-18.webp)

- **Enable Addresses:** Enable or disable the Addresses screen.
  - **Show in Menu:** Show or hide Addresses in the account navigation.
    - **Menu Name:** Customize the Addresses menu text. When empty, the default name is used.
    - **Menu Icon:** Choose an icon for the menu item.
- **Show Heading:** Show or hide the Addresses heading.
  - **Heading Text:** Customize the heading text. When empty, the menu name is used.
- **Show Billing Address:** Show or hide the billing address.
- **Show Shipping Address:** Show or hide the shipping address.
- **Show Intro Text:** Show or hide the text above the addresses.

##### Text

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-19.webp)

- **Intro Text:** Customize the text above the addresses. (Applies when Show Intro Text is enabled.)
- **Billing Address Title:** Customize the billing address heading. When empty, “Billing address” is shown.
- **Shipping Address Title:** Customize the shipping address heading. When empty, “Shipping address” is shown.
- **Edit Link Text:** Customize the Edit link text.

##### Order

- **Menu Position:** Set the Addresses screen's menu order. Lower numbers appear first; 0 keeps the default order.

You will also see background and element label settings in the content tab.

#### Design Tab

**Heading:** Customize the screen heading. (Applies when Show Heading is enabled.)

**Intro Text:** Customize the intro text typography.

**Address Cards:** Customize the address card background, border, spacing, and text.

##### Form

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-20.webp)

- **Placeholder Text:** Customize the placeholder text color.
- **Field Focus Border:** Set the field border color when selected.
- **Field Focus Ring:** Customize the focus ring color around the selected field.

You can also customize the form's field labels, text, background, border, spacing, and submit button styling.

In the design tab, you will also find settings like sizing, spacing, border, box shadow, filter, transform and animation.

### Payment Methods

The Payment Methods child module displays the customer’s saved payment methods.

#### Content Tab

##### Elements

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-21.webp)

- **Enable Payment Methods:** Enable or disable the Payment Methods screen.
  - **Show in Menu:** Show or hide Payment Methods in the account navigation.
    - **Menu Name:** Customize the Payment Methods menu text. When empty, the default name is used.
    - **Menu Icon:** Choose an icon for the menu item.
- **Show Heading:** Show or hide the Payment Methods heading.
  - **Heading Text:** Customize the heading text. When empty, the menu name is used.
- **Show Add Method Button:** Show or hide the Add payment method button.
- **Show Empty State:** Show or hide the message displayed when there are no saved methods.
  - **Empty Message:** Customize the no-saved-methods message.

##### Order

- **Menu Position:** Set the Payment Methods screen's menu order. Lower numbers appear first; 0 keeps the default order.

In the content tab, you will also see background and element label settings.

#### Design Tab

**Heading:** Customize the screen heading. (Applies when Show Heading is enabled.)

**Table:** Customize the table header, rows, and borders.

**Delete Button:** Customize the Delete button text, background, border, and spacing.

**Make Default Button:** Customize the Make default button text, background, border, and spacing.

**Add Method Button:** Customize the Add payment method button text, background, border, and spacing.

In the design tab, you will also find settings like sizing, spacing, border, box shadow, filter, transform and animation.

### Account Details

The Account Details child module displays the form customers use to update their name, email, and password.

#### Content Tab

##### Elements

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-22.webp)

- **Enable Account Details:** Enable or disable the Account Details screen.
  - **Show in Menu:** Show or hide Account Details in the account navigation.
    - **Menu Name:** Customize the Account Details menu text. When empty, the default name is used.
    - **Menu Icon:** Choose an icon for the menu item.
- **Show Heading:** Show or hide the Account Details heading.
  - **Heading Text:** Customize the heading text. When empty, the menu name is used.
- **Show Password Change:** Show or hide the password change fields.
  - **Show Reveal Icon:** Show or hide the icon that reveals the password.

##### Order

- **Menu Position:** Set the Account Details screen's menu order. Lower numbers appear first; 0 keeps the default order.

You will also see background and element label settings options in the content tab.

#### Design Tab

**Heading:** Customize the screen heading. (Applies when Show Heading is enabled.)

**Form:** Customize the form labels, fields, and submit button.

**Password Section:** Customize the password fields area and its heading. (Applies when Show Password Change is enabled.)

In the design tab, you will also find settings like sizing, spacing, border, box shadow, filter, transform and animation.

### View Order

The View Order child module displays a single order in full, including items, totals, and addresses. Customers open it by clicking View on the Orders screen, so it has no menu options.

#### Content Tab

##### Elements

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-23.webp)

- **Enable View Order:** Enable or disable the View Order screen.
- **Show Heading:** Show or hide the View Order heading.
  - **Heading Text:** Customize the heading text.
- **Show Downloads Table:** Show or hide the downloads included in the order.
- **Show Customer Details:** Show or hide the billing and shipping details.

##### Order

- **Menu Position:** Set the screen's menu order. Lower numbers appear first; 0 keeps the default order. (View Order does not appear in the account menu.)

You will also get background and element label settings.

#### Design Tab

**Heading:** Customize the screen heading. (Applies when Show Heading is enabled.)

**Section Headings:** Customize the headings for each order section.

**Table:** Customize the order table header, rows, and borders.

**Table Button:** Customize the buttons inside the order table.

**Order Product Name:** Customize the product name typography.

**Order Prices:** Customize the price typography.

**Order Totals:** Customize the subtotal, shipping, and total rows.

**Variation Label:** Customize the variation label typography.

**Variation Value:** Customize the variation value typography.

**Downloads Table Product Name:** Customize the product name in the downloads table. (Applies when Show Downloads Table is enabled.)

**Downloads Table Text:** Customize the other text in the downloads table. (Applies when Show Downloads Table is enabled.)

**Address:** Customize the billing and shipping address text. (Applies when Show Customer Details is enabled.)

**Status Line:** Customize the order number, date, and status line.

In the design tab, you will also find settings like sizing, spacing, border, box shadow, filter, transform and animation.

### Custom Page

The Custom Page child module lets you add your own screen to the My Account area. To add it, open Account Elements in the main My Account module, click Add Dashboard, and select Custom Page.

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-24.webp)

#### Content Tab

##### Elements

![](https://divimerc.com/wp-content/uploads/2026/10/my-account-25.webp)

- **Enable Screen:** Enable or disable the Custom Account screen.
  - **Show in Menu:** Show or hide the screen in the account navigation.
    - **Menu Name:** Customize the menu text. The default is Custom.
    - **Menu Icon:** Choose an icon for the menu item.
- **Show Heading:** Show or hide the screen heading.
  - **Heading Text:** Customize the heading text. When empty, the menu name is used.
- **Content Type:** Choose what to display on the custom screen:
  - **Content:** Add your own content using the text editor.
    - **Content Title:** Add a title for the custom content.
    - **Content:** Add text, images, links, or other content.
  - **Divi Library Layout:** Display a saved Divi Library layout.
    - **Layout:** Select the layout you want to display.
- **URL Slug:** Set the custom screen's URL path. For example, entering rewards creates /my-account/rewards/. Leave empty to generate it from the Menu Name.

**Note:** Each custom screen needs a unique URL slug. Changing the slug, or the Menu Name when no slug is set, changes the screen's URL and may break existing links.

##### Order

- **Menu Position:** Set the Custom Account screen's menu order. Lower numbers appear first; 0 keeps the default order.

In the content tab, you will also see background and element label settings.

#### Design Tab

**Heading:** Customize the screen heading. (Applies when Show Heading is enabled.)

**Content Title:** Customize the content title typography.

**Content Body:** Customize the content text typography.

**Body:** Customize the content area background, border, and spacing.

In the design tab, you will also find settings like sizing, spacing, border, box shadow, filter, transform and animation.

## Need Help?

If you have any questions or need assistance, contact our support team at support@wprio.com.