Product Images in Category blocks on Shop page

Resolved Docwatsons
(@docwatsons)

2 years, 2 months ago
Maybe I just don’t know the right question to search for. The services I sell do not benefit from an image. I’ve found snippets to remove the image block from individual products and in the shopping cart, but not from my Shop page where I display my products in category blocks. I would like to remove the placeholder (if that’s what it’s called – a sketch of a mountain and a sun or moon) and have no image, just text, the price, and an “add to cart” button.
- This topic was modified 2 years, 2 months ago by Docwatsons.
The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Abiola
(@oaoyadeyi)

2 years, 2 months ago

@docwatsons

I found a guide that could help here: https://www.themelocation.com/how-to-remove-product-images-from-archive-page-in-woocommerce/

I hope this helps!

Thread Starter Docwatsons
(@docwatsons)

2 years, 2 months ago

Thank you, but that had no effect. I’ve switched to a Woo block that is just a list of categories, which is cleaner. I would rather have the Add To Cart buttons, but this will do for now.

Igor H
(@ihereira)

2 years, 2 months ago

Hello,

I would like to remove the placeholder (if that’s what it’s called – a sketch of a mountain and a sun or moon) and have no image, just text, the price, and an “add to cart” button

Link to image: https://snipboard.io/0RypKL.jpg

If understood correctly, you would like a result like an image above.

This is possible using the plugin:
https://wordpress.org/plugins/hide-product-image-for-woocommerce/

I hope this helps.

Thread Starter Docwatsons
(@docwatsons)

2 years, 2 months ago

This is generated with a WooCommerce block called “Products by Category”. I want to get rid of the images here.
I’ve created a demo page
Thread Starter Docwatsons
(@docwatsons)

2 years, 2 months ago
This is generated with a WooCommerce block called “Products by Category”. I want to get rid of the images here.
Screenshot
It’s in these blocks I want to remove the images.
- This reply was modified 2 years, 2 months ago by Docwatsons.
- This reply was modified 2 years, 2 months ago by Docwatsons.
- This reply was modified 2 years, 2 months ago by Docwatsons.
MayKato
(@maykato)

2 years, 2 months ago
Hi @docwatsons

It’s in these blocks I want to remove the images.

You can hide images with custom CSS. Under Appearance > Customize > Additional CSS, you can add the following code:
```
.wc-block-grid__products .wc-block-grid__product-image {
	display:none !important;
}
```
If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).
Thread Starter Docwatsons
(@docwatsons)

2 years, 2 months ago

Thank you very much MayKato, that’s exactly what I was looking for. And thank you for the tip on the tutorials, I’ll check them out.