How to remove duplicate headers from product tabs in WooCommerce.

cloned heads

I don’t know if you’ve noticed but, by default, WooCommerce product tabs have a very bad habit, and that is to repeat the tab name when it is open with a header with H2 tagging.

Although it is also true that this does not happen with other themes such as Proteo, Astra or Divi, you will find it in all WordPress default themes, Storefront and many others.

It is unnecessary to include a repeated tab name within the tab itself, plus it adds SEO tagging that is often completely unnecessary, sometimes even detrimental.

For these reasons, if you want to remove those repeated tab name headers there are several ways to do it.

How to remove the description tab header

For many people it is more than enough to remove the repeated header from the description tab, since it is the one that is opened by default.

If this is your case the following code is what you want:

/* Remove description heading tag from product */
add_filter( 'woocommerce_product_description_heading', '__return_null' );Code language: JavaScript (javascript)

Add it to the end of the active child theme’s functions.php file and you’re done.

How to hide all repeated headers from product tabs

In this case the simplest solution is with some CSS, this one:

/* Hide heading tags from product */
.woocommerce-tabs h2 {
display: none;
}Code language: CSS (css)

However, if you prefer to hide only some of the tabs, not all of them, the CSS code will change.

/* Hide description header tab */
.woocommerce-tabs #tab-description h2 {
display: none;
}Code language: CSS (css)
/* Hide reviews header tab */
.woocommerce-tabs #tab-reviews h2 {
display: none;
}Code language: CSS (css)
/* Hide additional info header tab */
.woocommerce-tabs #tab-additional_information h2 {
display: none;
}Code language: CSS (css)

How to hide custom tab header

What if I use a plugin to customize tabs?

I don’t know how it’s done with every custom tab plugin for WooCommerce, but if you use the one I usually recommend, Custom Product Tabs for WooCommerce, you have a feature with which to remove all the headers from your custom tabs, this one:

/* Remove custom header tags from products */
add_filter( 'yikes_woocommerce_custom_repeatable_product_tabs_heading', '__return_false' );Code language: JavaScript (javascript)

Just add the code to the theme’s functions.php file, as usual.

How useful was this post?

Click on a smiley to rate it!

Average rating 4.8 / 5. Vote count: 4

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

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

Scroll to Top