{"id":7487,"date":"2024-03-10T11:19:26","date_gmt":"2024-03-10T05:19:26","guid":{"rendered":"https:\/\/codexpert.io\/?p=7487"},"modified":"2026-05-14T15:32:51","modified_gmt":"2026-05-14T09:32:51","slug":"how-to-add-new-product-tabs-without-coding","status":"publish","type":"post","link":"https:\/\/codexpert.io\/blog\/how-to-add-new-product-tabs-without-coding\/","title":{"rendered":"How to add new \u201cproduct tabs\u201d without coding in WooCommerce"},"content":{"rendered":"<div class='cx-content-before'><\/div><p>WooCommerce product tabs usually display the description, specification, and review. But WooCommerce doesn\u2019t have the option to add custom product tabs without coding. CoDesigner lets you add custom product tabs to WooCommerce products. You can add these tabs without writing a single code. In this article, you will see how to add new \u201cproduct tabs\u201d without coding and using <a href=\"https:\/\/codexpert.io\/codesigner\/\">CoDesigner<\/a>.<\/p>\n<p>To add new product tabs on single product pages you will need to make sure that your site has the following plugins installed and activated &#8211;<\/p>\n<ol>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a><\/li>\n<li>The free version of <a href=\"https:\/\/wordpress.org\/plugins\/woolementor\/\" target=\"_blank\" rel=\"noopener\">CoDesigner<\/a>, and<\/li>\n<li>and the premium version of <a href=\"https:\/\/codexpert.io\/codesigner\/\">CoDesigner<\/a>.<\/li>\n<\/ol>\n<h3 style=\"text-align: center\" id=\"cx-heading-1\">Steps to add new \u201cproduct tabs\u201d on the Single product Template<\/h3>\n<p>1. Before starting to create new product tabs on the Single product Template, Go to the CoDesigner dashboard.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7488 size-full\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Go-to-CoDesigner-dashboard-1.jpg\" alt=\"Go to CoDesigner dashboard\" width=\"193\" height=\"201\" \/><\/p>\n<p>2. Enable Product Dynamic Tabs from CoDesigner dashboard &#8211; Widget tab &#8211; Single Product widgets section. Here you will find two Product Tabs widgets, We will use the premium widget Product Dynamic Tabs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22310\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Product-dynamic-tabs.png\" alt=\"\" width=\"1000\" height=\"541\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Product-dynamic-tabs.png 1000w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Product-dynamic-tabs-768x415.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>3. Now go to the Templates menu on the WordPress dashboard<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7493 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Now-go-to-the-Temlates-menu-on-the-WordPress-dashboard.jpg\" alt=\"Now go to the Templates menu on the WordPress dashboard\" width=\"291\" height=\"199\" \/><\/p>\n<p>4. Click on the WCD Single Product Tab<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22308\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/WCD-single-product.png\" alt=\"\" width=\"808\" height=\"139\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/WCD-single-product.png 808w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/WCD-single-product-768x132.png 768w\" sizes=\"auto, (max-width: 808px) 100vw, 808px\" \/><\/p>\n<p>5. Click on Add New WCD Single Product<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-22307 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Add-new.png\" alt=\"\" width=\"694\" height=\"113\" \/><\/p>\n<p>6. A pop will appear. By default, WCD Single Product will be selected in the template type, no need to change this. Give a name to your template and click <strong>Create Template<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22309\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/WCD-template.png\" alt=\"\" width=\"1310\" height=\"681\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/WCD-template.png 1310w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/WCD-template-768x399.png 768w\" sizes=\"auto, (max-width: 1310px) 100vw, 1310px\" \/><\/p>\n<p>7. Now you will be redirected to Elementor editor where you will need to add the Single product widgets including Product Dynamic Tabs.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7501 size-large\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Add-Product-Dynamic-Tabs-to-the-page-1024x578.jpg\" alt=\"Add Product Dynamic Tabs to the page\" width=\"1024\" height=\"578\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-Product-Dynamic-Tabs-to-the-page-1024x578.jpg 1024w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-Product-Dynamic-Tabs-to-the-page-300x169.jpg 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-Product-Dynamic-Tabs-to-the-page-768x434.jpg 768w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-Product-Dynamic-Tabs-to-the-page.jpg 1666w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>8. On the content section of the widget, you can edit the existing tabs, delete existing tabs, and add a new product tab. To add a new product tab, just click the <strong>Add Item<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7503 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Add-new-tab-1.jpg\" alt=\"Add new tab\" width=\"300\" height=\"331\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-new-tab-1.jpg 300w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Add-new-tab-1-272x300.jpg 272w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>9. After adding the new tab, you will get options to change the Tab Title, Set Priority, and Select Content-Type.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7505 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Tab-Contents.jpg\" alt=\"Tab Contents\" width=\"293\" height=\"466\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Tab-Contents.jpg 293w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Tab-Contents-189x300.jpg 189w\" sizes=\"auto, (max-width: 293px) 100vw, 293px\" \/><\/p>\n<p>10. Selecting the Plain Text in the Tab Content will let you set any text as you wish.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7506 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Plain-text-in-Product-Dynamic-Tabs.jpg\" alt=\"Plain text in Product Dynamic Tabs\" width=\"257\" height=\"481\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Plain-text-in-Product-Dynamic-Tabs.jpg 257w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Plain-text-in-Product-Dynamic-Tabs-160x300.jpg 160w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/p>\n<p>11. If you want to show premade templates on the new tabs you should choose the Template option as the content type.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7508 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Template-option.jpg\" alt=\"\" width=\"271\" height=\"200\" \/><\/p>\n<p>12. You can style the tabs as you want by using the Style section. You will have the option to design both Tabs and Panel in this section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7510 size-full\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Desgin-Product-Dynamic-Tabs.jpg\" alt=\"Design Product Dynamic Tabs by CoDesigner\" width=\"301\" height=\"501\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Desgin-Product-Dynamic-Tabs.jpg 301w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Desgin-Product-Dynamic-Tabs-180x300.jpg 180w\" sizes=\"auto, (max-width: 301px) 100vw, 301px\" \/><\/p>\n<p>13. After styling the new tab and setting a premade <strong>Section template<\/strong> as content, this is how it looks like. For example, you can show the My Account page in the new tab. If you want to design, customize, and add new tabs to My Account, check out this <a href=\"https:\/\/codexpert.io\/blog\/steps-to-add-new-tabs-in-my-account-page\/\">post<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7517 aligncenter\" src=\"https:\/\/codexpert.io\/wp-content\/uploads\/2022\/01\/Single-Product-Page-final-2.jpg\" alt=\"\" width=\"869\" height=\"884\" srcset=\"https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Single-Product-Page-final-2.jpg 869w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Single-Product-Page-final-2-295x300.jpg 295w, https:\/\/codexpert.io\/blog\/wp-content\/uploads\/2022\/01\/Single-Product-Page-final-2-768x781.jpg 768w\" sizes=\"auto, (max-width: 869px) 100vw, 869px\" \/><\/p>\n<div class='cx-content-after'><\/div>","protected":false},"excerpt":{"rendered":"<p>WooCommerce product tabs usually display the description, specification, and review. But WooCommerce doesn\u2019t have the option to add custom product tabs without coding. CoDesigner lets you add custom product tabs to WooCommerce products. You can add these tabs without writing a single code. In this article, you will see how to add new \u201cproduct tabs\u201d [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":7706,"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-7487","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\/7487","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=7487"}],"version-history":[{"count":2,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/7487\/revisions"}],"predecessor-version":[{"id":33262,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/7487\/revisions\/33262"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media\/7706"}],"wp:attachment":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media?parent=7487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/categories?post=7487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/tags?post=7487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}