How to show product featured image only and hide product thumbnails on WooCommerce product page?

user_11670991 0
Viewed 1121

I would like to show only the first image of product on the single product page (The featured one and the same small one). In other words, hide all images but not the featured image.

enter image description here

I know that I have to use woocommerce_single_product_image_thumbnail_html (or maybe not), I have tested:

function remove_featured_image($html, $attachment_id ) {
    global $post, $product;

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

    if ( $attachment_id == $featured_image )
        $html = '';

    return $html;
}
add_filter('woocommerce_single_product_image_thumbnail_html', 'remove_featured_image', 10, 2);

But it delete all images...

Thanks for your help!

woocommerce product wordpress image php
1 Answers

The woocommerce_single_product_image_thumbnail_html hook gets the featured image of the product.

REMOVE PRODUCT THUMBNAILS

You can remove the thumbnails from the single product page with this line:

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

Add it to your active theme's functions.php.

You could also use CSS for this:

.flex-control-thumbs {
    display:none;
}

But it's not the best choice. The images should not be hidden because extra HTTP requests would be useless. Better to do this via PHP if you have the option.

EDIT PRODUCT THUMBNAILS

Based on your comment:

You can edit product thumbnails via the woocommerce_single_product_image_thumbnail_html hook. This hook generates the HTML content of each thumbnail.

// hides all product thumbnails except the featured image
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'hide_thumbnails_except_featured_image', 99, 2 );
function hide_thumbnails_except_featured_image( $html, $attachment_id ) {

    global $product;
    $new_html = '';

    // gets the featured image of the product
    $featuted_image_id = $product->get_image_id();
    // hide all thumbnails except the featured image
    if ( $featuted_image_id != $attachment_id ) {
        $new_html = $html;
    }

    return $new_html;
}

Thumbnails are automatically hidden if the only thumbnail is the featured image of the product.

The code has been tested and works. Add it to your theme's functions.php.

OVERRIDE TEMPLATE

One last method is to override the WooCommerce template.

The template can be found in: /woocommerce/single-product/product-thumbnails.php

user_104471970
Related