How to Hide Featured Image on Single Product Page

It is possible to upload a featured image and multiple thumbnail images when you create a product when you create a WooCommerce store. WooCommerce is flexible to customization, as you will see in this brief tutorial.

Table of Contents

WooCommerce Product Featured Image

WooCommerce uses the featured image to represent a product in product archive pages like the Shop page, home page, category page, product search results page, etc. Moreover, WooCommerce uses the featured image on the product page along with thumbnail images in the product image gallery.

WooCommerce Hide Featured Image on Single Product Page

However, you may want not want to include the featured image in the product image gallery. In this post, you will see how it is very easy to hide the WooCommerce product featured image from the product image gallery in single product single pages.

WooCommerce Hide Featured Image on the Single Product Page Gallery

It is very easy to add a product gallery when editing a product:

This is how the images appear on the front end:

From the screenshot, you can see that the featured image is repeated twice.

Steps to Hide Featured Image on the Single Product Page Gallery

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to hide the featured image on the single product page gallery.
Click anywhere on the text editor and scroll to the bottom of the funcitons.php file. Paste the code at the end:

/**

 * Exclude the featured image from appearing in the product gallery, if there's a product gallery.

 *

 * @param array $html Array of HTML to output for the product gallery.

 * @param array $attachment_id ID of each image variables.

 */

function njengah_woocommerce_remove_featured_image( $html, $attachment_id ) {

            global $post, $product;

            // Get the IDs.

            $attachment_ids = $product->get_gallery_image_ids();

            // If there are none, go ahead and return early - with the featured image included in the gallery.

            if ( ! $attachment_ids ) {

                        return $html;

            }

            // Look for the featured image.

            $featured_image = get_post_thumbnail_id( $post->ID );

            // If there is one, exclude it from the gallery.

            if ( is_product() && $attachment_id === $featured_image ) {

                        $html = '';

            }

            return $html;

}

add_filter( 'woocommerce_single_product_image_thumbnail_html', 'njengah_woocommerce_remove_featured_image', 10, 2 );

Click on the Save changes button at the bottom of the text editor screen.
Now you have successfully added the code snippet required to hide product featured image from the product image gallery on single product pages. This will be the outcome on the front end:

Conclusion

There are times you may want to hide the featured image in the product image gallery on the single product page. However, WooCommerce does not provide you with the option to configure your store that way. In this post, you have seen how it is very easy to achieve that by adding a small PHP code snippet to the functions.php file on your theme.

Editorial Staff

How to Hide Featured Image on Single Product Page

WooCommerce Product Featured Image

WooCommerce Hide Featured Image on the Single Product Page Gallery

Steps to Hide Featured Image on the Single Product Page Gallery

Conclusion

Similar Articles

Related