WooCommerce – Swap main product image with thumbnail gallery image on hover

By default WooCommerce product pages have images which open a popup modal when you click them. A common request is to instead swap the main image with the other gallery images when you hover on a thumbnail imgage
jQuery:

var  $thumbnails = jQuery('.product .thumbnails a img');
          var  $valb= jQuery('form.variations_form');
          var  $productImages = jQuery('.product .images>a');

          var $wimg =  jQuery('.product .images > a img').attr('width');
          var $himg =  jQuery('.product .images > a img').attr('height');          
          
          if($thumbnails.length){
            $thumbnails.bind('mouseenter',function(){
              var urlimg =  jQuery(this).attr("url");
              var res = urlimg.split(".");
              var imgtype = res[res.length-1];
              var urlchinh = urlimg.substring(urlimg,urlimg.length- res[res.length-1].length-1);
              var xch = urlchinh+"-"+$wimg+"x"+$himg+"."+ imgtype;

              var $image = jQuery('<img />',
              { id: 'Myid',
               src: xch,
              })
              $image.insertAfter($productImages);
              $productImages.remove();
              $productImages = $image;
              jQuery('.mousetrap').remove();
              return false;

              })

          }