How to Hide Product Images in WooCommerce Product Page

Today I will show you how you can hide the product images on the woo commerce products page.

With the help of this tutorial, you will be able to hide a single product image or all the product images on your woo-commerce products page. The steps to hide product images are very simple, it will take like 2 – 3 mins, so make sure to read this post to the end to prevent any errors.

Note: Before following the tutorial make sure to make a backup of your WordPress website just in case something goes wrong, although the steps are simple and don’t interfere with WordPress core, still it’s a good thing to take a backup.

Adding Custom CSS to hide Product Images

To hide the WooCommerce product image we will be using CSS code. Now to add a custom CSS code to our website we will first have to log in to the WordPress admin dashboard.

Now in the WordPress admin dashboard go to Appearance >  Customize. In the Customize menu, look for “Additional CSS”.

wordpress customize settings

In the Additional CSS settings, you can add custom CSS codes.

Hide all product images in WooCommerce

If you want to hide all the product images from your woo-commerce products pages, then you can copy the CSS code from below and paste it in the Additional CSS box.

.woocommerce #content div.product .woocommerce-product-gallery {
display:none;
}
.woocommerce #content div.product div.summary {
float: left;
}

This code will hide every single product image from your products page in woocommerce. Now after adding this code if there is a “SALE” icon visible then you can copy and paste this css code to hide the sale icon.

.woocommerce div.product span.onsale {display: none;}

Once done, click on the Publish button at the top of your Customizer to save the changes.

Hide Single Product image in WooCommerce

If you don’t want to hide all the product images from the products page and just want to hide a single product image then you can copy this CSS code instead of the other one shown above.

.woocommerce #content div#product-14 .woocommerce-product-gallery {
display:none;
}
.woocommerce #content div#product-14 div.summary {
float: left;
}
.woocommerce div#product-14 span.onsale {
display: none;
}

Here you will need to change the Product ID from “product-14” to whatever product id you want the image to be removed from. You can see the product ID of a product by going to “Products > All Products”.

Just hover your mouse over the product that you want to hide the image of, this will display the ID of the Product. Note the id and change the id in the CSS code above from “product-14” to your product id.

woocommerce product id

Once done, click on the publish button to save the changes.

After hiding the product images from the products page, if there is a sale icon then you can remove it by using the CSS codes from below.

Hide the Sale Button in single product

.woocommerce div#product-14 span.onsale {
display: none;
}

Here change the product-14 to whatever your product iD is.

Hide the Sale Button in All products

.woocommerce div.product span.onsale {
display: none;
}

Remove Product image from a Product

This method is not recommended to use as after removing the image there will still be a placeholder of the image visible to users, which will look very bad.

If you still want to remove the product image from your products page in woocommerce instead of hiding it, then here’s how you can do that. First Go to “Products > All Products”.

Now using your mouse hover over the product that you want to remove the product image from, click on the edit option that will display when hovering over the product.

Edit WooCommerce Product

Now you will need to scroll down and look for “Product Image”, just click on the Remove Product Image option and scroll up and click on the blue “Update” button. That’s it, the product image will be now removed from the specific product.

Remove Product image in WooCommerce

Now after publishing the changes if the images are still visible then you might need to clear the cache of your browser or website. If it still didn’t work then you can comment below your website name and I will provide you with a custom CSS for your website.

That’s it, that is how you can Hide Product Images in WooCommerce Product Page easily with a few easy steps.

How To Hide Product Images In WooCommerce Product Page | WooCommerce WordPress

2 thoughts on “How to Hide Product Images in WooCommerce Product Page”

Leave a Comment

Your email address will not be published.