{"id":4868,"date":"2023-11-17T10:21:10","date_gmt":"2023-11-17T10:21:10","guid":{"rendered":"https:\/\/addify.store\/documentation\/?page_id=4868"},"modified":"2023-11-17T10:21:11","modified_gmt":"2023-11-17T10:21:11","slug":"how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager","status":"publish","type":"page","link":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/","title":{"rendered":"How to Customize the Styling of Custom Product Tabs with WooCommerce Custom Product Tabs Manager?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Styling the Custom Product Tab<\/h2>\n\n\n\n<p>To customize the styling of custom product tabs using WooCommerce Custom Product Tabs Manager, follow these steps:<\/p>\n\n\n\n<p>Go to your WooCommerce dashboard and navigate to <strong>Products <\/strong>&gt; <strong>Global Tabs.<\/strong><\/p>\n\n\n\n<p>Click on<strong> &#8220;Add New Tab&#8221; <\/strong>to begin creating a new custom product tab.<\/p>\n\n\n\n<p><strong>Styling Options:<\/strong><\/p>\n\n\n\n<p>In the custom product tab settings, locate the &#8220;Styling of Custom Tab&#8221; section.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tab Styling:<\/strong> Enable the &#8220;Tab Styling&#8221; option to open up customization options.<\/li>\n\n\n\n<li><strong>Custom Tab Icon: <\/strong>Upload an icon for the custom tab. Choose an image that represents the content or purpose of the tab effectively. This icon can help users quickly identify the type of information the tab contains.<\/li>\n\n\n\n<li><strong>Custom Tab Background Image: <\/strong>Upload a background image for the custom tab. Choose an image that complements your site&#8217;s design and enhances the overall look of the tab. Ensure that the image doesn&#8217;t clash with the text color for better readability.<\/li>\n\n\n\n<li><strong>Custom Tab Text Color: <\/strong>Define the text color of the custom tab. Choose a color that contrasts well with the background to ensure good visibility.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/un6bVN8lkjyy2kkzTfjibhmY6QW1Va1eyqSZdjJ0iCSZ4GHBnfnnKuPAXfQp-PrY4UrWqbQggKu8s01eEdJqAJ5tz9cImRBv-m6Oj2Q562fz2PIpB29e3I3LyOgn_2OSH-8tXSf-VAhU5EbOcTMUtUo\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Publish Your Custom Tab:<\/strong><\/p>\n\n\n\n<p>After customizing the tab&#8217;s appearance, click on &#8220;Publish&#8221; to save the custom product tab with the selected styling.<\/p>\n\n\n\n<p>By following these steps and paying attention to styling details, you can effectively customize the appearance of your custom product tabs in WooCommerce. This not only enhances the visual appeal of your product pages but also contributes to a positive user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Styling the Custom Product Tab To customize the styling of custom product tabs using WooCommerce Custom Product Tabs Manager, follow these steps: Go to your WooCommerce dashboard and navigate to Products &gt; Global Tabs. Click on &#8220;Add New Tab&#8221; to begin creating a new custom product tab. Styling Options: In the custom product tab settings, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":4858,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"template-parts\/multiple-page-template.php","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-4868","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Customize the Styling of Custom Product Tabs with WooCommerce Custom Product Tabs Manager? - Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Customize the Styling of Custom Product Tabs with WooCommerce Custom Product Tabs Manager? - Documentation\" \/>\n<meta property=\"og:description\" content=\"Styling the Custom Product Tab To customize the styling of custom product tabs using WooCommerce Custom Product Tabs Manager, follow these steps: Go to your WooCommerce dashboard and navigate to Products &gt; Global Tabs. Click on &#8220;Add New Tab&#8221; to begin creating a new custom product tab. Styling Options: In the custom product tab settings, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/\" \/>\n<meta property=\"og:site_name\" content=\"Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-17T10:21:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lh7-us.googleusercontent.com\/un6bVN8lkjyy2kkzTfjibhmY6QW1Va1eyqSZdjJ0iCSZ4GHBnfnnKuPAXfQp-PrY4UrWqbQggKu8s01eEdJqAJ5tz9cImRBv-m6Oj2Q562fz2PIpB29e3I3LyOgn_2OSH-8tXSf-VAhU5EbOcTMUtUo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-custom-product-tabs-manager\\\/how-tos\\\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\\\/\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-custom-product-tabs-manager\\\/how-tos\\\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\\\/\",\"name\":\"How to Customize the Styling of Custom Product Tabs with WooCommerce Custom Product Tabs Manager? - Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-custom-product-tabs-manager\\\/how-tos\\\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-custom-product-tabs-manager\\\/how-tos\\\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/lh7-us.googleusercontent.com\\\/un6bVN8lkjyy2kkzTfjibhmY6QW1Va1eyqSZdjJ0iCSZ4GHBnfnnKuPAXfQp-PrY4UrWqbQggKu8s01eEdJqAJ5tz9cImRBv-m6Oj2Q562fz2PIpB29e3I3LyOgn_2OSH-8tXSf-VAhU5EbOcTMUtUo\",\"datePublished\":\"2023-11-17T10:21:10+00:00\",\"dateModified\":\"2023-11-17T10:21:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-custom-product-tabs-manager\\\/how-tos\\\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-custom-product-tabs-manager\\\/how-tos\\\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-custom-product-tabs-manager\\\/how-tos\\\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\\\/#primaryimage\",\"url\":\"https:\\\/\\\/lh7-us.googleusercontent.com\\\/un6bVN8lkjyy2kkzTfjibhmY6QW1Va1eyqSZdjJ0iCSZ4GHBnfnnKuPAXfQp-PrY4UrWqbQggKu8s01eEdJqAJ5tz9cImRBv-m6Oj2Q562fz2PIpB29e3I3LyOgn_2OSH-8tXSf-VAhU5EbOcTMUtUo\",\"contentUrl\":\"https:\\\/\\\/lh7-us.googleusercontent.com\\\/un6bVN8lkjyy2kkzTfjibhmY6QW1Va1eyqSZdjJ0iCSZ4GHBnfnnKuPAXfQp-PrY4UrWqbQggKu8s01eEdJqAJ5tz9cImRBv-m6Oj2Q562fz2PIpB29e3I3LyOgn_2OSH-8tXSf-VAhU5EbOcTMUtUo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-custom-product-tabs-manager\\\/how-tos\\\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/addify.store\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce\",\"item\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WooCommerce Custom Product Tabs Manager\",\"item\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-custom-product-tabs-manager\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How To\u2019s WCPTM\",\"item\":\"https:\\\/\\\/addify.store\\\/documentation\\\/woocommerce\\\/woocommerce-custom-product-tabs-manager\\\/how-tos\\\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"How to Customize the Styling of Custom Product Tabs with WooCommerce Custom Product Tabs Manager?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/\",\"name\":\"Documentation\",\"description\":\"Documentation for Addify Extensions\",\"publisher\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/addify.store\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#organization\",\"name\":\"Documentation\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/addify.store\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/Asset-21-2x.png\",\"contentUrl\":\"https:\\\/\\\/addify.store\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/Asset-21-2x.png\",\"width\":6761,\"height\":1853,\"caption\":\"Documentation\"},\"image\":{\"@id\":\"https:\\\/\\\/addify.store\\\/documentation\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Customize the Styling of Custom Product Tabs with WooCommerce Custom Product Tabs Manager? - Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/","og_locale":"en_US","og_type":"article","og_title":"How to Customize the Styling of Custom Product Tabs with WooCommerce Custom Product Tabs Manager? - Documentation","og_description":"Styling the Custom Product Tab To customize the styling of custom product tabs using WooCommerce Custom Product Tabs Manager, follow these steps: Go to your WooCommerce dashboard and navigate to Products &gt; Global Tabs. Click on &#8220;Add New Tab&#8221; to begin creating a new custom product tab. Styling Options: In the custom product tab settings, [&hellip;]","og_url":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/","og_site_name":"Documentation","article_modified_time":"2023-11-17T10:21:11+00:00","og_image":[{"url":"https:\/\/lh7-us.googleusercontent.com\/un6bVN8lkjyy2kkzTfjibhmY6QW1Va1eyqSZdjJ0iCSZ4GHBnfnnKuPAXfQp-PrY4UrWqbQggKu8s01eEdJqAJ5tz9cImRBv-m6Oj2Q562fz2PIpB29e3I3LyOgn_2OSH-8tXSf-VAhU5EbOcTMUtUo","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/","url":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/","name":"How to Customize the Styling of Custom Product Tabs with WooCommerce Custom Product Tabs Manager? - Documentation","isPartOf":{"@id":"https:\/\/addify.store\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/#primaryimage"},"image":{"@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/#primaryimage"},"thumbnailUrl":"https:\/\/lh7-us.googleusercontent.com\/un6bVN8lkjyy2kkzTfjibhmY6QW1Va1eyqSZdjJ0iCSZ4GHBnfnnKuPAXfQp-PrY4UrWqbQggKu8s01eEdJqAJ5tz9cImRBv-m6Oj2Q562fz2PIpB29e3I3LyOgn_2OSH-8tXSf-VAhU5EbOcTMUtUo","datePublished":"2023-11-17T10:21:10+00:00","dateModified":"2023-11-17T10:21:11+00:00","breadcrumb":{"@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/#primaryimage","url":"https:\/\/lh7-us.googleusercontent.com\/un6bVN8lkjyy2kkzTfjibhmY6QW1Va1eyqSZdjJ0iCSZ4GHBnfnnKuPAXfQp-PrY4UrWqbQggKu8s01eEdJqAJ5tz9cImRBv-m6Oj2Q562fz2PIpB29e3I3LyOgn_2OSH-8tXSf-VAhU5EbOcTMUtUo","contentUrl":"https:\/\/lh7-us.googleusercontent.com\/un6bVN8lkjyy2kkzTfjibhmY6QW1Va1eyqSZdjJ0iCSZ4GHBnfnnKuPAXfQp-PrY4UrWqbQggKu8s01eEdJqAJ5tz9cImRBv-m6Oj2Q562fz2PIpB29e3I3LyOgn_2OSH-8tXSf-VAhU5EbOcTMUtUo"},{"@type":"BreadcrumbList","@id":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/how-to-customize-the-styling-of-custom-product-tabs-with-woocommerce-custom-product-tabs-manager\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/addify.store\/documentation\/"},{"@type":"ListItem","position":2,"name":"WooCommerce","item":"https:\/\/addify.store\/documentation\/woocommerce\/"},{"@type":"ListItem","position":3,"name":"WooCommerce Custom Product Tabs Manager","item":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/"},{"@type":"ListItem","position":4,"name":"How To\u2019s WCPTM","item":"https:\/\/addify.store\/documentation\/woocommerce\/woocommerce-custom-product-tabs-manager\/how-tos\/"},{"@type":"ListItem","position":5,"name":"How to Customize the Styling of Custom Product Tabs with WooCommerce Custom Product Tabs Manager?"}]},{"@type":"WebSite","@id":"https:\/\/addify.store\/documentation\/#website","url":"https:\/\/addify.store\/documentation\/","name":"Documentation","description":"Documentation for Addify Extensions","publisher":{"@id":"https:\/\/addify.store\/documentation\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/addify.store\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/addify.store\/documentation\/#organization","name":"Documentation","url":"https:\/\/addify.store\/documentation\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/addify.store\/documentation\/#\/schema\/logo\/image\/","url":"https:\/\/addify.store\/documentation\/wp-content\/uploads\/2023\/11\/Asset-21-2x.png","contentUrl":"https:\/\/addify.store\/documentation\/wp-content\/uploads\/2023\/11\/Asset-21-2x.png","width":6761,"height":1853,"caption":"Documentation"},"image":{"@id":"https:\/\/addify.store\/documentation\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/4868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/comments?post=4868"}],"version-history":[{"count":1,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/4868\/revisions"}],"predecessor-version":[{"id":4869,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/4868\/revisions\/4869"}],"up":[{"embeddable":true,"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/pages\/4858"}],"wp:attachment":[{"href":"https:\/\/addify.store\/documentation\/wp-json\/wp\/v2\/media?parent=4868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}