This video shows you how to add a Masonry-powered tiled layout to the free WP eCommerce WordPress plugin products page.

This tutorial builds on the previous one, where I showed you how to build a CSS-only grid layout for the WP eCommerce products page. I’ll be using the same files I created in that tutorial, i.e., the WP eCommerce products page template and the CSS styles. If you’ve missed it and are interested, please visit Add A CSS-only Products Grid To A WP eCommerce Page

How To Integrate WP eCommerce With The JavaScript Masonry And imagesLoaded Plugins
Our CSS-only solution is nice when grid items are all of the same width and height. However, we can’t be sure this is the case at all times. As soon as the grid items’dimensions get uneven, the layout is somewhat broken. And things get worse when the screen size keeps changing.

To remedy this situation, we need to add JavaScript to the mix. Here’s how.

References
Masonry JavaScript plugin
Masonry Appendix page
Masonry docs
imagesLoaded JavaScript plugin
jQuery library
WP eCommerce WordPress plugin
Oxygen Theme
Codex Functions Reference: wp_enqueue_script()
Pixabay.com for products images
Screencastify.com video capture add-on for Chrome
YouTube video editor
Have you used a Masonry tiled layout on your website? I’d love to hear from you in the comments below

Leave a comment

Your email address will not be published.