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

Home Forums Support Woocommerce Image hover on shop/category pages

This topic contains 30 replies, has 2 voices, and was last updated by  David 1 week ago.

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