Hi there,
try this method.
1. Add this function to place a DIV wrapper around the title and price:
add_action( 'woocommerce_shop_loop_item_title', function() {
echo '<div class="product-summary-wrapper">';
}, 9);
add_action( 'woocommerce_after_shop_loop_item', function() {
echo '</div>';
}, 15);
2. Add this CSS to overlay our product-summary-wrapper
on top of the image:
.woocommerce ul.products li.product {
display: grid !important;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.product-summary-wrapper {
grid-row: 1;
grid-column: 1;
}
.product-summary-wrapper {
z-index: 1;
align-self: center;
justify-self: center;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
}
.woocommerce ul.products li.product:hover .product-summary-wrapper {
opacity: 1;
}