If your WooCommerce store sells highly visual products, sometimes the preference is to hide the product title on Shop Pages and in any sections of the website where the product image appears with the product title underneath it.
This can easily be achieved with some CSS entered into the “Additional CSS” section of the theme customizer, OR (as is always our preference) you could be using a decent page builder that allows you to control these things at the click of a button – meaning you don’t run the risk of your CSS breaking in the future as it becomes out of date with current versions of WooCommerce or your theme.
Using CSS to hide WooCommerce Product Title on Shop Page
This CSS will remove the WooCommerce product title from the Shop Page but also anywhere where the grid of products in your store appears with an image and a product title below. So for example in the related products section of your Product Page – this CSS will hide the Product Title under related products. This will also hide the Product Title from product category pages and any other archive pages.
Enter this code in the “Additional CSS” section of your Theme Customizer:
.woocommerce-loop-product__title {
display: none;
}
Using Divi Page Builder to hide product title on shop page with WooCommerce
The Divi Theme and Page Builder are pretty special. So without needing to enter lines of code and keep track of which code does what, you can customise the exact visual appearance of your WooCommerce store with ease.
In this case, you can literally select within the Divi Shop Module NOT to display the Product Titles under the images on the Shop Page.
This isn’t quite as simple as other Divi functions – but essentially you must set the product title style to 1px font size, line height to 1em and set the font colour to the same as your background.
Job done.
woocommerce hide product title on shop page
