How to Hide Product Title on Shop Page in WooCommerce
First impressions are ultimately important. For WooCommerce stores, the Shop page is considered the first place to strike visitors and leave an impression. So, the amount of time that a visitor lingers on your shop page depends on the arrangement and design of your shop page. In some cases, to Hide Product Title on Shop Page in WooCommerce is a must.
Till the end of today’s blog post, you’ll be able to know whether Hiding Product Title on Shop Page in WooCommerce would do your WooCommerce Shop page well. Also, you’ll be provided with 2 tools that can help you do it effectively and almost effortlessly.
What to wait for? Just join us and finish the journey.
In what case should you Hide Product Title on WooCommerce Shop Page?
Hiding Product Title on Shop Page is not always recommended for every WooCommerce store. However, in certain circumstances, it’ll be a wise choice that can enormously contribute to your store’s conversion rate.
Though WooCommerce store owners hardly notice concealing Product Title on Shop Page, you may find it helpful for your store’s image if it sees one of the following cases.
- Your customers tend to be image-oriented people (like children, artists,…).
- Visual products are your WooCommerce store’s strength.
- Images are more compatible with the concept or design of your WooCommerce store.
- Your WooCommerce store sells products whose appearance is what customers are looking for.
How to Hide Product Title on Shop Page in WooCommerce
Now as you saw the importance of Hiding Product Title on Shop Page for better visual effects of your WooCommerce store, you may wonder how to do it in practice.
You can do this in 2 ways. The first method utilizes entering CSS into the “Additional CSS” section of theme customizer. However, this way contains a risk of future CSS breaking in case it’ll be no longer compatible with the versions of your WooCommerce or your theme.
A safe path to follow must be using Divi Page Builder with which you can take control over all these things by just clicking on one button.
Below are both methods in practice. Choose one for you and follow the instructions.
Tool 1: CSS
One of the advantages of opting for CSS is that this can help you Hide Product Title not only on Shop Page but also on any other pages of your site such as the Related Products section or Product Category pages.
In the Additional CSS section of your Theme Customizer, try to paste this code:
.woocommerce-loop-product__title {
display: none;
}
Tool 2: Divi Page Builder
The Divi Theme and Page Builder are rather unique. You can easily create the unique visual effects of your WooCommerce store without adding lines of code and keeping track of code performance.
For this section, you may simply choose NOT to display the Product Titles beneath the photos on the Shop Page within the Divi Shop Module.
This isn’t as straightforward as other Divi functions, however you must change the product title style to 1px font size, line height to 1em, and font color to the same as your backdrop.
Final thoughts
With only 2 simple tools, you can easily Remove the Product Title of your WooCommerce Shop Page. Keep in mind that you should make careful decisions whether you should do that because it may make your Shop Page unattractive and make your customers get lost in your Shop, though it brings incredible results if this is exactly what you need for your WooCommerce store.
