Posted by April Sadowski and filed under Tips & Tricks, WooCommerce, WordPress

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 still implement LazyLoad for WooCommerce with our plugin!

Download it now from the WordPress Plugins Directory

About April Sadowski

Part designer and part developer, April has been working full-time for over a decade. She has a long line of ADDY Awards and published design and is the go-to person for HTML/CSS/LESS needs and front-end development. On her off-hours she can be found writing novels (she's published several), doing voice acting or audio production, or gaming. Find April at Stack Overflow

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>