Implementing Lazy Load with WooCommerce

Once Lazy Load has been installed, the trick is to get the product thumbnail to display with the Lazy Load data attribute. Rather than editing your template, you can do this with a custom function. We have used this within a site plugin so it isn’t theme dependent (suggested).

Here’s an example of it in a working environment:

Note, there is also the fallback if Javascript isn’t available. We used the full image dimensions that have been adjusted on the individual image basis since Lazy Load suggests to set height and width. You could also load a custom thumbnail size and then have your width and height match.

Make sure you are also referencing the javascript for it (see http://www.appelsiini.net/projects/lazyload). In our case, we’ve also put in the CSS for the javascript-disabled image to hide.

Now if that sounds a bit too difficult, don’t worry. You can implement LazyLoad for with other plugins like Smush by WPMUDEV!