---
title: "How to Show WooCommerce Products in Masonry Grid Layout in Elementor?"
url: https://theplusaddons.com/docs/show-woocommerce-products-in-masonry-grid-layout-in-elementor/
date: 2023-08-08
modified: 2026-04-11
lang: en
author: "Aditya Sharma"
description: "Are you looking to display your WooCommerce products in a visually appealing masonry grid layout on your Elementor-powered website? Masonry grid layout is a popular and effective way to showcase..."
image: https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Show-WooCommerce-Products-in-Masonry-Grid-Layout-in-Elementor_-1024x536.jpg
word_count: 206
---

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

## 

- Utilizes the Product Listing widget from The Plus Addons for Elementor to create a masonry grid layout for WooCommerce products.
- Selects Masonry from the Layout section after choosing the appropriate listing type in the Product Listing widget.
- Manages masonry columns through the Columns Manage tab to customize product display.

Are you looking to display your WooCommerce products in a visually appealing masonry grid layout on your Elementor-powered website? Masonry grid layout is a popular and effective way to showcase products on an online store. It helps to organize products in a dynamic and visually captivating format.

With the Product Listing widget from The Plus Addons for Elementor, you can easily create a masonry grid layout to show products.

*To check the complete feature overview documentation of The Plus Addons for Elementor Product Listing widget, [click here](/docs/product-listing-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing//#woo-products-wgts?utm_source=tpae&utm_medium=docs&utm_campaign=text)

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

1. Add the Product Listing widget to the page. 

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

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

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

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

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

Also, check [How to Show WooCommerce Products in Grid Layout in Elementor](https://theplusaddons.com/docs/show-woocommerce-products-in-grid-layout-in-elementor/).