Topic: Woocommerce – Overlay Title/Price on Product Image?

nickyhen
May 4, 2024 at 9:12 am

Hi, I found an old thread covering this from 2017 but cannot find anything since then. I am looking to have the product title and price show when hovering over the product image (instead of having this listed below the product), is this possible to implement using GB?
Thank you,
Nicola

Ying

May 4, 2024 at 10:07 am

Hi Nicola,

Try this CSS:

.archive.woocommerce :is(h2.woocommerce-loop-product__title, ul.products li.product .price){
    opacity: 0;
    height: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
}

.archive.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    position: relative;
}

.archive.woocommerce h2.woocommerce-loop-product__title {
    top: 70%;
}

.archive.woocommerce ul.products li.product .price {
    top: calc(70% + 1.7em);
}

#wc-column-container .product:hover :is(h2.woocommerce-loop-product__title, ul.products li.product .price){
    opacity: 1;
}

nickyhen
May 5, 2024 at 12:47 am

Thank you Ying, that works perfectly. How would I add a background color for the hover so that it looks like the one in the link below? I tried adding ‘background color’ css but couldn’t get this to work!
Thank you,
Nicola

Ying

May 5, 2024 at 9:44 am

Try adding this CSS as well:

@media (min-width: 769px) {
    #wc-column-container .product a {
        line-height: 0;
    }

    #wc-column-container .product .wc-product-image:before {
        content: "";
        background-color: black;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
        top: 0;
        left: 0;
        transition: all 0.3s ease;
    }
    #wc-column-container .product:hover .wc-product-image:before {
       opacity:0.5;    
    }

    #wc-column-container .product .wc-product-image {
        z-index: 0;
        position: relative;
    }
}

nickyhen
May 6, 2024 at 1:34 am

Thank you very much!
Ying
May 6, 2024 at 9:06 am

You are welcome 🙂
nickyhen
May 7, 2024 at 12:20 am

Hi again Ying, this is great but I’ve now realised that the overlay doesn’t work so well on mobile devices! I’m not certain what would be the best solution? Maybe one of the following?
1. When the product is tapped is there a way of having the overlay remain in place for a couple of seconds before going through to the product page?
2. Or have it so a second tap is required on the overlay?
3. Or turn off overlay for mobile devices and have the product name and price show below each product?
Is one of these an easy fix?
I’m very grateful for any help.
Thank you,
Nicola
Leo
May 7, 2024 at 7:35 am

Solution #3 would work the best on mobile in my opinion.

I’ve edited Ying’s code so it’s desktop only:
https://generate.support/topic/woocommerce-overlay-title-price-on-product-image/#post-106844
nickyhen
May 7, 2024 at 8:41 am

Hi Leo,
Thank you but this unfortunately doesn’t work for me! I replaced the old code with the new code you provided but when I do, the product title and price don’t show up on the overlay and the overlay is also still there on mobile devices.
I have input the old code again for now. I just input the CSS into Customise-Additional CSS, I’m assuming this is the right place?
Nicola
Leo
May 7, 2024 at 8:43 am

Looks like I missed a bracket.

Please try the code again:
https://generate.support/topic/woocommerce-overlay-title-price-on-product-image/#post-106844
nickyhen
May 8, 2024 at 2:51 am

Thank you, this has turned off the dark overlay on mobile devices but it still leaves the product title and price showing in the middle of the product image instead of underneath. Is it possible to have the product title and price sitting underneath each image – but on mobile devices only?

If you switch between mobile device and pc when looking at the link below you will see exactly the effect I’m after.

Thank you,
Nicola
Ying
May 8, 2024 at 11:01 am

this has turned off the dark overlay on mobile devices but it still leaves the product title and price showing in the middle of the product image instead of underneath.

It’s not possible, as the entire CSS only works on tablet and desktop.

Can you link me to your site?
nickyhen
May 8, 2024 at 11:54 am

Yes sure, see below. If this isn’t possible then it’s probably best to revert to the original dark overlay on mobile too, which I have done. Actually this isn’t so bad as i’ve noticed the overly does stay around on mobile when the site is loading slower, which is a good thing.

Nicola
nickyhen
May 8, 2024 at 11:57 am

I’ve just realised that when I say mobile devices I meant that to include tablet, not just mobile phones. I have just seen that you are referring to desktop, tablet and mobile as all separate.
Leo
May 8, 2024 at 12:06 pm

Tablet is tricky to deal with as the widths are different in landscape and portrait orientation.

CSS is based on the screen width and cannot tell what device the user is using.

You would need to tweak this line here: @media (min-width: 769px) and determine when you want the CSS to apply. Currently, the CSS applies when the screen width is above 769px.
nickyhen
May 8, 2024 at 12:27 pm

Ok thank you, I will play around with this. I appreciate your time and effort.
Nicola

Viewing 16 posts - 1 through 16 (of 17 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Woocommerce – Overlay Title/Price on Product Image?