[Resolved] WooCommerce – Overlay Title/Price on Product Image??

[Coulter]

Howdy,

Curious, is there a relatively painless way to display just the Product Image and reveal the Title and Price on rollover?

Looking to have more of an image grid kind of look, where the user can mouse over an image to reveal the title and price.

Thanks.

[Tom]

Hi there,

It would be pretty complex I’m afraid, but it’s something I’m looking into for a future feature in the WC add-on.

If you can find any example, they would definitely help (and I may be able to provide a solution based on one of them).

[Coulter]

Yeah, I suspected it would be a little tricky.

As for examples… many of the Squarespace shops use this style. Here’s a link to some of their online demos: https://www.squarespace.com/templates/online-stores

Nice to hear it’s a feature you’re looking into.

Personally speaking, I’d love to see the WooCommerce Generatepress plugin expand and mature. So many of the options on Themeforest are a tangled mess of dependencies, requiring multiple 3rd party plugins and page builders to use. So far, Generatepress + Woocommerce has been a breath of fresh air.

[Tom]

Thanks!

It will absolutely mature – it’s still very young. That being said, I’ll make sure it stays as far away from becoming a mess as possible 🙂

[David]

It is possible to do with some CSS – this is very experimental but achieves the result you are looking for.

/* Make column wrapper background transparent and move to front of stack and add padding*/
.woocommerce ul.products li.product  {
    background-color: rgba(255,255,255,0);
    padding: 0px 0px 80px 0px;
    z-index: 1;
}
/* position image as absolute for title, price, button etc. overlay and move to back of stack*/
.wc-product-image {
    position: absolute;
    z-index: -1;
}
/* set tranistion for hover effect*/
.woocommerce ul.products li.product a {
transition: all 0.35s ease-in-out;
}
/* set opacity to 0 to all product elements excluding image when not hovered */
.woocommerce ul.products li.product:not(:hover) .button, .woocommerce ul.products li.product:not(:hover) .price, .woocommerce ul.products li.product:not(:hover) .woocommerce-loop-product__title, .woocommerce ul.products li.product:not(:hover) .star-rating  {
    opacity: 0;
}

It lays some foundations of what can be done, i haven’t included the short description in the last section as i dont have it on but can be added if need be.

Tom – i dont like the last section, it looks very crude but all my attempts to have a single :not(:hover) property had varying degrees of success. I was hoping to be able to use a much simpler code that effectively selected the ul li product wrapper and then used a double NOT to exclude the image in the opacity change. e.g .woocommerce ul.products li.product:not(:hover):not([type=”img”])

I would love to add this as a snippet to my growing Woo CSS tweaks scrapbook so any thoughts on cleaning it up would be helpful.

[Tom]

Nice solution!

Not crude at all – using :not() can cut down on the amount of CSS you need to add. I like the solution a lot – it’ll help me build something into core.

Thanks!

[David]

Hi Tom, well that has made my day. I started this journey 4 months ago, and thought i had learnt a little! So kudos from you makes me smile. Of course i couldn’t leave the code as is, i found a slightly tidier solution cutting down on surplus class identifiers and discovering the :match pseudo element has helped. Also added a opacity shift to image to make overlay more legible.

/* Make column wrapper background transparent and move to front of stack and add padding*/
.woocommerce ul.products li.product   {
    background-color: rgba(255,255,255,0);
    padding: 0px 0px 80px 0px;
z-index: 1;
   }
/* position image as absolute for title, price, button etc. overlay and move to back of stack*/
.wc-product-image {
    position: absolute;
    opacity: 1;
z-index: -1;
}
/* set tranistion for hover effect*/
.woocommerce .product a {
transition: all 0.35s ease-in-out;
}
.woocommerce .product:not(:hover) :matches( .price, .add_to_cart_button,  .woocommerce-loop-product__title, .star-rating ) {
    opacity: 0;
}
.woocommerce li.product:hover .wc-product-image{
opacity: 0.6;
}

A few things to be considered in the design and a couple of head scratchers:
1. z-indexing can cause a problem with any drop down menus that are attached to the product container, i been testing Woo Products Filter from Themify, for a free plugin it is very very good but the drop down menus will appear behind the products. So more z-indexing to manage.
2. Opacity transition works nicely on the button but not on the text…… hmmm
3. More of a head scratcher is that the Code works yet when i parse it through CSS Validator I get a Parse Error relating to the first entry and closing bracket on the :match element?!?!

Hopefully you can accelerate the incorporation of this into the theme, so it’s one less thing for me to worry about.

I might give this a go with your great WP Show Post =)

David

[David]

EDIT: Adjusted code above as missing UL and LI classes on wrapper background failed. Doh.
More for my own record, working on individual positioning of title, price etc. and that it needs a @media property to work on desktop only. The complexities that arise with the different column formatting for mobile/tablet is just too much and this design doesn’t work well on small screen devices.

[Ken]

Hello. I see this topic hasn’t been discussed in some time, but has there been a workaround or fix for this? David’s last CSS code didn’t for work and produced a few errors. I’m looking the product pages to display such as this: monkrock.com

Thanks for making a wonderful theme. I’ve been using it for years.

[David]

Hi there,

rather old Topic and a lot has changed in Woo since then. If you can raise a new topic, where you can share a link to your site, we may be able to point you in the right direction as we have used similar methods in the Site Library eg. Imprint, Merch, Niche …..

[sparkle]

did this conversation continue someplace? this solution is so close to what i need…..

[Ying]

Hi sparkle,

Can you raise a new topic?

[Author]

Posts