title: Woocommerce JQuery replace main product image with thumbnails
body: <p>so I have been at it to implement the &quot;main product image exchange&quot; 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.</p>
  <p>In the past I had used this code:</p>
  <pre><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;
  });   
  </code></pre>
  <p>Src: <a href="https://stackoverflow.com/questions/17307451/replace-main-image-with-thumbnail-on-click-with-jquery">Replace main image with thumbnail on click with jQuery</a></p>
  <p>I had added this to my <code>functions.php</code>:</p>
  <pre><code>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
      );
  }
  </code></pre>
  <p>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...</p>
  <p>Some more input for classes - Main Product Image &amp; Thumbnails:</p>
  <pre><code>&lt;div class=&quot;product_image&quot;&gt;
  &lt;a class=&quot;woocommerce-main-image zoom&quot; data-rel=&quot;lightbox[product-gallery]&quot;    title=&quot;1422571149-171&quot; itemprop=&quot;image&quot; href=&quot;MY WEBSITE/... .jpg&quot;&gt;
  &lt;img class=&quot;attachment-shop_single wp-post-image&quot; width=&quot;456&quot; height=&quot;456&quot; title=&quot;1422571149-171&quot; src=&quot;MY WEBSITE/... .jpg-456x456.jpg&quot;&gt;
  &lt;/a&gt;
  
  &lt;/div&gt;
  &lt;div class=&quot;product_thumbnails&quot;&gt;
  &lt;a class=&quot;zoom first&quot; data-rel=&quot;lightbox[product-gallery]&quot; title=&quot;1422571167-808&quot; href=&quot;MY WEBSITE/... .jpg&quot;&gt;
  &lt;img class=&quot;attachment-shop_thumbnail&quot; width=&quot;58&quot; height=&quot;58&quot; alt=&quot;1422571167-808&quot; src=&quot;MY WEBSITE/...-58x58.jpg&quot;&gt;
  &lt;/a&gt;
  </code></pre>
  <p>Thank you heaps for a solution here!</p>
  <h1>taobao</h1>