woocommerce offtopic - Clickable product image with hover effect

admin管理员组

文章数量:1122832

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.

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.

• woocommerce-offtopic
• thumbnails

Share Improve this question asked Mar 1, 2019 at 9:14 ivan marchenkoivan marchenko 14911 silver badge66 bronze badges 1

• 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 Commented Mar 1, 2019 at 10:17

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： woocommerce offtopicClickable product image with hover effect