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 :
/* * Remove Product Image */ .woocommerce #content div .woocommerce-product-gallery { display:none; } .woocommerce #content div div.summary { float: left; } .onsale { display: none; }
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.
// 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 );
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.
.woocommerce-page #content div.product div.summary { width:100%; }
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.
See Also: How To Hide Price Range for WooCommerce Variable Products