Skip to content

How to Show WooCommerce Products in Masonry Grid Layout in WordPress?

Updated On : September 28, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Nexter Blocks Product Listing block shows WooCommerce products in a masonry grid layout in WordPress.
  • Masonry layout is selected from the Layout section after choosing the listing type and style in the Product Listing block.
  • Columns Manager tab manages the masonry columns, and other settings and style options fine-tune the layout.
Table of Contents

A plain grid gives every card in a row the same height, so a product with a short name and no rating leaves white space beneath it.

Masonry lets each card keep its own height and packs them together instead.

LIVE BLOCK LINK

Before You Start

  • Edition: Pro — the Product Listing block needs Nexter Blocks Pro.
  • Block to enable: Product Listing, switched on under Nexter > Blocks in your WordPress dashboard.
  • WooCommerce active, with published products. The block reads your real catalogue, so an empty store renders an empty listing.

Steps

  1. Select your Product Listing block.
The Product Listing block
  1. Set the layout to masonry.
Choosing the masonry layout
  1. Set the columns, and set them again for smaller screens.
  1. Publish and check the real page.

How It Behaves

Masonry is a layout mode plus a script that positions the cards once their heights are known.

  • Measured on a published page: the wrapper rendered data-layout="masonry" and carried the tpgb-isotope class that does the packing.
  • Positioning happens after load, because card heights cannot be known until the product images have arrived.
  • It suits catalogues with varied cards, such as a mix of rated and unrated products, or names of very different lengths.
  • Every card carries its own data. Measured on a published page, each product renders as an article whose classes include its category (product_cat-...), its tags (product_tag-...), its stock state (instock or outofstock) and whether it is on sale.
  • Measured with Nexter Blocks Pro deactivated: the block renders nothing at all — no wrapper, no products, no prices. This is a Pro-only block.

Limitations

  • Pro only — measured with Nexter Blocks Pro deactivated, nothing renders.
  • Cards can jump as the page loads, because heights are measured as images arrive. Consistent image sizes reduce it.
  • It only helps when heights genuinely differ. A tidy catalogue with uniform cards looks identical to a grid.
  • Shoppers compare by row. Masonry breaks the row alignment, which can make side-by-side price comparison slightly harder.
  • On a single-column phone layout there is nothing to pack.

Troubleshooting

It looks exactly like a grid

Your cards are the same height, so there is nothing to pack.

The cards jump around while loading

Product images are arriving at different times. Standardise image dimensions.

Nothing packs at all

Check Nexter Blocks Pro is active. Measured with Pro off, the block renders nothing.

Prices are hard to compare

That is the trade-off with staggered rows. A plain grid is better for price comparison.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before showing WooCommerce products in a masonry grid in WordPress?

Nexter Blocks Pro is required because the Product Listing block is Pro-only. The page also says WooCommerce must be active and have published products, since the block reads your real catalogue. That matters because an empty store renders an empty listing, so there is nothing for masonry to pack. In Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter, the block is enabled under Nexter > Blocks in the WordPress dashboard.

Why does a masonry product grid look better than a normal grid for some stores?

Masonry keeps each card at its own height instead of forcing every card in a row to match. That removes the white space you get when one product has a short name or no rating. It suits catalogues with mixed card heights, like rated and unrated products or names of very different lengths. If your catalogue is already uniform, masonry will look almost the same as a plain grid.

How do I make WooCommerce products display in masonry layout with Nexter Blocks?

The page’s workflow is simple: select the Product Listing block, switch the layout to masonry, set the columns, and set them again for smaller screens. The important part is checking the real published page afterward, because masonry positioning happens after load once image heights are known. That means what you see in the editor can differ from the live page if product images load at different times.

Why are my masonry product cards jumping around while the page loads?

That jump usually comes from product images arriving at different times. Masonry measures card heights after load, so uneven image timing changes the final packing order as the page settles. Standardising image dimensions reduces that movement and makes the layout feel calmer. This is especially noticeable on catalogues with mixed product cards where some images are taller or load slower than others.

Why does nothing show when I enable masonry for product listing?

Nexter Blocks Pro has to be active for this block to render anything at all. The page says that with Pro deactivated, there is no wrapper, no products, and no prices. That makes this a hard dependency rather than a styling issue. If your store is also empty or has no published products, the listing will still render empty because it reads from the live catalogue.

Is masonry good for comparing product prices side by side?

Masonry is weaker for price comparison because shoppers compare by row, and staggered rows break that alignment. A plain grid keeps cards lined up horizontally, which makes prices easier to scan across products. On a single-column phone layout there is nothing to pack anyway, so masonry gives you less benefit there. For price-first catalogues, the grid layout linked in Show products in grid layout is usually the cleaner choice.

Last reviewed: September 28, 2026

Related Docs

How to Add a Category Wise Filter in Blog Post in WordPress?
icon
How to Add a Category Wise Filter in Team Member Listing in WordPress?
icon
How to Add a Post Listing in WordPress?
icon
How to Add Infinite Scroll to Blog Posts in WordPress?
icon
How to Add Infinite Scroll to WooCommerce Products List in WordPress?
icon
How to Add Load More Button in WooCommerce Products in WordPress?
icon
123……………14