Tooltip for catalog images on the WooCommerce Shop page?

[mikerayjones]

Hi Support. I’m building a site with X; the Woo Shop page is at http://flossie.ray-jones.org.uk/shop/. Is it possible to have a tooltip on the catalog images (other than where the Add to Basket button appears)? I want to help visitors to realise that they can click the image for more product details (i.e. to visit the Single Product page).

In HTML I would write something like <a href="#" data-toggle="tooltip" data-placement="top" title="Click here for more information"><img>#</img></a>… but don’t know where to put this code.

Many thanks.

[ruenel]

Hello There,

Thanks for writing in! What you wanted to do may or may not work. This is beyond the scope of our support as it is deemed as custom development. What we can do is to direct you where you start doing your customization. In your case, since you already have the child theme enabled, you may use the following code in your child theme’s functions.php file

// Remove shop link and create custom shop thumbnail link
// =============================================================================
function x_woocommerce_shop_product_thumbnails_tooltip() {

  $product = wc_get_product( get_the_ID() );

  $id     = get_the_ID();
  $thumb  = 'shop_catalog';
  $rating = ( function_exists( 'wc_get_rating_html' ) ) ? wc_get_rating_html( $product->get_average_rating() ) : $product->get_rating_html();

  //woocommerce_show_product_sale_flash();
  echo '<div class="entry-featured">';
    echo '<a href="' . get_the_permalink() . '" data-toggle="tooltip" data-placement="top" title="Click here for more information">';
      echo get_the_post_thumbnail( $id, $thumb );
      if ( ! empty( $rating ) ) {
        echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
      }
    echo '</a>';
  echo "</div>";

}

function add_shop_tooltip(){
  remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
  remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
  remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
  remove_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails', 10 );
  add_action( 'woocommerce_before_shop_loop_item_title', 'x_woocommerce_shop_product_thumbnails_tooltip', 10 );
}
add_action('wp_head', 'add_shop_tooltip');
// =============================================================================

Please understand that this code may not work according to what you have in mind. I would highly recommend finding someone who is more familiar with WooCommerce and how X integrated WooCommerce products to realize your idea.

Thank you very for your understanding.