{"id":6239,"date":"2024-03-10T11:19:23","date_gmt":"2024-03-10T05:19:23","guid":{"rendered":"https:\/\/codexpert.io\/?p=6239"},"modified":"2026-05-14T15:32:51","modified_gmt":"2026-05-14T09:32:51","slug":"nested-tabs-with-elementor-and-woolementor","status":"publish","type":"post","link":"https:\/\/codexpert.io\/blog\/nested-tabs-with-elementor-and-woolementor\/","title":{"rendered":"How to create nested tabs in WooCommerce 2026"},"content":{"rendered":"<div class='cx-content-before'><\/div><p>Nested tabs simply mean tabs inside another tab, as in, child tabs inside a mother tab. This method helps you display more information in a structured way where readers can get the key information instantly.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-6296 size-full aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/08\/bandicam-final-trimmed_GIF.gif\" alt=\"create nested tabs with Elementor and CoDesigner\" width=\"944\" height=\"360\" \/><\/p>\n<p><a href=\"https:\/\/codexpert.io\/codesigner\/\">CoDesigner<\/a> offers 5 tabs widgets to divide contents in order to save up space. Among the 5 tabs widgets of <a href=\"https:\/\/codexpert.io\/codesigner\/\">CoDesigner<\/a>, 4 are completely free and one is a premium widget. With these tabs widgets, you can show off your creativity by constructing amazing nested tabs on your website.<\/p>\n<p>The free widgets include-<\/p>\n<ul>\n<li><a href=\"https:\/\/codexpert.io\/codesigner\/tabs-basic\/\" target=\"_blank\" rel=\"noopener\">Tabs Basic<\/a><\/li>\n<li><a href=\"https:\/\/codexpert.io\/codesigner\/tabs-classic\/\" target=\"_blank\" rel=\"noopener\">Tabs Classic<\/a><\/li>\n<li><a href=\"https:\/\/codexpert.io\/codesigner\/tabs-fancy\" target=\"_blank\" rel=\"noopener\">Tabs Fancy<\/a><\/li>\n<li><a href=\"https:\/\/codexpert.io\/codesigner\/tabs-beauty\/\" target=\"_blank\" rel=\"noopener\">Tabs Beauty<\/a><\/li>\n<\/ul>\n<p>On the other hand, <a href=\"https:\/\/codexpert.io\/codesigner\/dynamic-tabs\/\">Dynamic Tabs<\/a> is a premium widget offered by CoDesigner.<\/p>\n<p>Today, we will see how to create nested tabs using Dynamic Tabs and one of the most popular free widgets of CoDesigner, <a href=\"https:\/\/codexpert.io\/codesigner\/tabs-basic\/\">Tabs Classic<\/a>.<\/p>\n<p>Without further ado let&#8217;s get started.<\/p>\n<h2 style=\"text-align: center\" id=\"cx-heading-1\">Steps to follow for creating nested tabs with Elementor and CoDesigner<\/h2>\n<h4 style=\"text-align: center\">1. Activate the widgets<\/h4>\n<p>At first, you will need to install and activate both CoDesigner and CoDesigner Pro. Then head over to the CoDesigner dashboard and navigate to the widgets list. There you have to activate any of the free tabs widgets and the premium <a href=\"https:\/\/codexpert.io\/codesigner\/dynamic-tabs\/\">Dynamic Tabs<\/a> widget. For now, we will activate the Tabs Classic and continue designing the nested tabs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6268 size-large\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/08\/Activate-Widgets-1024x316.png\" alt=\"nested tabs with Elementor and CoDesigner\" width=\"1024\" height=\"316\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Activate-Widgets-1024x316.png 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Activate-Widgets-300x93.png 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Activate-Widgets-768x237.png 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Activate-Widgets.png 1457w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h4 style=\"text-align: center\">2. Creating a child tab template<\/h4>\n<p>Now, you will need to create child tabs with Tabs Classic. Go to<\/p>\n<p style=\"text-align: center\">WordPress Dashboard &gt; Templates &gt; Add New Template<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-22346 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/08\/WCD-add-new.png\" alt=\"\" width=\"203\" height=\"324\" \/><\/p>\n<p>A new template creation pop-up will arrive. From the drop-down menu, select the WL tab and then give a name to the new template, and click on the Create Template button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-22347 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/08\/WCD-Tab.png\" alt=\"\" width=\"1014\" height=\"547\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/WCD-Tab.png 1014w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/WCD-Tab-768x414.png 768w\" sizes=\"auto, (max-width: 1014px) 100vw, 1014px\" \/><\/p>\n<p>A new Elementor editor page will come up. Search for Tabs Classic on the left widget selection bar and add it to a section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6271 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/08\/Tabs-Classic.png\" alt=\"\" width=\"297\" height=\"272\" \/><\/p>\n<p>Add as many tabs as you want with your preferred information and tab name on this section and publish the changes you made.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6275 size-large\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/08\/tabs-content-1024x427.png\" alt=\"create nested tabs with CoDesigner\" width=\"1024\" height=\"427\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/tabs-content-1024x427.png 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/tabs-content-300x125.png 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/tabs-content-768x320.png 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/tabs-content.png 1584w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>For example, we will create child 3 tabs with demo text.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6274 size-large\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/08\/Tabs-1024x225.png\" alt=\"nested tabs with CoDesigner\" width=\"1024\" height=\"225\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Tabs-1024x225.png 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Tabs-300x66.png 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Tabs-768x169.png 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Tabs.png 1673w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h3 id=\"cx-heading-2\"><\/h3>\n<h4 style=\"text-align: center\">3. Making Parent Tabs<\/h4>\n<p>Select an existing page or create a new page where you wish to make the parent tabs. Then edit the page with Elementor and add a new section. Now, create the parent tab with the <a href=\"https:\/\/codexpert.io\/codesigner\/dynamic-tabs\/\">Dynamic Tabs<\/a> widget on the new section the same way you created the child tabs. We will create two parent tabs here.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6277 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/08\/Dynamic-tabs-1024x277.png\" alt=\"\" width=\"800\" height=\"216\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Dynamic-tabs-1024x277.png 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Dynamic-tabs-300x81.png 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Dynamic-tabs-768x208.png 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Dynamic-tabs.png 1681w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>Then we will select the tabs individually and go to the content source. You will see two options &#8211; static texts and templates. Choose the templates option and a new selection bar named Tab Templates will appear below. Select the tabs template you have created to insert into the parent tabs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6279 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/08\/Select-template.png\" alt=\"\" width=\"299\" height=\"619\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Select-template.png 299w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Select-template-145x300.png 145w\" sizes=\"auto, (max-width: 299px) 100vw, 299px\" \/><\/p>\n<h4 style=\"text-align: center\">4. Stying the tabs<\/h4>\n<p>You can style all aspects of the free and premium tabs widget. On the premium <a href=\"https:\/\/codexpert.io\/codesigner\/dynamic-tabs\/\">Dynamic Tabs<\/a> widget, you will get an extra option to change the navigation position in the content tab. Also, the style tab includes extra options such as changing the title color and active color along with tab and content styling options.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6280 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/08\/Style.png\" alt=\"\" width=\"302\" height=\"568\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Style.png 302w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Style-160x300.png 160w\" sizes=\"auto, (max-width: 302px) 100vw, 302px\" \/><\/p>\n<p>After styling the parent tabs publish the page. That\u2019s it!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-6294 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2021\/08\/Final-Output-1-1024x340.png\" alt=\"nested tabs with elementor and CoDesigner\" width=\"800\" height=\"266\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Final-Output-1-1024x340.png 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Final-Output-1-300x100.png 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Final-Output-1-768x255.png 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2021\/08\/Final-Output-1.png 1158w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>This is how you can create nested tabs easily using Elementor and CoDesigner in minutes.<\/p>\n<h3 style=\"text-align: center\" id=\"cx-heading-3\">Conclusion<\/h3>\n<p>Nested tabs help you to make your site attractive to your users as they can contain important pieces of information in a compact form. It is in fact a &#8216;need&#8217; when the site has lots of pages\/products\/information. All this information can be well-structured with the CoDesigner tabs widgets.<\/p>\n<p>CoDesigner is the finest <a href=\"https:\/\/codexpert.io\/codesigner\/\">WooCommerce Elementor Addon<\/a> in the market. To explore other exclusive widgets of CoDesigner you can either download the free version from <a href=\"https:\/\/wordpress.org\/plugins\/woolementor\/\" target=\"_blank\" rel=\"noopener\">WordPress Repository<\/a> or you can check out the demos on the premium version.<\/p>\n<p>Feel free to share your thoughts on this article in the comments section below.<\/p>\n<div class='cx-content-after'><\/div>","protected":false},"excerpt":{"rendered":"<p>Nested tabs simply mean tabs inside another tab, as in, child tabs inside a mother tab. This method helps you display more information in a structured way where readers can get the key information instantly. CoDesigner offers 5 tabs widgets to divide contents in order to save up space. Among the 5 tabs widgets of [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":22345,"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-6239","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\/6239","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=6239"}],"version-history":[{"count":1,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/6239\/revisions"}],"predecessor-version":[{"id":32880,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/6239\/revisions\/32880"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media\/22345"}],"wp:attachment":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media?parent=6239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/categories?post=6239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/tags?post=6239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}