---
title: "How to Show WooCommerce Products in Masonry Grid Layout in WordPress?"
url: https://nexterwp.com/docs/show-woocommerce-products-in-masonry-grid-layout-in-wordpress/
date: 2023-08-09
modified: 2026-04-14
author: "Aditya Sharma"
description: "Showcasing WooCommerce products in a masonry grid layout on your WordPress website can transform your online store's appearance and enhance the browsing experience for your customers. The masonry grid layout..."
image: https://nexterwp.com/wp-content/uploads/2024/05/show-woocommerce-products-in-masonry-grid-layout-in-wordpress-1024x519.jpg
word_count: 195
---

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

## 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.

Showcasing WooCommerce products in a masonry grid layout on your WordPress website can transform your online store's appearance and enhance the browsing experience for your customers. The masonry grid layout is a visually captivating and modern way to display products, providing an organized and dynamic presentation.

You can show products in a masonry grid layout with the Product Listing block from the Nexter Blocks.

*To check the complete feature overview documentation of the Nexter Blocks* Product Listing block, [click here](https://nexterwp.com/docs/add-product-listing-in-wordpress/).

***Requirement  - This block is a part of the Nexter Blocks*, make sure its installed & activated to enjoy all its powers.**

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/listing/wordpress-product-listing/)

To do this, make sure you’ve added some products to your WooCommerce store, then follow the steps - 

1. Add the Product Listing block to the page. 

2. After selecting the appropriate listing type from the **Types** section and style, select **Masonry** from the **Layout** section.

![](https://nexterwp.com/wp-content/uploads/2023/08/product-listing-content-layout-masonry-new.png)

Now your products will show in a beautiful masonry layout. You can manage the masonry columns from the **Columns Manager** tab.

You can fine-tune the layout with other settings and style options.

![](https://nexterwp.com/wp-content/uploads/2023/08/product-listing-masonry-layout-demo-2.png)

Also, check [How to Show WooCommerce Products in Metro Layout in WordPress](https://nexterwp.com/docs/show-woocommerce-products-in-metro-layout-in-wordpress/).