Add A Masonry Layout To The WP eCommerce Plugin’s Products Page

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.


Have you used a Masonry tiled layout on your website? I’d love to hear from you in the comments below

Have your Say

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s