Knowledge Base

How to Hide Tab Headings (in CSS or PHP)

Article Last Updated: March 4, 2021

If you want to hide the headings in your WooCommerce tabs, here are some snippets to do just that.

CSS

First, the simple way, using css:

.woocommerce .woocommerce-tabs h2 {
    display: none;
}

This will hide the tabs from view, but the html will still exist on the page. You can add that snippet to your theme’s CSS bundle, or to the Additional CSS section of your site’s Customizer.

The exact classes can vary from theme to theme, so be sure to inspect the element using the developer tools included in your browser.

PHP

Your next option is to add a snippet to your functions.php file. This feature is also included as part of our premium version of the plugin.

add_action( 'init', 'yikes_hide_tab_title', 10 );
function yikes_hide_tab_title(){
    // Hide our custom tab's title.
    add_filter( 
        'yikes_woocommerce_custom_repeatable_product_tabs_heading', 
        '__return_false', 
        99 
    );

    // Hide the description tab's title.
    add_filter( 'woocommerce_product_description_heading', '__return_false', 99 );

    // Hide the additional information tab's title.
    add_filter( 'woocommerce_product_additional_information_heading', '__return_false', 99 );
}

In this latter scenario, the html will not exist on the page at all.