COMPLEXITY

Easy

TIME

10 Minutes

ASSUMPTIONS

  • Basic knowledge on Divi and WooCommerce.
  • Divi and WooCommerce are already installed and configured.
  • You have some products loaded into WooCommerce.

 

VERSIONS

Divi 4.9.3
WooCommerce 5.1

Another day, another awesome tutorial from the team here at Divi Engine. In this tutorial, we are going to show you how to turn your boring stock Divi WooCommerce account pages into something that is more modern and exciting to look at. We will customize the various elements already found on the page, and even add a few to make your customers feel at home when logged into their accounts.

For this tutorial we are also mixing things up a bit as it is a video tutorial instead of our usual text with screenshots, but don’t worry, all the settings will follow below the video for those of you that want to work fast! We will also add a downloadable JSON file for you that you can import into your Divi install.

Please let us know in the comments if this format works for you, or if you have any other suggestions.

Now, without me continuing to blab away, let’s get into it with a quick preview of what we are building before jumping into the video tutorial.

Preview:

Customized Divi WooCommerce My Account Page

Video Tutorial

Text Instructions

If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.

Step 1) Style the Row containing the Text Module

Row Settings

Content Tab

Background

Gradient
Start Color: #ffffff
End Color: rgba(255,255,255,0.85)
Gradient Direction: 90deg
Start Position: 30%
End Position: 30%

Design Tab

Spacing

Padding Left: 3%
Padding Right: 3%

Box Shadow

Style 2

Step 2) Style the Text Module containing the WooCommerce My Account Shortcode

Text Module

Design Tab

Text

TEXT STYLES
Text Font: Roboto
Text Color: #0fe5a8
Text Size: 16px

LINK STYLES
Link Color: #5430ce

UNORDERED LIST STYLES
Unordered List Text Size: 21px
Unordered List Line Height: 2em
Unordered List Style Type: Square
Unordered List Item Indent: 5%

Step 3) Style the Main Section

We are doing something special here instead of just adding a background, we are going to generate an SVG background and then place it in our Section.

To do this you need to go over to https://www.svgbackgrounds.com/ and select the background style you like, then customize it. We used the Subtle Prism design for this tutorial, but you can select any design that fits your brand.

Once you have selected and styled your background, copy the CSS Output, then we will add it to our Main Section here.

Section Settings

Advanced Tab

Custom CSS

MAIN ELEMENT
Paste the background CSS you copied in here.

NOTE: Don’t worry if you only see a color when you’ve pasted and save the Output CSS for your SVG background in the Divi Builder, it will display perfectly on the frontend.

Step 4) Add a Title to the My Account Page

Create a new Single Column Row and move it to the top of the Section, then add a Text Module.

Text Module

Content Tab

Text

Body: “my account.”

Design Tab

Text

Text Font: Poppins
Text Color: #ffffff
Text Size: 64px (Desktop), 54px (Tablet), 34px (Mobile)
Text Line Height: 1em

Row Settings

Design Tab

Spacing

Padding Top: 50px
Padding Bottom: 50px

Step 5) Add a Promotion below the My Account area

Create a new Single Column Row below our row containing the WooCommerce My Account shortcode, then add a Call to Action module.

Call-to-Action Module

Content Tab

Text

Title: “Don’t forget to check out our SUMMER SALE!
Button: “Shop Now”
Body: “Save up to 25% off our hottest products.”

Link

Button Link URL: “/shop/”

Background

Background Color: #0fe5a8

NOTE: If you set your store to any other URL than the default, be sure to use that for the link URL.

Design Tab

Text

Text Alignment: Centered

Title Text

Title Font: Poppins
Title Font Weight: Semi Bold
Title Text Color: #ffffff
Title Text Size: 28px

Body Text

Title Font: Roboto
Title Text Color: #ffffff
Title Text Size: 18px

Button

Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Backgroun: #5430ce
Button Border Width: 0px

Sizing

Max-Width: 750px
Module Alignment: Centered

Border

Border-Radius: 5px

Box Shadow

Box Shadow: Option 2

PRO-TIP: If you are not sure how to import this layout, please check out this article on How to Import Divi Builder Layouts.

Divi WooCommerce My Account Page the BodyCommerce Way

Now let’s take a look at that amazing Divi WooCommerce My Account Page we just built supercharged with some of the powerful features built right into BodyCommerce.

Preview:

Divi WooCommerce My Account Page with BodyCommerce

Now we are not ones to toot our own horn, but TOOT TOOT my friends! This doesn’t even look like a Divi site anymore. Let’s take a look at what Divi BodyCommerce features we used to put this My Account page together so that you can take this inspiration and start creating amazing Divi WooCommerce My Account pages also.

Account Before Layout

Divi WooCommerce My Account Page with BodyCommerce
This is basically a layout that you can inject before the account dashboard. It is a great feature if you want a custom my account page title, create a custom header, or display any additional information at the top of your Divi WooCommerce My Account page.

Dynamic Text

We utilized the Divi dynamic text feature to display the current date here.

Custom Page Title

The standard My Account title at the top of the page is a bit boring, so we added our own title and utilized the Remove Default Woo Headings feature of BodyCommerce to do exactly what the name suggests, remove that boring page title.

Account Navigation Layout

Divi WooCommerce My Account Page with BodyCommerce
Tired of boring navigation menus on your Divi WooCommerce My Account pages? BodyCommerce has you covered with options like horizontal navigation links and buttons just to name a few. This opens the door to countless unique navigation design possibilities.

Account Dashboard Layout

Divi WooCommerce My Account Page with BodyCommerce
With BodyCommerce you can set a layout for each of the endpoints of a standard Divi WooCommerce install. Here we created a custom layout for the Dashboard endpoint. With BodyCommerce you can use this space to welcome users and share any helpful information like your support channels or whatever fits your needs.

User Avatar

The BodyCommerce User Avatar module is great to display anywhere on a WooCommerce page and it works great here on the Dashboard.

Customized Welcome Message

This is the BodyCommerce Welcome Message module in action which enables you to greet the user by name which we think is pretty cool and a nice personal touch.

Call to Action

Here we just used the same stock Divi Call to Action module used in the tutorial to have a sales offer right on the user dashboard. This is a great way to engage folks that are already customers.

Account After Layout

Divi WooCommerce My Account Page with BodyCommerce
This is exactly the same as the Account Before Layout with the layout just being injected after the Account Layout. We used this is to display featured products, but you can build any layout you feel will help move toward a sale.

Product Carousel

The missing link is here! BodyCommerce has an awesome Product Carousel module which we used to display some featured products. The best part is that it is highly customizable and you can even create your own loop layout.

Customized Loop Layout

One of the strongest features in BodyCommerce is the ability to create your own loop layouts for Divi and WooCommerce. This gives you granular control of what your product cards look like. You decide what information is displayed, where it is displayed, and how it is styled. This makes any Divi WooCommerce site as close to a hand-coded custom site without touching a line of code.

Conclussion

The Divi WooCommerce My Account Page is your customer’s home on the website, so it is important to give them a great experience when they are there. Now whether you customize this page for your customers using stock Divi, or with BodyCommerce, we hope this tutorial was helpful to you by showing you some new things you can do to create great online experiences for your clients!

Custom Divi WooCommerce My Account pages are only one of the hundreds of customizations you can do in Divi WooCommerce stores with the power of BodyCommerce.