WooCommerce Shop Page: make product thumbnails larger/smaller when hovering over

  • Resolved roosxja

    (@roosxja)


    3 years, 10 months ago

    Hi all,

    I used WooCommerce to build a webshop and would like to know if it is possible for a product thumbnail (on the shop page) to be enlarged/reduced when hovered over it (Or maybe if this is not possible, create a shadow behind the thumbnail when hovered over). So, I mean on the shop page with all the different products, and not on the single product page.
    I’ve tried some CSS code but this still does not work. Does anybody have an idea which CSS to use? I’m using Astra with Elementor.

    Thanks in advance.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hello,

    You can achieve this by adding CSS. Here is a helpful link to get started: https://www.w3schools.com/howto/howto_css_zoom_hover.asp

    Thread Starter roosxja

    (@roosxja)

    Thanks! How would I add this CSS specifically to only the WooCommerce Shop page?

    Thread Starter roosxja

    (@roosxja)

    I used some code from another post and tried to change stuff, but nothing is really responding. Is there something I should change in the WooCommerce settings so I will be able to change CSS in the shop page?
    This is the CSS:

    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;
    transition: transform .2s; /* Animation */
    }
    body:not(.single) .woocommerce ul.products li.product:hover a img {
    transform: scale(1.1);
    }

    Thread Starter roosxja

    (@roosxja)

    I fixed it! Thanks, I inspected the code on my shop page and used that and now it worked!

    Thread Starter roosxja

    (@roosxja)

    I just used:
    .woocommerce ul.products li.product:hover a img {
    transform: scale(1.1);
    transition: transform .2s;
    box-shadow: 1px 1px 2px 1px rgba(187, 159, 121, .2);
    }

    Yay! Glad to hear you were able to solve it, and thank you for sharing the CSS code ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘WooCommerce Shop Page: make product thumbnails larger/smaller when hovering over’ is closed to new replies.