Hello Ben,
Hope you are doing good!
Please create a child theme and put below code in function file of child theme
function myfunc_product_img_link_start(){
global $product;
$link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
echo '<a class="custom_item_img_link" href="'.esc_url( $link ).'">';
}
add_action('woocommerce_before_shop_loop_item_title', 'myfunc_product_img_link_start', 5);
function myfunc_product_img_link_close(){
echo '</a>';
}
add_action('woocommerce_before_shop_loop_item_title', 'myfunc_product_img_link_close', 15);
and Custome CSS by following below mentioned steps
1) Please log in to the admin area
2) Go to “Appearance >> Customize >> Additional CSS”.
3) Paste the below code in “Additional CSS” and save it afterward:
li.product .product-thumb-wrap::before {
display: none !important;
}
.custom_item_img_link::before{
content: " ";
position: absolute;
height: 100%;
width: 100%;
background: #fa6161;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
opacity: 0;
}
li.product:hover .custom_item_img_link::before {
opacity: 0.8;
}
Hope this helps!
Have a great day ahead!
Thanks and Regards,
Team ProDesigns