Goodbye Summer, Welcome Autumn

Up to

60%

OFF

Grab Now

Easy Steps to Add New Tabs in “My Account” Page Without Coding

Mar 10, 2024

Share this content

Copy Link
Share

The WooCommerce My Account page is an essential part of any WooCommerce store. It has always been one of the requested feature by designers and developers to customize the WooCommerce My Account page. The ‘My Account’ page has to be be well-designed and easy to navigate for your users. And 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. In the example below, you can see that the WooCommerce My Account page looks quite bland, which might deter most users from staying in your website for long. 

Default WooCommerce My Account page
Default WooCommerce My Account page

The default account management tabs includes information such as –

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

Elementor doesn’t have the options to customize 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 design the layout, change content, and add custom tab in Woocommerce My Account page.

CoDesigner features 2 intuitive 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 custom tab in WooCommerce My Account page without writing a single code. Also, if you only wish to design the My Account page then the free version of the CoDesigner My Account widget can get the job done. Whether you are using the free or premium widget, you will get an error-free experience to achieve what you need in just minutes.

In this article, you will see the steps to design, customize, and add custom tab in WooCommerce My Account page. 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 WooCommerce Elementor.

How to Add Custom Tab in WooCommerce My Account Page

Follow the steps below to add custom tab in WooCommerce My Account page (Free) and My Account Advanced widgets and edit them to your style –

1. In order to use the free WooCommerce 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 and 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. Download and install the premium plugin from 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 click on ‘Save Settings’. 

Enable My Account Widgets

5. Create a new page with Elementor, and click ‘Edit with Elementor’. 

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, simply drag and drop the My Account Advanced widget. 

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 tab in My Account page WooCommerce by clicking the Add Item.

Add new tab
Add new My Account tab

Here’s a demo video showing all the steps and 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 – Plain Text or Template.

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

11. By selecting the Plain Text option, 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 easily make any pre-made template appear on the new tab. For example, in the sample image below, the pre-made template called Promotional Video has been 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. To change the look, feel, layout, content, and design of the WooCommerce My Account page, CoDesigner added 4 sections for styling. These sections include –

  • Profile Card
  • Tab Section
  • Tab Items
  • 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 the 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 WooCommerce add tab to My Account default.

Go to WooCommerce page on your site dashboard – Select Settings – Go to Advanced tab – Search and add new tab in My-Account page WooCommerce.

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 Up

CoDesigner is adding new features and options on every major update to enhance your online business. To make the Elementor WooCommerce My Account page more attractive and easy to use, we made it more flexible to add new tabs and gave limitless design options for it.

Start by improving your checkout experience and creating an eye-catching cart page with CoDesigner. Simply download the free version of CoDesigner for essential WooCommerce My Account widgets, and upgrade to the premium version to fully customize your checkout, shop or cart page. Transform your customer’s journey and boost your business with CoDesigner today!

Subscribe to Our Newsletter

Get the latest WordPress tutorials, trends, and resources right in your inbox. No Spamming, Unsubscribe Anytime.

Please fill out the empty field.

preloader

Thank you for subscribing to our newsletter!

Nazmus Sadat

A WordPress enthusiast, content creator, and tech admirer. Loves to learn new things and help others.

Leave a Comment

Your email address will not be published. Required fields are marked *

Get CoDesigner

Build awesome WooCommerce websites with CoDesigner’s 14+ Modules, 94+ Widgets and 150+ Templates.

Get Now
Scroll to Top