Can I disable zoom magnifier on product pages and have zoom icon open lightbox?

  • Resolved glazergallery

    (@glazergallery)


    6 years, 4 months ago

    We have determined that many if not most of our customers do not intuitively understand that clicking the magnifier icon in the upper corner of the main image on an individual product page will open the lightbox. This is because the magnifier, when hovered over, just produces a magnified image that moves around inside that box. I found code in another post to disable the zoom feature and have implemented it on our site (see below). You can see it in action on the page link below.

    However, that additional code also makes the magnifier icon disappear. What I’d like to know is if someone can provide code to do either of the following:
    (My 1st choice) The magnifier icon appears in the upper right corner of the main image when a product page opens, and when the icon is clicked, the only thing that happens is the lightbox opens (no zoom).
    (My 2nd choice) When the cursor is moved over the main image, a browser magnifier icon pops up, and when the person clicks, the lightbox opens.

    Code so far, added to functions.php of our Child Theme:

    add_action( ‘after_setup_theme’, ‘remove_pgz_theme_support’, 100 );

    function remove_pgz_theme_support() {
    remove_theme_support( ‘wc-product-gallery-zoom’ );
    }

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Joel Williams

    (@joelwills)

    Automattic Happiness Engineer

    6 years, 3 months ago

    Hi there!

    That’s the right way to remove the zoom, but changing the functionality of what the icon does is more customization help that we can provide here I’m afraid.

    You might want to take a look at the WooCommerce Customizations Page for further help if you need it.

    All the best!

    Erina (a11n)

    (@eri32s98)

    6 years, 3 months ago

    We haven’t heard back from you in a while, so I’m going to mark this as resolved. If you have any further questions, you can start a new thread.

    Pietrogramma

    (@pietrogramma)

    6 years, 1 month ago

    Hi, I’m italian boy,
    I take this post and ask you for help me, to eliminate the zoom and lightbox function of the products images in Woocommerce Version 3.3.4.
    I tried some plugins (like wc-disable-zoom-lightbox-featuresbut.zip or woo-product-image-gallery-options.zip) but they do not work (These plugin, probably, work with previous versione of woocommerce version 3.0), can you help me to disable the zoom and lightbox function?
    Thanks and bye

    Thread Starter glazergallery

    (@glazergallery)

    6 years, 1 month ago

    Ciao, ragazzo italiano,

    I added this code to the functions.php file of my Child Theme. Just make sure you modify the Child Theme and not the main functions.php file. If you don’t have a Child Theme set up, look up how to add one, or there’s a free plug-in called One-Click Child Theme by tychay that you can use to create it:

    // REMOVE ZOOM MAGNIFIER FUNCTION FROM INDIVIDUAL PRODUCT PAGES //
    add_action( ‘after_setup_theme’, ‘remove_pgz_theme_support’, 100 );

    function remove_pgz_theme_support() {
    remove_theme_support( ‘wc-product-gallery-zoom’ );
    }

    To see it on one of our pages: https://www.georgeglazer.com/wpmain/product/st-peters-basilica-and-piazza-view-by-whittle-r-h-laurie-london-1818/

    We also added a colored bar saying “Click main image below to view enlargements and captions”, because we found people didn’t necessarily figure that out. It seems to have helped. The code for that, which also goes in the Child Theme functions.php is:

    // ADD TEXT ABOVE MAIN PRODUCT IMAGE //
    add_action(‘woocommerce_before_single_product_summary’, ‘html_below_thumbnails’, 9);
    function html_below_thumbnails() { ?>
    <div style=”clear:both; color: #ffffff; font-size: 16px; font-style: italic; background-color: #9ca1ba;
    margin-bottom: 20px; padding: 5px;”>Click main image below to view enlargements and captions.</div>
    <?php
    }

    Of course, you can change the background-color and the message to suit your site.

    –HG–

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can I disable zoom magnifier on product pages and have zoom icon open lightbox?’ is closed to new replies.