How To Customize WooCommerce My Account Page Layout Using Any WordPress Page Builder

You are currently viewing How To Customize WooCommerce My Account Page Layout Using Any WordPress Page Builder

In this post, I will show how you can customize Woocommerce My Account page using any page builder.

Customizing Woocommerce My Account is really important to improve the overall experience of your customers. A well-designed account page will result in more sales & fewer returns. So, to achieve this (see screenshot below), we will design a custom Woocommerce My Account page using Page builders.

woocommerce my account customization plugins (free)

For this tutorial, I will be using Divi Builder but you can use Elementor, Gutenburg, WP Bakery, or any other page builder you like & you don’t need any coding skills or extra plugins to design a custom My Account page. 

If your Woocommerce Store is slow, then you can check out our blog post, where I have shared 21 ways to optimize your Woocommerce store speed.

Table of Contents

Video Tutorial

How To Customize WooCommerce My Account Page Layout Using Any WordPress Page Builder For Free

Create A New Page

First, let’s create a new page & name this page “My Account”. We can rename or remove the default “My Account” page generated from Woo-commerce.

Design Woocommerce My Account Page Using Page Builders

After creating the page, we will design our Custom My Account page on the front end using the page builder. Choose a regular section with a single row & then add a text module.

Customize woocommerce my account page elementor
Woocommerce “my account” customization plugins

Now, click on the section setting and add a background color – #3c2869. Also, add padding on the top & bottom as shown below. 

woocommerce customer dashboard
Custom my account for woocommerce

Using the text module, we can add the title of the page. You can either write “My Account” or you can add dynamic text as the “Page Title”.

Add custom tab in woocommerce my account page

Next, add the text color to the page title – #fffff, choose your font & align the title to the center.

how to customize woocommerce my account page layout

Again, we will add a new row but this time choose 4 columns.

woocommerce my account page design css

Here we will add all the tabs like Orders, Address, Account Info & Log Out. If you want to add the download tab, then you can also add that as well. 

Adding The Tabs:

Add a blurb module in the first column. 

divi my account page template

Blurb module settings:

Title: Orders.

Remove the description.

Image/ icon: Choose icon.

Background Color: #fffff 

add custom tab in woocommerce my account page

Design Tab:

Icon color: #00000.

Image/ Icon placement: Choose Top/Left.

Icon size:50px.

Title text: 24px.

Title line-height: 1.7.

Under Spacing:

Padding: 20px on top,bottom,left & right.

Border: 15px. 

how to customize woocommerce my account page using divi

The next step is to copy the blurb module & paste that onto all the 3 modules. Now, just change the title & icon of each blurb module as shown below.

how to customize woocommerce my account page using gutenburg

Change Woocommerce My Account Page

Right now, the default My Account page is linked with our site & we will have to link the new My Account page that we have designed. 

To change the Woocommerce My Account page, first, go to the dashboard >  Woocommerce > Settings> Advanced. Under the Advanced tab, you will see the My Account page option where you have to link your new My Account page (see the screenshot below).

woocommerce my account login page customize

Link All the 4 tabs

We have created 4 beautiful tabs but these are not clickable. So, let’s make these tabs clickable. 

Steps:

Click on the Order tab settings > Content > Link

Enter your domain name inside the module link URL like this – https://domainname.com/my-account/ 

design a custom my account page woocommerce

Again, Go back to the Backend & then go to Woocommerce > Settings > Advanced > Account Endpoints.

Since we are linking the Orders tab, we will copy the text next to the order line as shown in the screenshot below.

woocommerce my account link

Now, Paste that text after my account (see the screenshot below) & then click on Save. Follow the same steps to link the other 3 tabs. 

woocommerce my account page like amazon

Add A New Section

Now, we will add a new section with a full row & then choose the text module. Inside the text module, just paste this shortcode [woocommerce_my_account].

customize woocommerce my account design without plugin

This shortcode will generate the default My Account user interface. But we don’t need the Dashboard, orders, downloads & all these, so we will hide these by using some CSS codes given below.

CSS Code

.woocommerce-MyAccount-navigation
{
display:none;
}
.woocommerce-account .woocommerce-MyAccount-content {
width:100%;
}

Copy the above code & paste it in the page settings > Advanced > Custom CSS  & then click on Save. 

customize woocommerce my account design without coding

Customize The New Section:

Row Settings:

Background Color: #fffff.

Border: 15px.

Box Shadow: Choose anyone you like.

Spacing:-

Margin: -150px.

custom design in wp bakery

Now, we will make a few customizations in the text module:

font: Choose any font you like.

text color: #00000.

text size: 18px

text alignment: left

spacing padding: 

top & bottom: 13px

left & right: 40px 

link woocommerce pages without coding

Add Conditional Logic

This is the final step where we will hide all 4 tabs for non-logged-in users. These 4 tabs will only be visible to logged-in users. So, to achieve this we will go to the Row settings > Advanced > Conditions, here we will choose “logged-in status” & then click on save.

conditional logic in divi

Conclusion:

Designing a custom My account will give a better user experience to your customers and ultimately, it will boost your sales. Using Page builders like Divi, Elementor, Gutenburg, or any other page builder, we can easily customize our Woocommerce My Account page plus we can add more tabs as per our requirement so that our customers can find all the options in one place.

You can easily find plugins that help you to customize your My Account page but in most cases, you don’t need that. Adding more plugins will slow down your Woocommerce site which ultimately affects your sales. So, follow these above steps & design a beautiful custom Woocommerce My Account page.

Did you find my post useful? Please let me know in the comment section below.

Sandip Maheshwari

A guy blogging for the last 4 years, I am a guy who loves to write about SEO, social media and affiliate marketing. An avid cricket fan, die-hard fan of Silicon valley the series. I love to blog in my free time to share my knowledge with people around the world.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.