In a recent Business Bloomer Club Slack thread, a member inquired about removing product images across their WooCommerce store. For specific cases, like businesses selling digital or intangible products, visual product images may not be relevant or necessary.
In this instance, the user’s client sells DNA tests for animals, where images are not required. Instead of using CSS to hide the images, which may still load them in the background, it’s often more efficient to remove them directly through code. Here’s a quick guide to doing just that with a snippet.
Removing Images from the Single Product Page
To stop images from appearing on individual product pages, WooCommerce provides a handy hook you can use to completely unload them. Add the following code snippet to your theme’s functions.php file:
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
This line effectively removes the primary product image from loading on each single product page.
Removing Images from the Shop Page
Similarly, if you want to remove images from the main shop page where products are displayed in a grid, use this snippet:
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
This line prevents product thumbnails from appearing on the main shop or category pages, simplifying the layout and saving bandwidth on image loads.
Final Notes
With these snippets, your store will no longer load product images, helping create a cleaner look, particularly suited for non-visual products like digital files, online services, or test kits. If you decide to re-enable images later, simply remove or comment out these lines from your functions.php file.
By implementing these simple yet effective snippets, WooCommerce users can better tailor their store layout to meet their unique product presentation needs.
