in JavaScript, jQuery, WordPress

How to add magnifier to WooCommerce without a plugin

There is a lot of overbloated plugins in WordPress repo that should add magnifier to our WooCommerce product page. Sounds kewl. LONG LIVE Community, but the true storry is that along with the magnifier they add main menu items with description about the author, one more page to donate, only for one magnifier.

So here I will post a simple example how you can achieve this ancient and ugly feature that clients wants.

First of all, we will use elevateZoom jQuery plugin directly from the author site, so please change it on production sites.

Next code could be added in  your theme footer.php before the </body> closing tag. If you want some optimization and to take care script execution only on product page, you could use is_woocommerce() and is_product() template tags.

<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>

<script>
  (function($) {
    $(document).ready(function() {

      // Element custom event
      $('body.woocommerce .product.has-post-thumbnail .woocommerce-main-image .wp-post-image')
        .on('woocommerce-elevateZoomUpdate', function() {
          $('.zoomContainer .zoomWindowContainer .zoomWindow')
            .css('background-image', 'url(' + $(this).parent('a').attr('href') + ')');
        })
        .on('woocommerce-elevateZoom', function () {
          $(this)
            .attr('data-zoom-image', $(this).parent('a').attr('href'))
            .elevateZoom({
              
              // You could play with the options from examples
              // on http://www.elevateweb.co.uk/image-zoom/examples
              responsive: true

            });
        })
        .trigger('woocommerce-elevateZoom');

      // Hook on image change because the variation
      $('.variations_form')
        .on('wc_variation_form show_variation reset_image', function() {
          $('body.woocommerce .product.has-post-thumbnail .woocommerce-main-image .wp-post-image')
            .trigger('woocommerce-elevateZoomUpdate');
        });

    });
  }(jQuery));
</script>

 

 

Write a Comment

Comment