Change woocommerce product image on hover

i would like the product image to change upon hovering over any the thumbnails with the mouse and then if clicked it stays there when you move the mouse.

I found this code, that may be the right code to do so, but I can’t figure out how to implement it. I would like to know how and/or if this is even correct for my intended purposes.

// Add to a js file in your theme/child theme or create a new js file. If you create a new file,        remember to enqueue from functions.php. See example below.

// Adds thumbnail hover to main product img
  jQuery(document).on('hover','.thumbnails .zoom', function(){
  var photo_fullsize = jQuery(this).attr('href');
  jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
 }); 


 // If you dont need to enqueue from functions.php remove the below
  function YourUniqueID_add_enqueue_scripts() {
  wp_enqueue_script( 'theme_js', trailingslashit( get_stylesheet_directory_uri() ) .    'js/theme.js',       array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'YourUniqueID_add_enqueue_scripts' );