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:

Video Tutorial

Text Instructions

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

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.

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

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

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:

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

Account Navigation Layout

Account Dashboard Layout

Account After Layout

Conclussion