Hide WooCommerce page title in WordPress - Easy, in seconds!

WooCommerce comes with many default elements on their pages, some useful some not. Some get annoying to have on pages when they seem to have no purpose. One element you may want to remove is the shop page title on the default shop page in WooCommerce.

To hide or remove the page title in WooCommerce you have to add custom CSS or PHP code to your theme files to remove the title from your page. To do this, log into your WordPress site and in the left side menu go to Appearance > Customize and the find and click Additional CSS to insert the custom code found below.

Hide title on WooCommerce shop page (without a plugin!)

Hide shop title with custom CSS

This code should be added in the additional CSS section of your website, or any other custom CSS area on your website. To find a safe CSS area to put the code, on the left WordPress menu find and click Appearance > Customize and the find and click Additional CSS and insert the custom code below. This CSS code works by targeting the container of the title and hides it completely. The titles HTML code is still there in the loaded on the page, but is hidden from any user in the front end. This is perfectly acceptable to use in most situations.

.woocommerce-products-header {
   display: none !important;
}

The CSS method should be used if you dont feel comfortable adding custom code to your website as the PHP method has more chances to go wrong.

Please not that this CSS code will also remove the titles on the category and product archive pages. If you want it to only hide on the main shop page, you must the PHP code below.

Remove shop title with custom PHP

If you are a little more comfortable with editing code or are looking to only hide the main shop page title without effecting other titles on the archive and category pages, This PHP code should be added in your functions.php file. It works by when the page is rendering it firsts checks to see if you are loading the shop page and then when the page tries to retrieve the title it returns false, or nothing.

add_filter('woocommerce_show_page_title', 'bbloomer_hide_shop_page_title');
 
function bbloomer_hide_shop_page_title($title) {
   if (is_shop()) $title = false;
   return $title;
}

Removing the title on the product category pages

Removing category title with custom PHP

You can also remove the page title on the WooCommerce product category pages too.

This PHP code Should be added to your functions.php file in your WordPress theme to remove the category title.

add_filter('woocommerce_show_page_title', 'bbloomer_hide_cat_page_title');
 
function bbloomer_hide_cat_page_title($title) {
   if (is_product_category()) $title = false;
   return $title;
}

Removing category title with custom CSS

This CSS code should be added to your themes CSS file or in additional CSS, which is found on the left WordPress menu under Appearance > Customizer > Additional CSS. If you are unfamiliar with CSS, I put together a quick post that can teach you the CSS basics really quickly.

.tax-product_cat .woocommerce-products-header {
   display: none !important;
}

Removing the title on the WooCommerce archive pages

Removing archive title with custom PHP

This PHP code should be added to your functions.php file in your WordPress theme to remove the WooCommerce archive title.

add_filter( 'woocommerce_show_page_title', '__return_null' );