Clickable product image with hover effect

Question

Clickable product image with hover effect

ivan marchenko

2022年5月9日 05:07

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.

Topic woocommerce-offtopic thumbnails Wordpress

Category Web

Alexander Holsgrove · Accepted Answer · 2019年3月1日 10:07

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.

Clickable product image with hover effect

About