[Support request] Woocommerce Image hover on shop/category pages

Home Forums Support Woocommerce Image hover on shop/category pages

  • This topic has 30 replies, 2 voices, and was last updated 11 months ago by David.
Viewing 15 posts - 1 through 15 (of 31 total)
  • Author
    Posts
  • #1227869
    John MacKenzie

    ok so ive done a bunch of searching on this and cant seem to find any real answer if its possible or should work.

    basically to get images to look right i have the ratio of images set to show as 1:1 so they are all the same size. This causes some to not show fully.

    my client was wondering if there is a way to have a hover effect when on category pages (showing a list of products) so that when one hovers over an image it expands to the proper dimensions to show the full image (not necessary size, but just the fully image itself?)

    thanks!
    John

    #1228178
    David
    Staff
    Customer Support

    Hi there,

    could be doable with some CSS. But first you would need to set the Product Images to their original sizes or at least aspect ratio. Then we can try some CSS to force them to look cropped and apply the zoom hover effect …… well at least thats the plan.

    #1229048
    John MacKenzie

    oh wow ok thanks, amazed there isnt a plugin for this. ive set it to uncropped for now, thanks!!

    #1229215
    David
    Staff
    Customer Support

    Try adding this CSS:

    body:not(.single) .inside-wc-product-image {
        width: 300px;
        height: 300px;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: auto;
    }
    body:not(.single) .woocommerce ul.products li.product a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    body:not(.single) .woocommerce ul.products li.product:hover a img { 
        object-fit: contain;
    }
    #1229235
    John MacKenzie

    thanks!!

    I tried that and almost there however the images are now pushed off the right of the screen

    thanks so much!

    John

    #1229553
    David
    Staff
    Customer Support

    Did you resolve it ? It looks fine to me – maybe the browser cache needed clearing. Let me know.

    #1230036
    John MacKenzie

    nope if you go to /art-category/textile/ you will see what i mean.

    thanks!
    John

    #1230058
    David
    Staff
    Customer Support

    Oh yeah lol – add this extra CSS to reduce there sizes for those desktop views where the sidebar takes up space:

    @media(min-width: 1024px) {
        body:not(.single) .inside-wc-product-image {
            width: 200px;
            height: 200px;
        }
    }
    #1230098
    John MacKenzie

    Thanks! added but it didnt seem to change anything (tried different browsers?)

    thanks for your help

    John

    #1230844
    David
    Staff
    Customer Support

    Can you move that CSS below the original CSS i provided.

    #1231717
    John MacKenzie

    thanks i tried that still seems the same?

    thanks!

    #1231831
    David
    Staff
    Customer Support

    Can you remove all of that CSS i provided and try this:

    body:not(.single) .inside-wc-product-image {
        width: 300px;
        height: 300px;
        overflow: hidden;
        display: flex;
        align-items: center;
        margin: auto;
    }
    
    @media(min-width: 1024px) {
        body:not(.single) .inside-wc-product-image {
            width: 200px !important;
            height: 200px !important; 
        }
    }
    
    body:not(.single) .woocommerce ul.products li.product a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    body:not(.single) .woocommerce ul.products li.product:hover a img { 
        object-fit: contain;
    }
    #1231880
    John MacKenzie

    awesome thanks!

    last question is there anyway to make the images get larger on hover instead of smaller?

    Thanks alot!

    #1232229
    David
    Staff
    Customer Support

    I had a look – but i couldn’t see an easy way to do that with the Woo markup – what makes it difficult is that some images are landscape and some are portrait.

    #1232875
    John MacKenzie

    ok thanks so much!!

    John

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