Make thumbnails in woocommerce replace the main image instead of opening fancybox

by

I would like the thumbnails underneath the main image on the single product page to replace the main image when they are either clicked or on hover, I prefer hover. Right now the thumbnails just open in their own fancybox. This is a very common feature on most big ecommerce sites and it’s weird that it’s not an option in woocommerce. Any help will be greatly appreciated.

5 s
5

I have just achieved the effect by my own. I will post it here in case others find this thread:

jQuery(document).on('click','.thumbnails .zoom', function(){
        var photo_fullsize =  jQuery(this).find('img').attr('src').replace('-100x132','');
        jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
        return false;
    });

.replace(‘-100×132’) eliminates the size from url of the image to return the full image and not the thumbnail. Replace it with your own thumbnails sizes.

My solution is based on:

  • https://stackoverflow.com/questions/17307451/replace-main-image-with-thumbnail-on-click-with-jquery
  • https://stackoverflow.com/questions/1149747/click-function-not-working-for-me

Leave a Comment