{"id":7407,"date":"2024-03-10T11:19:27","date_gmt":"2024-03-10T05:19:27","guid":{"rendered":"https:\/\/codexpert.io\/?p=7407"},"modified":"2026-05-14T15:32:50","modified_gmt":"2026-05-14T09:32:50","slug":"steps-to-add-new-tabs-in-my-account-page","status":"publish","type":"post","link":"https:\/\/codexpert.io\/blog\/steps-to-add-new-tabs-in-my-account-page\/","title":{"rendered":"Easy Steps to Add New Tabs in &#8220;My Account&#8221; Page Without Coding"},"content":{"rendered":"<div class='cx-content-before'><\/div>\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/woocommerce.com\/document\/the-my-account-page\/\" target=\"_blank\" rel=\"noopener\">WooCommerce My Account<\/a> page. The &#8216;My Account&#8217; page has to 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7410 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"166\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Default-WooCommerce-My-Account-page-1024x166.jpg\" alt=\"Default WooCommerce My Account page\" class=\"wp-image-7410\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Default-WooCommerce-My-Account-page-1024x166.jpg 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Default-WooCommerce-My-Account-page-300x49.jpg 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Default-WooCommerce-My-Account-page-768x124.jpg 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Default-WooCommerce-My-Account-page.jpg 1049w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Default WooCommerce My Account page<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The default account management tabs includes information such as &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dashboard<\/li>\n\n\n\n<li>Orders<\/li>\n\n\n\n<li>Downloads<\/li>\n\n\n\n<li>Addresses<\/li>\n\n\n\n<li>Account details<\/li>\n\n\n\n<li>Logout<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Elementor doesn\u2019t have the options to customize the interface of the WooCommerce My Account page, add new tabs, or change the tab style. That\u2019s why <a href=\"https:\/\/wordpress.org\/plugins\/woolementor\/\" target=\"_blank\" rel=\"noopener\">CoDesigner<\/a> came up with exciting widgets to design the layout, change content, and add custom tab in Woocommerce My Account page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CoDesigner features 2 intuitive widgets to customize the WooCommerce My Account page &#8211;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>My Account (<a href=\"https:\/\/wordpress.org\/plugins\/woolementor\/\" target=\"_blank\" rel=\"noopener\">Free<\/a>)<\/li>\n\n\n\n<li>My Account Advanced (<a href=\"https:\/\/codexpert.io\/codesigner\/\">Premium<\/a>) &#8211; it has an additional feature to add new tabs.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">My Account Advanced widget by <a href=\"https:\/\/codexpert.io\/codesigner\/\" target=\"_blank\" rel=\"noopener\">CoDesigner<\/a> 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 <a href=\"https:\/\/wordpress.org\/plugins\/woolementor\/\" target=\"_blank\" rel=\"noopener\">free version<\/a> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"font-size:28px\" id=\"cx-heading-1\">How to Add Custom Tab in WooCommerce My Account Page<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 &#8211;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. In order to use the free WooCommerce My Account widget you only need to install and activate the free version of <a href=\"https:\/\/wordpress.org\/plugins\/woolementor\/\" target=\"_blank\" rel=\"noopener\">CoDesigner<\/a>. To use My Account Advanced you will need to install both free and <a href=\"https:\/\/codexpert.io\/codesigner\/\">pro<\/a> versions of CoDesigner. Also, make sure you have Elementor and WooCommerce installed on your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To install CoDesigner, go to Add New Plugin on WordPress dashboard &#8211; Search for CoDesigner in the search bar and install the plugin.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7416 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"314\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Install-free-version-of-CoDesigner-1024x314.jpg\" alt=\"Install CoDesigner from WordPress repository \" class=\"wp-image-7416\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Install-free-version-of-CoDesigner-1024x314.jpg 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Install-free-version-of-CoDesigner-300x92.jpg 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Install-free-version-of-CoDesigner-768x236.jpg 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Install-free-version-of-CoDesigner.jpg 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Install CoDesigner from the WordPress repository<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">2. Now activate the plugin and go to the CoDesigner dashboard from the admin menu.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7418 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"149\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Go-to-CoDesigner-dashboard-e1641967994964.jpg\" alt=\"Go to CoDesigner dashboard\" class=\"wp-image-7418\" \/><figcaption class=\"wp-element-caption\">Click on CoDesigner from the WordPress dashboard<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3. Now, you will need to upload and install the premium version of CoDesigner. Download and install the premium plugin from <a href=\"https:\/\/help.codexpert.io\/docs\/codesigner\/how-to-install-and-activate-codesigner-pro\/\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7427 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"233\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/upload-codesigner-pro-1024x233.png\" alt=\"upload-CoDesigner-pro\" class=\"wp-image-7427\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/upload-codesigner-pro-1024x233.png 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/upload-codesigner-pro-300x68.png 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/upload-codesigner-pro-768x175.png 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/upload-codesigner-pro.png 1217w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Upload the Zip file of CoDesigner Pro on your website<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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 &#8216;Save Settings&#8217;.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1690\" height=\"471\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/my-acccount.png\" alt=\"\" class=\"wp-image-22312\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/my-acccount.png 1690w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/my-acccount-768x214.png 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/my-acccount-1536x428.png 1536w\" sizes=\"auto, (max-width: 1690px) 100vw, 1690px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Enable My Account Widgets<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. Create a new page with Elementor, and click &#8216;Edit with Elementor&#8217;.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7432 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"643\" height=\"260\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Create-new-My-Account-page-e1641976323824.jpg\" alt=\"Create new My Account page\" class=\"wp-image-7432\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Create-new-My-Account-page-e1641976323824.jpg 643w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Create-new-My-Account-page-e1641976323824-300x121.jpg 300w\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" \/><figcaption class=\"wp-element-caption\">Create a new My Account page and edit with Elementor<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7434 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"242\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Add-the-widget-using-Elementor-1024x242.jpg\" alt=\"Add the widget using Elementor\" class=\"wp-image-7434\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-the-widget-using-Elementor-1024x242.jpg 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-the-widget-using-Elementor-300x71.jpg 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-the-widget-using-Elementor-768x181.jpg 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-the-widget-using-Elementor.jpg 1678w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Add the My Account widget in Elementor editor<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:24px\" id=\"cx-heading-2\">Customization<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">7. On the Content tab you will see two sections &#8211; Tab manager and Profile Content. On the Tab Manager, you will see the default WooCommerce My Account tabs.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7436 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"583\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/My-Account-Tab-manager.jpg\" alt=\"My Account Tab manager\" class=\"wp-image-7436\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/My-Account-Tab-manager.jpg 301w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/My-Account-Tab-manager-155x300.jpg 155w\" sizes=\"auto, (max-width: 301px) 100vw, 301px\" \/><figcaption class=\"wp-element-caption\">Tab manager of CoDesigner My Account Advanced widget<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">8. For the existing tabs you can change the tab title, tab slug, and delete tabs.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7437 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"609\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Edit-existing-tabs.jpg\" alt=\"Edit existing tabs\" class=\"wp-image-7437\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Edit-existing-tabs.jpg 298w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Edit-existing-tabs-147x300.jpg 147w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><figcaption class=\"wp-element-caption\">Edit existing My Account tabs<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">9. You can add new tab in My Account page WooCommerce by clicking the Add Item.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7439 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"421\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Add-new-tab-e1641983179800.jpg\" alt=\"Add new tab\" class=\"wp-image-7439\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-new-tab-e1641983179800.jpg 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-new-tab-e1641983179800-214x300.jpg 214w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption class=\"wp-element-caption\">Add new My Account tab<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s a demo video showing all the steps and customization options of My Account.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"My Account\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/323MZ_aFbUw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">10. After adding a new tab, you will see options to change the Tab Title, Tab Slug, and select Content Type &#8211; Plain Text or Template.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7444 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"275\" height=\"257\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/New-Tab.jpg\" alt=\"New Tab on WooCommerce My Account\" class=\"wp-image-7444\" \/><figcaption class=\"wp-element-caption\">Choose the Content type for the new tab<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">11. By selecting the Plain Text option, you can input your own content.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7443 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"290\" height=\"723\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/New-My-Account-tab.jpg\" alt=\"New My Account tab\" class=\"wp-image-7443\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/New-My-Account-tab.jpg 290w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/New-My-Account-tab-120x300.jpg 120w\" sizes=\"auto, (max-width: 290px) 100vw, 290px\" \/><figcaption class=\"wp-element-caption\">Using plain text as content<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">12. Here&#8217;s how the new tab appears after selecting the template on My Account.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7448 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Plain-text-on-new-tab-1024x389.jpg\" alt=\"Plain text on new tab\" class=\"wp-image-7448\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Plain-text-on-new-tab-1024x389.jpg 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Plain-text-on-new-tab-300x114.jpg 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Plain-text-on-new-tab-768x292.jpg 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Plain-text-on-new-tab.jpg 1143w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Preview of plain text on the new tab<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7446 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"281\" height=\"375\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Select-template-for-new-tab.jpg\" alt=\"Select template for new tab\" class=\"wp-image-7446\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Select-template-for-new-tab.jpg 281w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Select-template-for-new-tab-225x300.jpg 225w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><figcaption class=\"wp-element-caption\">Choose template content for the new tab<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">14. Here&#8217;s how the new tab appears after selecting the template on My Account.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:23px\" id=\"cx-heading-3\">Styling<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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 &#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Profile Card<\/li>\n\n\n\n<li>Tab Section<\/li>\n\n\n\n<li>Tab Items<\/li>\n\n\n\n<li>Tab Content<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7451 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"302\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Style-My-Account.jpg\" alt=\"Style My Account\" class=\"wp-image-7451\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Style-My-Account.jpg 297w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Style-My-Account-295x300.jpg 295w\" sizes=\"auto, (max-width: 297px) 100vw, 297px\" \/><figcaption class=\"wp-element-caption\">Style your new My Account page<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">16. Profile Card &#8211; you can change the layout to flex, reverse flex, or normal; change position, column gap, background type, border type, style profile image, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7454 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"860\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Profile-Card.jpg\" alt=\"Design Profile Card\" class=\"wp-image-7454\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Profile-Card.jpg 298w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Profile-Card-104x300.jpg 104w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><figcaption class=\"wp-element-caption\">Design the Profile Card<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">17. Tab Section &#8211; change tab position, background, border, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7455 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"294\" height=\"553\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Tab-Section.jpg\" alt=\"Design the Tab Section\" class=\"wp-image-7455\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Tab-Section.jpg 294w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Tab-Section-159x300.jpg 159w\" sizes=\"auto, (max-width: 294px) 100vw, 294px\" \/><figcaption class=\"wp-element-caption\">Design the Tab Section<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">18. Tab Items &#8211; change the typography, item padding, item margin, background, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7456 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"498\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Tab-Items.jpg\" alt=\"Design the Tab Items\" class=\"wp-image-7456\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Tab-Items.jpg 297w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Tab-Items-179x300.jpg 179w\" sizes=\"auto, (max-width: 297px) 100vw, 297px\" \/><figcaption class=\"wp-element-caption\">Design the Tab Items<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">19. Tab content &#8211; you can change the width, typography, text color, background, border, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7457 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"291\" height=\"528\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Tab-Content.jpg\" alt=\"Design the Tab Contents\" class=\"wp-image-7457\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Tab-Content.jpg 291w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Tab-Content-165x300.jpg 165w\" sizes=\"auto, (max-width: 291px) 100vw, 291px\" \/><figcaption class=\"wp-element-caption\">Design the Tab Contents<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">20. After customizing and designing the My Account page, you need to set the new W<span data-sheets-root=\"1\" data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;woocommerce add tab to my account&quot;}\" data-sheets-userformat=\"{&quot;2&quot;:513,&quot;3&quot;:{&quot;1&quot;:0},&quot;12&quot;:0}\">ooCommerce<\/span> add tab to My Account default.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Go to WooCommerce page on your site dashboard &#8211; Select Settings &#8211; Go to Advanced tab &#8211; Search and add new tab in My-Account page WooCommerce.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7460 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"945\" height=\"404\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Set-as-default.jpg\" alt=\"Set the new My Account page as default from the WooCommerce settings\" class=\"wp-image-7460\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Set-as-default.jpg 945w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Set-as-default-300x128.jpg 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Set-as-default-768x328.jpg 768w\" sizes=\"auto, (max-width: 945px) 100vw, 945px\" \/><figcaption class=\"wp-element-caption\">Set the new My Account page as default from the WooCommerce settings<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s the final outcome of our new My Account page with an additional tab.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-7462 size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/My-Account-1024x557.jpg\" alt=\"New My Account page with an additional tab\" class=\"wp-image-7462\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/My-Account-1024x557.jpg 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/My-Account-300x163.jpg 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/My-Account-768x418.jpg 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/My-Account.jpg 1215w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">New My Account page with an additional tab<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:28px\" id=\"cx-heading-4\">Wrapping Up<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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. <br><br>Start by improving your checkout experience and creating an eye-catching cart page with CoDesigner. Simply download the free version of <a href=\"https:\/\/codexpert.io\/codesigner\/\">CoDesigner<\/a> for essential WooCommerce My Account widgets, and upgrade to the premium version to fully customize your checkout, shop or cart page. Transform your customer&#8217;s journey and boost your business with CoDesigner today!<\/p>\n<div class='cx-content-after'><\/div>","protected":false},"excerpt":{"rendered":"<p>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 &#8216;My Account&#8217; page has to be well-designed and easy to navigate for your users. And making the WooCommerce account management system [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":7569,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[14],"tags":[26],"class_list":["post-7407","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","tag-woolementor"],"_links":{"self":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/7407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/comments?post=7407"}],"version-history":[{"count":1,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/7407\/revisions"}],"predecessor-version":[{"id":33261,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/7407\/revisions\/33261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media\/7569"}],"wp:attachment":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media?parent=7407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/categories?post=7407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/tags?post=7407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}