Text on image hover on WooCommerce shop page

Please post the url to your site.

Hi lorro,
Thanks very much for your reply. Unfortunately, I can’t provide a link to my site as it is behind a “coming soon” page. However, since posting my request for help, I came across a very useful post by alchymyth that has steered me in the right direction:

https://www.ads-software.com/support/topic/showing-post-title-as-overlay-on-featured-image-on-hover?replies=3

Just in case this might help someone else, this is what I’ve done:

content-product.php:
<span class=”catalog-image-wrapper”>
<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* @hooked woocommerce_show_product_loop_sale_flash – 10
* @hooked woocommerce_template_loop_product_thumbnail – 10
*/
do_action( ‘woocommerce_before_shop_loop_item_title’ );
?>
<span>click here for details</span>
</span>

style.css:
.archive .type-product img:hover {opacity: 0.2;}
.archive .catalog-image-wrapper span {visibility: hidden;}
.archive .catalog-image-wrapper:hover span {visibility: visible;}
.archive .catalog-image-wrapper span {position: absolute;
top: 140px; left: 130px;color: #404040;}

Thanks again lorro for responding.

You may find edits to content-product.php overwritten by updates. As an alternative, it may be possible to add the markup using a hook.
https://docs.woothemes.com/wc-apidocs/hook-docs.html
The hook and function code goes in functions.php for your child theme and this method should be update resistant.

Thanks again lorro.
The content-product.php file that I amended is actually a copy under the woocommerce directory in my child theme. Is that a sensible way of doing things or is the hook (functions.php) method preferable?
Thanks.

I’ve also noticed that my solution is not ideal…. When the “click here for details” words are hovered over, the opacity of the image reverts to normal.

Oh my goodness, this is complicated….

Having a custom content-product.php in your child theme will resist any updates that don’t alter the original. A hook would be better, but that could be done later.

Try a pointer-events:none style on the span tag – this may allow the cursor event to “fall-through” onto the image, thus preserving the hover on the image.
https://css-tricks.com/almanac/properties/p/pointer-events/
Can’t be sure without trying it.

It works! Thank you so much!!