Sizzling Summer Sale

Use Summer35
At checkout

Day
Hour
Min
Sec

Easy steps to add new tabs in the “My Account” page without coding

The WooCommerce My Account page is an essential part of any WooCommerce store. It has always been a most requested feature by designers and developers to customize the WooCommerce My Account page. This page should be well designed and easy to navigate for your users. Making the WooCommerce account management system more attractive also represents your dedication to your customers and business.

By default, the My Account page contains a WooCommerce shortcode. Here you can see that the WooCommerce My Account page doesn’t look very attractive and not appealing to most of the users

 

Default WooCommerce My Account page
Default WooCommerce My Account page

 

The default account management tabs include –

  • Dashboard
  • Orders
  • Downloads
  • Addresses
  • Account details
  • Logout

 

Elementor doesn’t have the options to the interface of the WooCommerce My Account page, add new tabs, or change the tab style. That’s why CoDesigner came up with exciting widgets to customize, design layout, change content, and add new tabs to the WooCommerce My Account page.

CoDesigner includes 2 widgets to customize the WooCommerce My Account page –

  1. My Account (Free)
  2. My Account Advanced (Premium) – it has an additional feature to add new tabs.

 

My Account Advanced widget by CoDesigner is easy to set up and design. You can add new tabs on My Account Advanced without writing a single code. Also, if you only wish to design the My Account page then the free version of the CoDesginer My Account widget will do the work. Whether you are using the free or premium widget, you will get an error-free experience to achieve what you need.

In this article, you will see the steps to design, customize, and add new tabs using My Account advanced. The design and customization options for both widgets are similar, so you will also have the idea to design and customize the free version of My Account.

 

Customize and Design WooCommerce My Account page

Follow the steps below to add, customize, and design both the My Account (Free) and My Account Advanced widgets –

1. In order to use the free My Account widget you only need to install and activate the free version of CoDesigner. To use My Account Advanced you will need to install both free and pro versions of CoDesigner. Also, make sure you have Elementor and WooCommerce installed on your site.

To install CoDesigner –

Go to Add New Plugin on WordPress dashboard – Search for CoDesigner in the search bar – Install the plugin

 

Install CoDesigner from WordPress repository
Install CoDesigner from the WordPress repository

 

2. Now activate the plugin and go to the CoDesigner dashboard from the admin menu.

 

Go to CoDesigner dashboard
Click on CoDesigner from the WordPress dashboard

 

3. Now, you will need to upload and install the premium version of CoDesigner. You will get to know where to download and install the premium plugin here.

 

upload-CoDesigner-pro
Upload the Zip file of CoDesigner Pro on your website

 

4. Go to the CoDesigner dashboard to activate your preferred my account widget. To use the My Account Advanced you only need to activate it from the widget list and save the settings.

 

Activate My Account widget
Activate the My Account widget from the widgets section of CoDesigner

 

5. Create a new page with Elementor where you wish to use the My Account widget.

 

Create new My Account page
Create a new My Account page and edit with Elementor

 

6. On the Elementor editor search for the widget and add it to a new section of the page. As both widgets have similar customization and designing options, My Account Advanced has been added.

 

Add the widget using Elementor
Add the My Account widget in Elementor editor

 

Customization

7. On the Content tab you will see two sections – Tab manager and Profile Content. On the Tab Manager, you will see the default WooCommerce my account tabs.

 

My Account Tab manager
Tab manager of CoDesigner My Account Advanced widget

 

8. For the existing tabs you can change the tab title, tab slug, and delete tabs.

 

Edit existing tabs
Edit existing My Account tabs

 

9. You can add new tabs by clicking the Add Item.

 

Add new tab
Add new My Account tab

 

Here’s a demo video showing all the customization options of My Account.

 

10. After adding a new tab, you will see options to change the Tab Title, Tab Slug, and select Content Type – Pain Text or Template.

 

New Tab on WooCommerce My Account
Choose the content type for the new tab

 

11. By selecting Pain Text, you can input your own content.

 

New My Account tab
Using plain text as content

 

12. Here’s how the new tab appears after selecting the template on My Account.

 

Plain text on new tab
Preview of plain text on the new tab

 

13. With the template selection option you can make any premade template appear on the new tab. For example, here premade template called Promotional Video is added.

 

Select template for new tab
Choose template content for the new tab

 

14. Here’s how the new tab appears after selecting the template on My Account.

 

Styling

15. In order to change the look, feel, layout, content, and design of the WooCommerce My Account page, CoDesigner added 4 sections for Styling. These include –

  • Profile Card,
  • Tab Section,
  • Tab Items, and
  • Tab Content.

 

Style My Account
Style your new My Account page

 

16. Profile Card – you can change the layout to flex, reverse flex, or normal; change position, column gap, background type, border type, style profile image, etc.

 

Design Profile Card
Design the Profile Card

 

17. Tab Section – change tab position, background, border, etc.

 

Design the Tab Section
Design the Tab Section

 

18. Tab Items – change typography, item padding, item margin, background, etc.

 

Design the Tab Items
Design the Tab Items

 

19. Tab content – you can change the width, typography, text color, background, border, etc.

 

Design the Tab Contents
Design the Tab Contents

 

20. After customizing and designing the My Account page, you need to set the new My Account page as default from the WooCommerce settings.

Go to WooCommerce on the dashboard – Select Settings – Go to Advanced tab – Search and add the new my account page on the My Account page.

 

Set the new My Account page as default from the WooCommerce settings
Set the new My Account page as default from the WooCommerce settings

 

Here’s the final outcome of our new My Account page with an additional tab.

 

New My Account page with an additional tab
New My Account page with an additional tab

 

Wrapping it up

CoDesigner is adding new features and options on every major update to enhance your online business. To make the may account page more attractive and easy to use we made it more flexible to add new tabs and design it using unlimited options. Other crucial steps to skyrocketing your online business are to make a better checkout experience and an eye-catching cart page.  You can do these easily with the help of CoDesigner.  All you need to do is grab a free copy of CoDesigner for the cart widgets and the premium version to fully customize the checkout page.

Related posts based on your interest

Leave a Reply

Your email address will not be published.

Share with your friends

Subscribe to
Our Newsletter

No spam. Unsubscribe anytime.