Remove WooCommerce Single & Thumbnail Images From Product Details Page

WooCommerce enables you to add both a featured image (single product image) and product thumbnails ( gallery images ) which are displayed below your main product image on your product details page.

If you’ve already added images, you can simply remove them manually, or use PHP code.

If you have lots of product pages and/or thumbnails, you can save time by using code to remove them rather than do the job manually.

There’s 2 ways to use PHP code to remove the images from your single product details page.

1. You can add one line of code to your child themes functions.php file to remove all images on all pages.
2. Or you can add a custom function to your child themes functions.php file to control which pages the images are removed from.

1. Remove All Images On All Single Product Pages

Add this code to your child themes functions.php file.

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

2. Conditionally Remove Product Featured Images

Simply copy all this code from the view raw link and paste it at the end of your child themes functions.php file.

To control which pages your images are removed from, simply modify the Woo Commerce conditional tag in the code above.

1. Remove All Thumbnail Images On All Single Product Pages

Add this code to your child themes functions.php file.

remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

2. Conditionally Remove Product Thumbnail Gallery Images

Simply copy all this code from the view raw link and paste it at the end of your child themes functions.php file.

Remove Main Product Image & Display Thumbnails

This will remove both the main featured image on all product pages and only display the thumbnails.

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_thumbnails', 20 );

You may also need to change the thumbnail sizes, positioning etc to fill the gap.

CSS-Remove Product Thumbnail Gallery Images Only

You can also add CSS code to your child themes style.css file to remove the thumbnails only and keep the main image displayed.

.single-product .thumbnails {
display: none;
}

CSS-Remove Product Main Featured Images Only

Or remove the main product image.

.single-product .woocommerce-main-image {
display: none;
}

If you find the plugins style sheet over-riding our themes CSS code, you may have to add !important to the declaration.

Note: You may find your product title and short description move after removing images using PHP code which you can fix using CSS.

Example: Before Images Removed

Example: After Images Removed

Related Tutorials

• Remove Single Product Image Per Product