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.
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
- Design Woocommerce My Account Page Using Page Builders
- Change Woocommerce My Account Page
Video Tutorial
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.
Now, click on the section setting and add a background color – #3c2869. Also, add padding on the top & bottom as shown below.
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”.
Next, add the text color to the page title – #fffff, choose your font & align the title to the center.
Again, we will add a new row but this time choose 4 columns.
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.
Blurb module settings:
Title: Orders.
Remove the description.
Image/ icon: Choose icon.
Background Color: #fffff
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.
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.
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).
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/
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.
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.
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].
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 The New Section:
Row Settings:
Background Color: #fffff.
Border: 15px.
Box Shadow: Choose anyone you like.
Spacing:-
Margin: -150px.
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
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.
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.
