Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1125353

    Hi,
    I have gone to other threads referring to the same problem and everyone else who used the code from those threads have had success removing the zoom icon. I, however, still cannot remove the icon using the code that has already been posted. I have also gone to Youtube to see if there was another way to do it but it seems most of the working code is the same CSS code from those earlier posts. I looked into functions since some people used that method and also had success with disabling the zoom feature.

    I have no idea why I can’t remove the zoom icon after having disabled all pointer events. Please see image link.
    Magnifying Glass Image from my product testing

    Since all functionality is now disabled, I don’t know if the magnifying glass is autogenerated and is part of the image or if that’s also CSS that can be removed since I found a snippet of code from another thread this.$target.prepend( ‘🔍‘ ); in
    woocommerce/assets/js/frontend/single-product.js. I deleted the emoji from the file and replaced it with a test img to see if there would be a difference but still nothing.

    This is all my code I am using for the single products page:

    /* shut off all pointer events */
    .single-product-main-image {
    pointer-events: none;
    }

    /* CSS not working for me but works for everyone else */
    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    display: none !important;
    }

    /* resizes image on single product pages using CSS instead of editing image display size in Woocommerce */
    .single-product-main-image {
    width: 44%;
    }

    I have flushed the cache and cleared out the history multiple times as well.

    Please advise. Thanks.

    #1125789

    I don’t know why this works but I put these two blocks together and got rid of the magnifying glass.
    I could not remove the magnifying glass from the image otherwise.

    /* hide woocommerce magnifier icon */
    .single-product .single-product-main-image .woocommerce-product-gallery__trigger {
    display: none!important;
    }

    .single-product .single-product-main-image .avia-wc-30-product-gallery-lightbox {
    display: none !important;
    }

    • This reply was modified 5 years, 4 months ago by ctang1983.
    #1125873

    Hi,

    Thank you for the update.

    Did you happen to toggle the Peformance > File Compression settings while doing that? The previous css code might not have taken effect because the stylesheets are compressed or merged.

    Best regards,
    Ismael

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