Duplicate first thumbnail on Woocommerce single product page

Have you noticed that when a product has more than 1 image within the thumbnail area of single product page the first and the second thumbnail are the same? This might be because I use _S starter theme and build everything from scratch, maybe other themes already have done something about it.

I checked StoreFront, the official theme of Woocommerce and it didn’t have that problem. Although at first, I tried to solve the problem with a line of jQuery – which worked by the way – but jquery doesn’t seem the way to go.

$ols = jQuery('ol.flex-control-thumbs li');
console.log($osls.length);
$ols[0].replaceWith( $ols[$ols.length -1] );

So I am going to dig into the code to find out the problem.

The code for displaying a single product is inside

content-single-product.php

We have this hook there

do_action( 'woocommerce_before_single_product_summary' );

And the function

woocommerce_show_product_images

is hooked to this action hook.
This function does nothing except including product-image.php

wc_get_template( 'single-product/product-image.php' );

This file is responsible for outputting the main image and providing another action hook:

do_action( 'woocommerce_product_thumbnails' );

OK HOLD IT…
The problem was not with the script. The fact is that Woocommerce shows the feature image first and the galleries next. One of my tricks to get enough test data is to scrape shop online-stores and extract some real products from remote sites. When I add the images I add the first image both as the feature image and gallery image and that causes duplicate thumbnail on the single-product page. Phew…

Leave a Reply

Your email address will not be published. Required fields are marked *