Exchange main product picture with thumbnails

[Simon]

Simon

June 21, 2015 at 6:04 am

Hi guys,

so I have been at it to implement the “main product image exchange” since this morning and I am just not getting there. After changing the complete design of my website I wanted to re-do the tweak but it is simply not working.

In the past I had used this code:

jQuery(document).on('click','.thumbnails .zoom', function(){
var photo_fullsize = jQuery(this).find('img').attr('src').replace('-58x58','');
jQuery('.woocommerce_main_image img').attr('src', + photo_fullsize + );
return false;
});

as well as

$('.product_thumbnails .zoom').click(function(e){
e.preventDefault();
var photo_fullsize = $(this).find('img').attr('src').replace('-58x58','');
$('.woocommerce-main-image img').attr('src', photo_fullsize);
});

I had added this to my functions.php:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'productgallery', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/productgallery.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}

My problem now is, that the thumbnails take me directly to the images. No exchange no nothing. I was playing around with the classes and all since I thought maybe woocommerce changed them over the course of updates…

How do I fix this? I tried with codepen and the script; second one; works fine – any ideas where and how to add the script/jquery with your themes? I had it running before with other themes…

Some more input for classes – Main Product Image & Thumbnails:

<div class="product_image">
<a class="woocommerce-main-image zoom" data-rel="lightbox[product-gallery]" title="1422571149-171" itemprop="image" href="MY WEBSITE/... .jpg">
<img class="attachment-shop_single wp-post-image" width="456" height="456" title="1422571149-171" src="MY WEBSITE/... .jpg-456x456.jpg">
</a>

</div>
<div class="product_thumbnails">
<a class="zoom first" data-rel="lightbox[product-gallery]" title="1422571167-808" href="MY WEBSITE/... .jpg">
<img class="attachment-shop_thumbnail" width="58" height="58" alt="1422571167-808" src="MY WEBSITE/...-58x58.jpg">
</a>

Thank you heaps for a solution here!