Intro

The “My Account” page is an essential part of any store. When your clients place their orders, they – in most cases – need an account page to track the orders, download invoices, download digital products and so on.

Before you start

Your website must have an account page. When you install WooCommerce, it creates that page for you. Basically, it is a normal page under your admin dashboard -> Pages. If you don’t have it, go and create one.

The content of the “my account” page is just a simple shortcode [woocommerce_my_account]. we will keep that page as it is and will not use Divi builder on it. Divi Library is the place to build the layout.

WooCommerce My account page
My account page

Build the “my account” layout

Now, let’s build the layout.

Get started

  1. Go to your admin dashboard -> Divi -> Divi Library.

  2. At the very top, click “Add new”, a new layout popup will open, here you can set the layout name and the layout type.

    You can name the layout whatever you want but make sure you select “Layout” as the layout type. and then, click the “Submit” button.

  3. Divi Builder will open, you can use the back-end builder or the front-end build, it’s completely up to you.

    Now, you have access to all Divi’s own modules and our custom modules for WooCommerce. Design your page with the sections and columns structure as you desire just like building any other Divi layout.

“My Account” modules

This is a list of the essential modules you need to add to your layout.

1- Woo Notices

This is a very important module to add to every WooCommerce layout you build using the WooCommerce Builder plugin. This module displays a variety of messages from WooCommerce like when a product is added to the cart or there is no enough stock of a specific product and so on.

You can place this module anywhere you want but it is recommended to add it to the top of the layout so it’s very obvious for your clients.

2- Woo Page Title

This module will display the page title. You don’t have to use this module, you can use a text module and add a custom title to your page.

3- Woo Breadcrumb

The breadcrumb module indicates the current page’s location, usually, it’ll be something like that “Home / Current Page”, this module is not required.

4- Woo My Account

This module will display the account page tabs that have all the information and actions the user will need, it includes the orders, downloads, the user addresses, and the account details.

Apply the “My Account” layout

After creating the layout, go to your admin dashboard -> Wc Builder -> My Account tab -> My Account Layout.

Select the layout you just created from the drop-down menu and save the changes.