diff --git a/includes/images/convert-webp.php b/includes/images/convert-webp.php
index 3e5aaa6..f0f81ef 100644
--- a/includes/images/convert-webp.php
+++ b/includes/images/convert-webp.php
@@ -96,6 +96,7 @@ function cwvpsb_display_webp($content) {
         }
         $mod_url = explode('uploads',$url);
         $mod_url = count($mod_url)>1?$mod_url[1]:$mod_url[0];
+        
         $wp_upload_dir = wp_upload_dir();
         $upload_baseurl = $wp_upload_dir['baseurl'] . '/' . 'cwv-webp-images';
         $upload_basedir = $wp_upload_dir['basedir'] . '/' . 'cwv-webp-images';
@@ -108,6 +109,17 @@ function cwvpsb_display_webp($content) {
         if (file_exists($img_webp_dir)) {
             $node->setAttribute('src', $img_src);
             $node->setAttribute('srcset', $img_srcset);
+            // Fix for woocommerce zoom image to work properly
+            $large_image = $node->getAttribute('data-large_image');
+             if($large_image){
+                    $mod_url_large = explode('uploads',$large_image);
+                    $mod_url_large = count($mod_url_large)>1?$mod_url_large[1]:$mod_url_large[0];
+                    $img_webp_large = $upload_baseurl . $mod_url_large . ".webp";
+                    $img_src_large = str_replace($large_image, $img_webp_large, $large_image);
+                    $node->setAttribute('data-large_image', $img_src_large);
+                    $node->setAttribute('data-src', $img_src_large);
+                }
+            
         } else {
             // Convert the image to WebP if it doesn't exist
             $image_path = $wp_upload_dir['basedir'] . str_replace($wp_upload_dir['baseurl'], '', $url);
diff --git a/includes/images/lazy-load-public.js b/includes/images/lazy-load-public.js
index c8a3acc..63b2aa2 100644
--- a/includes/images/lazy-load-public.js
+++ b/includes/images/lazy-load-public.js
@@ -2,165 +2,142 @@
     if (typeof exports === "object") {
         module.exports = factory(root);
     } else if (typeof define === "function" && define.amd) {
-        define([], factory(root));
+        define([], function () {
+            return factory(root);
+        });
     } else {
         root.LazyLoad = factory(root);
     }
-}) (typeof global !== "undefined" ? global : this.window || this.global, function (root) {
-
+})(typeof global !== "undefined" ? global : this.window || this.global, function (root) {
     "use strict";
 
     const defaults = {
         src: "data-src",
         srcset: "data-srcset",
-		sizes: "data-sizes",
+        sizes: "data-sizes",
         style: "data-style",
         selector: ".cwvlazyload"
     };
 
-    const extend = function ()  {
-
-        let extended = {};
+    const extend = function (target, ...sources) {
         let deep = false;
-        let i = 0;
-        let length = arguments.length;
 
-        /* Check if a deep merge */
-        if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") {
-            deep = arguments[0];
-            i++;
+        if (typeof target === "boolean") {
+            deep = target;
+            target = sources.shift();
         }
 
-        /* Merge the object into the extended object */
-        let merge = function (obj) {
-            for (let prop in obj) {
-                if (Object.prototype.hasOwnProperty.call(obj, prop)) {
-                    /* If deep merge and property is an object, merge properties */
-                    if (deep && Object.prototype.toString.call(obj[prop]) === "[object Object]") {
-                        extended[prop] = extend(true, extended[prop], obj[prop]);
+        for (const source of sources) {
+            for (const prop in source) {
+                if (Object.prototype.hasOwnProperty.call(source, prop)) {
+                    if (deep && Object.prototype.toString.call(source[prop]) === "[object Object]") {
+                        target[prop] = extend(true, target[prop], source[prop]);
                     } else {
-                        extended[prop] = obj[prop];
+                        target[prop] = source[prop];
                     }
                 }
             }
-        };
-
-        /* Loop through each object and conduct a merge */
-        for (; i < length; i++) {
-            let obj = arguments[i];
-            merge(obj);
         }
 
-        return extended;
+        return target;
     };
 
-    function LazyLoad(images, options) {
-        this.settings = extend(defaults, options || {});
-        this.images = images || document.querySelectorAll(this.settings.selector);
-        this.observer = null;
-        this.init();
-    }
-
-    LazyLoad.prototype = {
-        init: function() {
+    class LazyLoad {
+        constructor(images, options) {
+            this.settings = extend({}, defaults, options || {});
+            this.images = images || document.querySelectorAll(this.settings.selector);
+            this.observer = null;
+            this.init();
+        }
 
-            /* Without observers load everything and bail out early. */
-            //if (!root.IntersectionObserver) {
+        init() {
+            if (!root.IntersectionObserver) {
                 this.loadImages();
                 return;
-            //}
+            }
 
-            let self = this;
-            let observerConfig = {
+            this.createObserver();
+            this.observeImages();
+        }
+
+        createObserver() {
+            const self = this;
+            const observerConfig = {
                 root: null,
                 rootMargin: "0px",
                 threshold: [0]
             };
 
-            this.observer = new IntersectionObserver(function(entries) {
-                entries.forEach(function (entry) {
+            this.observer = new IntersectionObserver(entries => {
+                entries.forEach(entry => {
                     if (entry.intersectionRatio > 0) {
-                        self.observer.unobserve(entry.target);
-                        let src = entry.target.getAttribute(self.settings.src);
-                        let srcset = entry.target.getAttribute(self.settings.srcset);
-						let sizes = entry.target.getAttribute(self.settings.sizes);
-                        if ("img" === entry.target.tagName.toLowerCase()) {
-                            if (src) {
-                                entry.target.src = src;
-                            }
-                            if (srcset) {
-                                entry.target.srcset = srcset;
-                            }
-                            if (sizes) {
-                                entry.target.sizes = sizes;
-                            }
-                        } else {
-                            //entry.target.style.backgroundImage = "url(" + src + ")";
-                            entry.target.style = entry.target.getAttribute(self.settings.style);
-                        }
+                        self.handleIntersection(entry.target);
                     }
                 });
             }, observerConfig);
+        }
 
-            this.images.forEach(function (image) {
+        observeImages() {
+            const self = this;
+            this.images.forEach(image => {
                 self.observer.observe(image);
             });
-        },
+        }
+
+        handleIntersection(target) {
+            this.observer.unobserve(target);
+            const src = target.getAttribute(this.settings.src);
+            const srcset = target.getAttribute(this.settings.srcset);
+            const sizes = target.getAttribute(this.settings.sizes);
+
+            if (target.tagName.toLowerCase() === "img") {
+                if (src) {
+                    target.src = src;
+                }
+                if (srcset) {
+                    target.srcset = srcset;
+                }
+                if (sizes) {
+                    target.sizes = sizes;
+                }
+            } else {
+                target.style = target.getAttribute(this.settings.style);
+            }
+        }
 
-        loadAndDestroy: function () {
-            if (!this.settings) { return; }
+        loadAndDestroy() {
+            if (!this.settings) {
+                return;
+            }
             this.loadImages();
             this.destroy();
-        },
-
-        loadImages: function () {
-            if (!this.settings) { return; }
-
-            let self = this;
-            this.images.forEach(function (image) {
-                let src = image.getAttribute(self.settings.src);
-                let srcset = image.getAttribute(self.settings.srcset);
-				let sizes = image.getAttribute(self.settings.sizes);
-                if ("img" === image.tagName.toLowerCase()) {
-                    if (src) {
-                        image.src = src;
-                    }
-                    if (srcset) {
-                        image.srcset = srcset;
-                    }
-                    if (sizes) {
-                        image.sizes = sizes;
-                    }
-                } else {
-                    //image.style.backgroundImage = "url('" + src + "')";
-                    image.style = image.getAttribute(self.settings.style);
-                }
+        }
+
+        loadImages() {
+            if (!this.settings) {
+                return;
+            }
+
+            this.images.forEach(image => {
+                this.handleIntersection(image);
             });
-        },
+        }
 
-        destroy: function () {
-            if (!this.settings) { return; }
+        destroy() {
+            if (!this.settings) {
+                return;
+            }
             this.observer.disconnect();
             this.settings = null;
         }
-    };
-
-    root.lazyload = function(images, options) {
-        return new LazyLoad(images, options);
-    };
-
-    if (root.jQuery) {
-        const $ = root.jQuery;
-        $.fn.lazyload = function (options) {
-            options = options || {};
-            options.attribute = options.attribute || "data-src";
-            new LazyLoad($.makeArray(this), options);
-            return this;
-        };
     }
 
+    root.LazyLoad = LazyLoad;
+
     return LazyLoad;
 });
-jQuery( document ).ready(function() {
-	jQuery(".cwvlazyload").lazyload();
-});
\ No newline at end of file
+
+// Usage
+document.addEventListener("DOMContentLoaded", function () {
+    const lazyLoader = new LazyLoad(document.querySelectorAll(".cwvlazyload"));
+});
diff --git a/includes/images/lazy-load-public.min.js b/includes/images/lazy-load-public.min.js
index c06b4ac..a85ae00 100644
--- a/includes/images/lazy-load-public.min.js
+++ b/includes/images/lazy-load-public.min.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports?module.exports=e(t):"function"==typeof define&&define.amd?define([],e(t)):t.LazyLoad=e(t)}("undefined"!=typeof global?global:this.window||this.global,function(t){"use strict";let e={src:"data-src",srcset:"data-srcset",sizes:"data-sizes",style:"data-style",selector:".cwvlazyload"},s=function(){let t={},e=!1,i=0,n=arguments.length;for("[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],i++);i<n;i++){let o=arguments[i];!function(i){for(let n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e&&"[object Object]"===Object.prototype.toString.call(i[n])?t[n]=s(!0,t[n],i[n]):t[n]=i[n])}(o)}return t};function i(t,i){this.settings=s(e,i||{}),this.images=t||document.querySelectorAll(this.settings.selector),this.observer=null,this.init()}if(i.prototype={init:function(){this.loadImages()},loadAndDestroy:function(){this.settings&&(this.loadImages(),this.destroy())},loadImages:function(){if(!this.settings)return;let t=this;this.images.forEach(function(e){let s=e.getAttribute(t.settings.src),i=e.getAttribute(t.settings.srcset),n=e.getAttribute(t.settings.sizes);"img"===e.tagName.toLowerCase()?(s&&(e.src=s),i&&(e.srcset=i),n&&(e.sizes=n)):e.style=e.getAttribute(t.settings.style)})},destroy:function(){this.settings&&(this.observer.disconnect(),this.settings=null)}},t.lazyload=function(t,e){return new i(t,e)},t.jQuery){let n=t.jQuery;n.fn.lazyload=function(t){return(t=t||{}).attribute=t.attribute||"data-src",new i(n.makeArray(this),t),this}}return i}),jQuery(document).ready(function(){jQuery(".cwvlazyload").lazyload()});
\ No newline at end of file
+!function(t,e){"object"==typeof exports?module.exports=e(t):"function"==typeof define&&define.amd?define([],function(){return e(t)}):t.LazyLoad=e(t)}("undefined"!=typeof global?global:this.window||this.global,function(t){"use strict";let e=function(t,...s){let i=!1;for(let r of("boolean"==typeof t&&(i=t,t=s.shift()),s))for(let o in r)Object.prototype.hasOwnProperty.call(r,o)&&(i&&"[object Object]"===Object.prototype.toString.call(r[o])?t[o]=e(!0,t[o],r[o]):t[o]=r[o]);return t};class s{constructor(t,s){this.settings=e({},{src:"data-src",srcset:"data-srcset",sizes:"data-sizes",style:"data-style",selector:".cwvlazyload"},s||{}),this.images=t||document.querySelectorAll(this.settings.selector),this.observer=null,this.init()}init(){if(!t.IntersectionObserver){this.loadImages();return}this.createObserver(),this.observeImages()}createObserver(){let t=this;this.observer=new IntersectionObserver(e=>{e.forEach(e=>{e.intersectionRatio>0&&t.handleIntersection(e.target)})},{root:null,rootMargin:"0px",threshold:[0]})}observeImages(){let t=this;this.images.forEach(e=>{t.observer.observe(e)})}handleIntersection(t){this.observer.unobserve(t);let e=t.getAttribute(this.settings.src),s=t.getAttribute(this.settings.srcset),i=t.getAttribute(this.settings.sizes);"img"===t.tagName.toLowerCase()?(e&&(t.src=e),s&&(t.srcset=s),i&&(t.sizes=i)):t.style=t.getAttribute(this.settings.style)}loadAndDestroy(){this.settings&&(this.loadImages(),this.destroy())}loadImages(){this.settings&&this.images.forEach(t=>{this.handleIntersection(t)})}destroy(){this.settings&&(this.observer.disconnect(),this.settings=null)}}return t.LazyLoad=s,s}),document.addEventListener("DOMContentLoaded",function(){new LazyLoad(document.querySelectorAll(".cwvlazyload"))});
\ No newline at end of file
diff --git a/includes/images/lazy-loading.php b/includes/images/lazy-loading.php
index 99ba88e..f58832e 100644
--- a/includes/images/lazy-loading.php
+++ b/includes/images/lazy-loading.php
@@ -168,7 +168,12 @@ public function buffer_start_cwv($wphtml) {
         {
         
          if ($stuff->tagName == 'img'){
-           pq($stuff)->attr('data-src',pq($stuff)->attr('src'));
+          // Fix for woocommerce zoom image to work properly
+          if(!empty(pq('.woocommerce')) && !empty(pq('.single-product')) &&  pq($stuff)->attr('data-large_image')){
+            pq($stuff)->attr('data-src',pq($stuff)->attr('data-large_image')); 
+          }else{
+             pq($stuff)->attr('data-src',pq($stuff)->attr('src'));
+          }
            pq($stuff)->removeAttr('src');
            pq($stuff)->attr('src','data:image/gif;base64,R0lGODlhAQABAIAAAP//////zCH5BAEHAAAALAAAAAABAAEAAAICRAEAOw==');
            pq($stuff)->attr('data-srcset',pq($stuff)->attr('srcset'));