---
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-09-28
lang: en
author: "Aditya Sharma"
description: "Do your product images come in different shapes, leaving gaps in a regular grid? Masonry lets each card keep its own height and stacks them without gaps. It is a..."
image: https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Show-WooCommerce-Products-in-Masonry-Grid-Layout-in-Elementor_-1024x536.jpg
word_count: 245
---

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

## 

- Woo Product Listing widget en The Plus Addons for Elementor Pro muestra productos de WooCommerce en Masonry, donde cada tarjeta conserva su propia altura y se apila sin huecos.
- The Plus Addons for Elementor indica que el widget Woo Product Listing no aparece en el panel de widgets del plugin gratuito y requiere la edición Pro, con WooCommerce instalado y activo y productos publicados.
- Content > Columns Manage mantiene valores por defecto de Column 4 en escritorio, Column 3 en tablet y Column 2 en móvil para el diseño Masonry.

Do your product images come in different shapes, leaving gaps in a regular grid? Masonry lets each card keep its own height and stacks them without gaps.

It is a layout option in the Woo Product Listing widget from The Plus Addons for Elementor.

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

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

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

## Before You Start

- **Edition:** **Pro** — the Woo Product Listing widget is part of The Plus Addons for Elementor Pro. It does not appear in the widget panel of the free plugin.- **WooCommerce** installed and active, with some published products.- **Widget to enable:** Woo Product Listing, switched on under **ThePlus Settings > Widgets**.

## Step 1: Add the widget and choose Masonry

Drag the **Woo Product Listing** widget onto the page. In **Content > Content Layout**, set **Layout** to **Masonry**.

![The Layout control with Masonry selected](https://theplusaddons.com/wp-content/uploads/2026/09/tp-product-listout-layout-wide-masonry.webp)

## Step 2: Set the columns

**Content > Columns Manage** works as for Grid: **Column 4** on desktop, **Column 3** on tablet and **Column 2** on mobile by default.

![WooCommerce products shown in a masonry layout](https://theplusaddons.com/wp-content/uploads/2026/09/product-listing-masonry-layout-demo.webp)

## Limitations

- **Little difference with same-size images.** If every product photo is square, masonry looks like grid.- **Pro only.** The Woo Product Listing widget is not in the free plugin.

## Related Docs

- [Woo Product Listing widget: settings overview](https://theplusaddons.com/docs/product-listing-widget-settings-overview/) — every control in the widget.- [Show products in a grid](https://theplusaddons.com/docs/show-woocommerce-products-in-grid-layout-in-elementor/)- [Show products in a metro layout](https://theplusaddons.com/docs/show-woocommerce-products-in-metro-layout-in-elementor/)

## Frequently Asked Questions

**Q: Why do WooCommerce products leave gaps in a regular grid layout in Elementor?**
A: Masonry is meant for product images with different shapes. It keeps each card at its own height and stacks them without gaps, which is why it works better than a regular grid when your product photos are uneven. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this layout inside the Woo Product Listing widget. If all your images are the same shape, the visual difference is small.

**Q: What do I need before showing WooCommerce products in a masonry grid in Elementor?**
A: The setup depends on three things: The Plus Addons for Elementor Pro, WooCommerce installed and active with some published products, and the Woo Product Listing widget enabled under ThePlus Settings > Widgets. That widget is part of the Pro version, so it will not appear in the free plugin’s widget panel. If any of those pieces are missing, the masonry layout cannot be used from this widget.

**Q: How do I switch WooCommerce products to a masonry layout in Elementor?**
A: The masonry option lives inside the Woo Product Listing widget. Add the widget to the page, then go to Content > Content Layout and set Layout to Masonry. That changes the product cards from a standard grid-style arrangement into a staggered stack that fits uneven image heights better. The Plus Addons for Elementor makes this available directly inside the Elementor editor.

**Q: What column settings work best for a masonry product grid on desktop, tablet, and mobile?**
A: The default column setup is 4 on desktop, 3 on tablet, and 2 on mobile. That matters because masonry still follows responsive column management, so the layout stays readable as screen size changes. The Plus Addons for Elementor uses the same Columns Manage behavior here as it does for Grid, which keeps the responsive structure predictable across devices.

**Q: Is masonry a good choice if all my product images are square?**
A: Square images reduce most of masonry’s value because there is little difference between cards with the same height. In that case, masonry looks like a grid, so you will not get much visual benefit from switching layouts. The Plus Addons for Elementor notes this as a limitation of the Woo Product Listing widget’s Masonry option, so image variety is what makes it useful.

**Q: What other product listing layouts can I use instead of masonry?**
A: The related docs point to two alternatives: show products in a grid and show products in a metro layout. That gives you a simple decision path if masonry is not the right fit for your images or design goal. The Plus Addons for Elementor also provides a Woo Product Listing widget settings overview, which covers every control in the widget and helps compare layout options.