How to Remove Product Image WooCommerce

Are you looking for a quick and easy way to remove product images from WooCommerce,  in this post I will share with you an excellent solution that will quickly help you to always remove the product image from the single product template?  I run into the same problem when I was creating a custom product page for the WooCommerce services website, I came up with the ‘remove product image WooCommerce code snippet’ that you too can use to resolve this issue.

Remove Product Image WooCommerce Using CSS

You can use CSS to hide the product by changing the display property in your WooCommerce theme.

You can apply this code in the customizer to test it since it allows you to see how it looks in the preview as you can see in the image below :

The following is the CSS code that you can add to remove the WooCommerc product image :

[php] /*
* Remove Product Image
*/

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

.onsale {
display: none;
}

[/php]

Remove Product Image WooCommerce Using Custom Filter

You can also remove the WooCommerce product image using the custom action filter that gets rid of the image.

I tried this and as you can see on the image below, you can also use this code in the functions.php of your child theme.

The following is the code snippet that you can use to remove the product image as shown in the image above.

[php] // Remove image from product pages
remove_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_images’, 20 );

// Remove sale badge from product page
remove_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_sale_flash’, 10 );

[/php]

After you remove the product image, you also need to make the page to be full width and you can achieve this by adding the following CSS code in your custom CSS code or in your child theme styles.

[php] .woocommerce-page #content div.product div.summary { width:100%; }

[/php]

Conclusion

In this post, we have looked at how to remove product images in WooCommerce, as you can see there are two steps involved in removing the product image from the WooCommerce product page.

You can easily and quickly use this solution in your WooCommerce theme or plugin development.

Just in case you are stuck, I am always ready to help you implement this solution and also to further customize it to fit your specific needs.

You can reach out by writing to me or filling out the form on this page – contact me.

Similar Articles

1. How to Delete a Category in WordPress
2. How to Add Custom Meta Box To WooCommerce Product
3. How to Hide Product Image on Cart Page WooCommerce
4. How to Check if User is Logged In WordPress
5. How to Fix Checkout Is Not Available Whilst Your Cart Is Empty WooCommerce
6. How to Redirect a WordPress Page Without Plugins?
7. How to Change Out Of Stock Text in WooCommerce
8. WooCommerce Create Custom Single Product Page
9. How to Add Video In Product Image WooCommerce
10. How to Check If Product Page In WooCommerce
11. How to Remove Product Category from URL WooCommerce Without Plugin
12. How to Remove Google Fonts from WordPress Site
13. How to Remove Product Image Placeholder In WooCommerce
14. How to Get Current Product Category Name in WooCommerce
15. How to Edit WooCommerce Sidebar Shop & Category
16. How to Delete Uncategorized Product Category WooCommerce