How to Remove/Hide Image From WooCommerce Product Page

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.

  1. Go to Appearance > Customize from your admin dashboard.
  2. Click Additional CSS.
  3. 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.

  1. Go to Appearance > Customize from your admin dashboard.
  2. Click Additional CSS.
  3. 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.

Leave a Comment