Account Section Templates

Divi BodyCommerce allows you to customise the account section templates of WooCommerce using the Divi builder and our custom modules. 

Below is a video that demonstrates how to use the account section templates in BodyCommerce.

NB: Do not create a Divi section or design on the actual page itself - this needs to be left blank with just the WooCommerce shortcode. Any customisations should be done in the library and assigned to our settings. This may result in styling issues.

Understanding the account section:

The first step is to understand how the account section is set up below is a screenshot of the default account section.

  1. Account Navigation (DB Acc Navigation)
  2. Sidebar (recommend to remove this)
  3. Account Dashboard endpoint (DB Acc Welcome Message and a Divi text module)
When you click on orders the only thing that will change would be the account dashboard endpoint to be the orders endpoint, the account navigation and sidebar would stay the same. So what you need to understand is that the navigation will be on all the pages.

Steps to create a custom account section:

Before starting you need to think about how you want the account section to look. You can have the navigation on top or to the left of all the "endpoints". Other than the position, you then need to create different layouts for each endpoint on your store, these are:

  1. Account Navigation Layout: Here you can either create the endpoint links manually by either a text module or the divi fullwidth menu module or you can use our module (DB Acc Navigation) which will automatically output these links as text or buttons.

  2. Account Dashboard Layout: This layout will be the first section the customer will see. You can add a welcome text, recent orders or anything you like really. Modules such as DB Acc Avatar will show the user's image or DB Acc Welcome Message will allow you to add a custom text before user's name.

  3. Account Orders Page Layout: Shows the orders - use the module "DB Acc Orders" to display this.

  4. Account Edit Account Layout: Shows the section to edit the account details "DB Acc Edit Account".

Still need help? Contact Us Contact Us