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;
}
Lucas says
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.
admin says
@Lucas, I have just updated the code.
Karen says
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?
dreamer says
I love you! It works like charm, thanks a lot!
Karen says
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.
admin says
@Karen, Do you have any caching plugin installed? Once you remove the CSS code it should have no effect on your product page.
Steve Dixon says
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
Terrie says
I have the same issue. Did you find a solution?
Terrie says
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.
mom says
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!
Cindra McCoy says
I have this same question. Can you help?
Essop Rahiman says
Drop me a mail,
essop@strathostess.co.za, will send the codes to youBelle says
Hello! I am looking to do the same: simple List of products with title, description, price, add to cart
thank you!
Essop Rahiman says
Drop me a mail please,
essop@strathostess.co.zaLila says
OMG you rock. This worked.when several other of my other usual tricks for retheming woocommerce products pages didn’t. Thanks.
PRASHANT CHAINANI says
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”
admin says
@Prashant, Please provide a link to the page in question so I can take a closer look.
Essop Rahiman says
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.
Sathyasri says
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?
Anuj says
Nice post and content
swrang says
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.
Tess says
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!
Manuka Ranmirra says
I want to add selection on the product page How can I do it.
Noor Alam says
@Manuka, Can you please clarify what you are trying to do?
David Badyna says
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.
Art says
Hey. Just did it on my site.
snippet worked fine. thank you