Woocommerce product list page

[David]

Hello

Can you tell me what file I need to edit to change the product list view in woocommerce…

http://185.20.51.60/~thebeehivelifest/shop/

I need to change it so the product title and price appear on hover of the image like this…

https://ibb.co/BKffFPj

Help very much appreciated!

Thanks
Dave

[Tom]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

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

[David]

update this CSS rule to include !important statement:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Thanks David – that did the trick 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mårten]

Hey,

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

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts