In some cases, you might need to remove the product Featured image from the Single Product image gallery on your WooCommerce store, mostly because of the design decision.
Introduction
WooCommece comes with options to assign product Featured images and also to upload a product gallery that can contain additional product images and illustrations.
After you add the Featured image and gallery images, WooCommerce will display them all inside the product gallery, including the product image as well.
To be able to remove it there, we will need to add a small PHP snippet that will allow us to use WooCommerce single product hook and apply the filter.
After that, the product Featured image will be visible on the Shop products grid, Home page, and Single product page as an image, but it will be stripped from the Woo Single product image gallery.
WooCommerce – Remove Product image from Single product page
We will need to modify the functions.php file of your theme to apply this filter hook. It is strongly advised to use a child theme for applying this code as once you update the parent theme, the modification will be saved in the child theme.
So, navigate to your child’s theme and open the functions.php file for editing, and scroll to the bottom.
If you don’t have experience with modifying WooCommerce, please check our guide on how to customize WooCommerce templates.
Copy the code below and paste this at the end of the file.
/**
* This code snippet will remove product featured image from single product image gallery
*/
function wrd_woocommerce_remove_image_from_gallery ( $html, $attachment_id ) {
global $post, $product;
$attachment_ids = $product->get_gallery_image_ids();
if ( ! $attachment_ids ) {
return $html;
}
$featured_image = get_post_thumbnail_id( $post->ID );
if ( is_product() && $attachment_id === $featured_image ) {
$html = '';
}
return $html;
}
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'wrd_woocommerce_remove_image_from_gallery', 10, 2 );
Now, save the changes to the functions.php file. If you are modifying the file locally, re-upload it inside the child theme folder and overwrite the old file.
That’s it, now just open one of your single product pages and check the photo gallery. It should display the product gallery without the single product featured images.
Conclusion
After applying this filter, we now have a fully separate product photo gallery. Our product Featured image can now be distinguished from the rest of the photo gallery.
If you want to add something or ask some questions, please feel free to add your comment below.
