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.
- You can add one line of code to your child themes functions.php file to remove all images on all pages.
- 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
best tricks for sidebars at woocommerce, with incompatible themes
if you can’t see the sidebar of your theme when using woocommerce and the sidebar is not showing correctly , just see the name of sidebar at your theme’s folder , for example: if the sidebar name is: sidebar-left.php, sidebar-right.php or anything else depends on where do you want to show up your sidebar, you should first copy and rename it to “sidebar.php” , because woocomerce first looks for sidebar.php and then shows up the sidebar at your site.
this is especially right when you have problem at product and catalog pages .
this don’t need coding or modifying css files anymore.
Simply add the post i.d between the brackets in this line of the code
Hi
Thank you for this tutorial
Can you please tell me how I would remove the picture from ONE product only for example a product with ID = 1329
Many thanks
Great article! My question is do you have a suggestion for removing the “link” for the image on the product page?
hi
i don’t know any coding. So can you specify the files name have to change these code to remove the thumbnails from all the pages because i don’t want to use any image on my products.
The code goes in your child themes functions.php file Kamrul