0

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.

  • Didn't understand your question exactly, You mean to say "Replaces the main WooCommerce product image with the thumbnail image when you hover over a thumbnail" ? – Tejas Gajjar Mar 1 at 10:17
0

You can use some Javascript to trigger the click. For example:

$('.product-thumb').click(function(event) {
    var product_link = $(this).find('product-thumb-primary a');

    // Don't trigger a click on the existing link
    if(!event.target.href && product_link.length) {
        document.location.href = product_link.attr('href');
    }
});

Un-tested but that's the basic logic.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.