Woocommerce Image hover on shop/category pages

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.

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

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;
}

thanks!!

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

thanks so much!

John

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

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

thanks!
John

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;
    }
}

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

thanks for your help

John

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

thanks i tried that still seems the same?

thanks!

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;
}

awesome thanks!

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

Thanks alot!

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.

ok thanks so much!!

John