Clickable product image with hover effect

I have a theme with woocommerce. Some products have more than one photo, and when user hovers over such products, those photos (that are in the photo gallery) will rollover.

I want to make the product image clickabe to do that I’ve used this code, and added to functions.php

if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
    /**
    * Get the product thumbnail, or the placeholder if not set.
    *
    * @subpackage Loop
    * @param string $size (default: 'shop_catalog')
    * @param int $deprecated1 Deprecated since WooCommerce 2.0 (default: 0)
    * @param int $deprecated2 Deprecated since WooCommerce 2.0 (default: 0)
    * @return string
    */
    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $deprecated1 = 0, $deprecated2 = 0 ) {
        global $post;
        if ( has_post_thumbnail() ) {
        return '<a href="' . get_permalink( $post->ID ) . '">' . get_the_post_thumbnail( $post->ID, $size ) . '</a>';
        } elseif ( wc_placeholder_img_src() ) {
        return wc_placeholder_img( $size );
        }
     }
  }
}

This code works on products with one image products, but with rollover images it doesn’t.

Here is my markup for rollover images.

<div class="product-thumb">
  <div class="product-flash-wrap"></div>
  <div class="product-thumb-primary">
    <a href="#someURI">
      <img width="300" height="300" src="#someURI" class="attachment-shop_catalog size-shop_catalog wp-post-image" srcset="#someURI" sizes="(max-width: 300px) 100vw, 300px">
    </a>
  </div>
  <div class="product-thumb-secondary">
    <img width="300" height="300" src="#someURI" class="attachment-shop_catalog size-shop_catalog"> </div>
  <div class="wccpf-fields-container"></div>
</div>

As you can see, only the first image gets wrapped with a link.

Therefore, here is my question. How can I make rollover product thumbnails be clickable?

Any help is much appreciated.