WooCommerce Account Page Styling in Divi [Step-by-Step Guide]

Transform your WooCommerce account page with dynamic elements, custom styling, and interactive tabs!

Welcome to the ultimate guide on WooCommerce Account Page styling in Divi! This comprehensive, 2-hour tutorial covers every aspect of customizing customer area, helping you transform it into a beautifully styled and user-friendly part of your webshop.

Inside this tutorial, you’ll learn how to:

• Add dynamic usernames to personalize the user experience,
• Style the account navigation with CSS and add icons for a polished look,
• Build custom account tabs using the Divi Builder,
• Highlight active tabs with CSS
• And refine the styling of the content within each section.

Ready to get started? Watch the video and use the code snippets provided in this article to transform your WooCommerce account page into a stunning, functional part of your Divi site.

Important!

This walkthrough was originally shared with my​ Divi Stylist Academy community, where students get exclusive access to in-depth design sessions like this one and more. 

Code Snippets Used:

Below, you’ll find all the code snippets used in this tutorial to help you style and customize your WooCommerce account page in Divi. These snippets cover everything from adding dynamic usernames to styling the account navigation and customizing account tabs.

While you can copy and paste these directly into your site, we highly recommend watching the video tutorial first to fully understand how each snippet works and how to modify them to fit your design.

Let’s dive in!

Current username shortcode (PHP)

This PHP snippet creates a custom shortcode [current_user_display_name], allowing you to display the logged-in user’s display name dynamically on the WooCommerce account page.

function display_current_user_display_name () {
    $user = wp_get_current_user();
    $display_name = $user->display_name;
    return $user->display_name;
}
add_shortcode('current_user_display_name', 'display_current_user_display_name');

Styling the default WooCommerce account navigation (CSS)

This CSS snippet enhances the account navigation with a modern design, including background colors, padding, uppercase text, and smooth transitions. It also applies hover effects and styles the active tab distinctly.

nav.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
}

nav.woocommerce-MyAccount-navigation a {
    display: block;
    background: #f3f3f3;
    padding: 0.5em 1em;
    color: #000;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .9em;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
    transition: all .3s;
}

nav.woocommerce-MyAccount-navigation a:hover {
    background: mediumpurple;
    color: #fff;
}

nav.woocommerce-MyAccount-navigation li.is-active a {
    color: #fff;
    background: #3c3c3c;
}

Adding icons to the account navigation (ET Icon Font)

This snippet adds Elegant Themes’ built-in icons to the WooCommerce account navigation menu, giving each menu item a unique visual identifier.

nav.woocommerce-MyAccount-navigation a::before {
    display: inline-block;
    content: '\e012';
    font-family: 'ETmodules';
	margin-right:10px;
}

li.woocommerce-MyAccount-navigation-link--orders a::before {
    content: '\e015';
}

li.woocommerce-MyAccount-navigation-link--downloads a::before {
    content: '\e020';
}

Adding icons to the account navigation (FontAwesome)

If you prefer FontAwesome icons over ET’s icons, use this CSS snippet to apply custom icons to the account navigation links.

nav.woocommerce-MyAccount-navigation a::before {
    display: inline-block;
    content: '\f02e';
    font-family: 'FontAwesome';
	margin-right:10px;
}

li.woocommerce-MyAccount-navigation-link--orders a::before {
    content: '\f07a';
}

li.woocommerce-MyAccount-navigation-link--downloads a::before {
    content: '\f019';
}

Hiding the default account navigation when using custom tabs

This snippet removes the default WooCommerce account navigation when replacing it with a custom-built navigation using the Divi Builder.

nav.woocommerce-MyAccount-navigation {
    display: none;
}

body.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
}

Styling the active tab in custom navigation (Blurb module)

These styles apply a subtle background color and shadow effect to indicate the currently active tab, improving usability.

body.woocommerce-orders .tab-orders,
body.woocommerce-downloads .tab-downloads,
body.woocommerce-edit-account .tab-account,
body.woocommerce-customer-logout .tab-logout {
    background: #fff;
    box-shadow: 0px -20px 20px -10px rgba(0,0,0,0.2);
}

Styling WooCommerce info messages and links

This CSS snippet customizes WooCommerce success messages and notifications, applying a white background with a purple border while styling links to match.

#dl-account .woocommerce-info,
#dl-account .woocommerce-message{
    background: #fff!important;
    color: #333!important;
    border: 2px #8300e9 solid;
}

#dl-account .woocommerce-info a:not(.button),
#dl-account .woocommerce-message a:not(.button) {
    color: #8300e9;
    text-decoration: underline;
}

My account tab content styling

These styles refine various sections within the account page, including order tables, account forms, and customer details, ensuring a polished and cohesive appearance.

/* Order tables */
#dl-account table.shop_table,
#dl-account table.shop_table td,
#dl-account table.shop_table th{
    border-width: 2px;
}

#dl-account table.shop_table td,
#dl-account table.shop_table th {
    padding:10px 15px
}

#dl-account table.my_account_orders {
    font-size: 1em;
}

/* Order details */
section.woocommerce-order-details {
    margin-top: 40px;
}

#dl-account .woocommerce-customer-details address {
    border-width: 2px;
    padding: 30px;
}

/* Account Forms */
#dl-account label {
    font-weight: 600;
    color: #333;
}

#dl-account input {
    margin-bottom: 1em;
    background: transparent;
    border: 2px #ccc solid;
    font-weight: 500;
    border-radius: 5px;
}

#dl-account input:focus {
    border-color: mediumpurple;
}

#dl-account form.edit-account button.button {
    padding: 1em 2em!important;
}

/* Italic text */
#dl-account em {
    font-style: normal;
}