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
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.
Masonry Appendix page
WP eCommerce WordPress plugin
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