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

Home Forums Support WooCommerce – Overlay Title/Price on Product Image??

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #335110
    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.

    GP Premium 1.3
    #335203
    Tom
    Lead Developer
    Lead Developer

    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).

    #335374
    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.

    #335577
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #336975
    David
    Staff
    Customer Support

    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.

    #337250
    Tom
    Lead Developer
    Lead Developer

    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!

    #337370
    David
    Staff
    Customer Support

    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

    #337667
    David
    Staff
    Customer Support

    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.

    #1104252
    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.

    #1104267
    David
    Staff
    Customer Support

    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 …..

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.