Easy Steps to Add New Tabs in “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

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

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

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.

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.

Enable My Account Widgets

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

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.

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.

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

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

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.

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

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

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.

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.

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.

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

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

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

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.

Here’s the final outcome of our 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 skyrocket 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.