- Basic knowledge on Divi and WooCommerce.
- Divi and WooCommerce are already installed and configured.
- You have some products loaded into WooCommerce.
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.
Step 1) Style the Row containing the Text Module
Start Color: #ffffff
End Color: rgba(255,255,255,0.85)
Gradient Direction: 90deg
Start Position: 30%
End Position: 30%
Padding Left: 3%
Padding Right: 3%
Step 2) Style the Text Module containing the WooCommerce My Account Shortcode
Text Font: Roboto
Text Color: #0fe5a8
Text Size: 16px
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.
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.
Body: “my account.”
Text Font: Poppins
Text Color: #ffffff
Text Size: 64px (Desktop), 54px (Tablet), 34px (Mobile)
Text Line Height: 1em
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.
Title: “Don’t forget to check out our SUMMER SALE!
Button: “Shop Now”
Body: “Save up to 25% off our hottest products.”
Button Link URL: “/shop/”
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.
Text Alignment: Centered
Title Font: Poppins
Title Font Weight: Semi Bold
Title Text Color: #ffffff
Title Text Size: 28px
Title Font: Roboto
Title Text Color: #ffffff
Title Text Size: 18px
Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Backgroun: #5430ce
Button Border Width: 0px
Module Alignment: Centered
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.
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
Custom Page Title
Account Navigation Layout
Account Dashboard Layout
Customized Welcome Message
Call to Action
Account After Layout
Customized Loop Layout
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.