Woocommerce Single Product Thumb Image Click Replace Main Image

I just got some client ask me to make so that on woocommerce single product page, when user click on the thumbnail image, then the main image of the product changed to the thumbnail image. I completed it using jquery as follow:

jQuery('body').on('click','.woocommerce-product-gallery__image a', function(e){
        e.preventDefault();
        var thumb_fullsize = jQuery(this).attr('href').replace('-350x460','');
            thumb_srcset = jQuery(this).find('img').data('src').replace('.jpg', '-350x460.jpg');
            
        var tmpImg = new Image();
        window.orgWidth = '';
        window.orgHeight = '';
        tmpImg.src=thumb_fullsize; //or  document.images[i].src;
        jQuery(tmpImg).one('load',function(){
          orgWidth = tmpImg.width;
          orgHeight = tmpImg.height;
          
            jQuery('.zoomImg').load(function() {
                jQuery('.zoomImg').css("width",orgWidth+"px");
                jQuery('.zoomImg').css("height",orgHeight+"px");
            }).attr('src',thumb_fullsize);
          
            jQuery('.zoomImg').prev().attr('href', thumb_fullsize);
            jQuery('.zoomImg').prev().find('img').attr('src', thumb_srcset).data('src', thumb_fullsize).data('large_image', thumb_fullsize).data('large_image_width', orgWidth).data('large_image_height',orgHeight);
          
        });
        
        return false;
    });

Hope it help if you need it.

Leave A Comment

%d bloggers like this: