Product image zoom/lightbox

  • Resolved Am0k

    (@am0k)


    6 years, 1 month ago

    Hello guys,
    So my question is: do you know that in almost all wordpress / woocommerce themes, a magnifying glass appears on the product image to open it in the lightbox and zoom it? I was wondering .. How can I delete the lens icon and make the zoom lightbox open at any point I click on the image and not necessarily on the lens icon at the top left of the image? I hope I have been clear enough.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Robin

    (@robinrsa)

    6 years, 1 month ago

    Hey Am0k

    You could use css to increase size of the “trigger” for the lightbox, however the “zoom” effect for when you hover on the image will not function correctly.

    Thread Starter Am0k

    (@am0k)

    6 years, 1 month ago

    Can you explain me how please?

    Robin

    (@robinrsa)

    6 years, 1 month ago

    You can try the following CSS, depending on your theme you might need to use important tags to override the default css. You can add the CSS to your theme in Appearance >> Customize >> Additional CSS

    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    background-color: transparent;
    color: transparent;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}
    Thread Starter Am0k

    (@am0k)

    6 years, 1 month ago

    It work! you’re awesome @robinrsa!
    Thank you so much!

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

The topic ‘Product image zoom/lightbox’ is closed to new replies.