If you need to remove/hide the featured image from your WooCommerce product page you can apply this simple CSS tweak.
WooCommerce allows you to upload a product image when you create a new product. In WordPress, it’s also called a featured image. If for some reason you no longer want to display these images you can follow one of these options.
How to Hide Product Images in WooCommerce
Hide Single Product Image
Featured/Product images can be removed where you configured it. If you only have a couple of products you can just remove it from the WooCommerce Edit Product menu. However, a placeholder may still be shown. Whether you have the featured image set or a placeholder is being shown, you can follow these steps to hide it all.
- Go to Appearance > Customize from your admin dashboard.
- Click Additional CSS.
- Add this piece of CSS code in the textarea (Replace 31 with your WooCommerce product ID):
.woocommerce #content div#product-31 .woocommerce-product-gallery {
display:none;
}
.woocommerce #content div#product-31 div.summary {
float: left;
}
The second CSS is to correctly align the short description of product 31 without affecting other products.
Hide All Product Images
This option works out great if you have a lot of products and you don’t want to selectively remove from each one. This option is also very flexible as you can revert everything just by removing the CSS.
- Go to Appearance > Customize from your admin dashboard.
- Click Additional CSS.
- Add this piece of CSS code in the textarea:
.woocommerce #content div.product .woocommerce-product-gallery {
display:none;
}
This CSS will hide the product image and the placeholder image of all the products (WooCommerce shows a placeholder image for products that don’t have any featured image). However, the short description will still align to the right side of the content area. So you might want to add this CSS code to make it aligned to the left instead:
.woocommerce #content div.product div.summary {
float: left;
}
Please note that this method of hiding doesn’t actually remove the image from the page content. It only makes the image invisible. Search engines and users can still find the image in the HTML source. If you don’t want the image to be present in the page, you can try my free plugin (Hide Product Image for WooCommerce) instead.
The issue with #1 is that WooCommerce has a placeholder image that is added if a Featured Image is not uploaded, so that wont work anymore.
@Lucas, I have just updated the code.
Hi I am a beginner and did this and it messed up my single product page. I did this but didn’t want it anymore so deleted the css code. But now the images still do not show, when I add them to a page via a woocommerce element single product widget. i’m using elementor and embark theme. can you please help me?
I love you! It works like charm, thanks a lot!
Hi, I just want you to know that this code totally messed up the widget for Woocommerce Single Product Page. Even after I had deleted the CSS, the images were not showing at all, just a blank space. I had to deactivate/reactivate all plugins and only now does the image now show but only after I have updated and refreshed the page. I have like 18 products to edit so now I have to do this for every single one adding like 36 extra steps/refreshes. I don’t recommend this for Elementor and I think you should write this on the page because maybe beginners/others will try it and it will mess up the widget.
@Karen, Do you have any caching plugin installed? Once you remove the CSS code it should have no effect on your product page.
I added the CSS code to remove the image. Then I added the code to move it to left align. Worked great! Thanks! I need one more thing. I only have one item in my WooCommerce Products. That is a registration form for an annual event (not published to the public yet) built with Gravity Forms. I need this form to be full width instead of half width as it is now. I’m sure it’s something simple. Can you help?
Thanks
Steve
I have the same issue. Did you find a solution?
Just in case you haven’t found the answer, I just came across this fix. Instead of the {float: left;} use { width: 100% !important; } that did the trick for me.
Hi there… This worked fine for me!
but i want to remove images and image placeholder from Category Page
is there any code for this? I want to have simple List of products with title, description, price, add to cart
thank you!
I have this same question. Can you help?
Drop me a mail,
essop@strathostess.co.za, will send the codes to youHello! I am looking to do the same: simple List of products with title, description, price, add to cart
thank you!
Drop me a mail please,
essop@strathostess.co.zaOMG you rock. This worked.when several other of my other usual tricks for retheming woocommerce products pages didn’t. Thanks.
Hi. Have an image on my checkout page.
Went to the library and removed it and now it shows as a ?
How do i remove it?
The image had the text “verified by payfort”
@Prashant, Please provide a link to the page in question so I can take a closer look.
CSS worked awesome for single product, thank you much. another question, what CSS can i use to remove the image and image placeholder from all products in the shop page.
I’m selling intangible and tangible products in my woocommerce shop, I want to remove the product image and placeholder for intangible products only so how do I that?
Nice post and content
How to hide product gallery from displaying on woocommerce single product page and to show those variant product only when we scroll or select the variant (color or size).
Thank you.
Perfect. Worked a treat for me. How can I do this for just one product? How would I add the page ID to the CSS?
Thanks!
I want to add selection on the product page How can I do it.
@Manuka, Can you please clarify what you are trying to do?
This works great for me as well, however, I am looking to find a way to do the same thing based off of the category instead of the product id, so I can put everything without a pic into one category instead of having to add/remove the code every time I change a product.
Hey. Just did it on my site.
snippet worked fine. thank you