Woocommerce product list page

Hi there,

You may be able to use CSS. Check this topic out: https://generatepress.com/forums/topic/woocommerce-overlay-titleprice-on-product-image/

Thanks Tom, that kind of worked - but it's messed the layout up when it comes to the footer...

http://185.20.51.60/~thebeehivelifest/shop/

Plus the product images are overlapping on mobile view, what's the best way to sort this?

Also is it possible to have the title and price sit in the middle rather than at the top on hover?

Thanks
Dave

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;
}

Hi David

That has sorted the layout issue out, but the title and price appear underneath the image on hover.

Any ideas how to get them to center on top of the image?

Thanks
Dave

update this CSS rule to include !important statement:

.woocommerce ul.products li.product {
    display: grid !important;
}

Thanks David - that did the trick :)

You're welcome

Hey,

I used your code and changed to white background color. Is it possible to make the background color cover the entire product image?

Can you link us to the page in question?

Feel free to open a new topic if you need to use the private URL field.