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
- Masonry docs
- 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