---
title: "How to Show WooCommerce Products in Grid Layout in Elementor?"
url: https://theplusaddons.com/docs/show-woocommerce-products-in-grid-layout-in-elementor/
date: 2023-08-08
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "Do you want your products in a tidy grid of cards, with the same number per row? Grid is the default layout of the Woo Product Listing widget in The..."
image: https://theplusaddons.com/wp-content/uploads/2023/08/How-to-Show-WooCommerce-Products-in-Grid-Layout-in-Elementor_-1024x536.jpg
word_count: 319
---

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

## 

- Woo Product Listing widget is part of The Plus Addons for Elementor Pro and does not appear in the free plugin widget panel.
- Content > Content Layout keeps Layout set to Grid by default, with separate column counts per device.
- Content > Columns Manage sets Desktop Column to 4, Tablet Column to 3, and Mobile Column to 2, each from 1 to 6.

Do you want your products in a tidy grid of cards, with the same number per row?

Grid is the default layout of the Woo Product Listing widget in The Plus Addons for Elementor, with separate column counts per device.

*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

Drag the **Woo Product Listing** widget onto the page. In **Content > Content Layout**, **Layout** is already **Grid**.

![The Layout control with Grid selected and products in a grid](https://theplusaddons.com/wp-content/uploads/2026/09/tp-product-listout-layout-wide-grid.webp)

## Step 2: Pick a card style

**Style** offers Style 1, Style 2, Style 3 and **Custom Skin**, where you design the card yourself as a template.

![The Style choices for the product card](https://theplusaddons.com/wp-content/uploads/2026/09/tp-product-listout-style-wide-grid.webp)

## Step 3: Set the columns

Open **Content > Columns Manage**. **Desktop Column** defaults to **Column 4**, **Tablet Column** to **Column 3** and **Mobile Column** to **Column 2**, each from 1 to 6.

![The Desktop Column dropdown in Content > Columns Manage](https://theplusaddons.com/wp-content/uploads/2026/09/tp-product-listout-desktop-column-wide-grid.webp)

![WooCommerce products shown in a grid layout](https://theplusaddons.com/wp-content/uploads/2023/08/product-listing-grid-layout-demo.png)

## Settings Reference

| Setting | Where | Options | Default |
| ------- | ----- | ------- | ------- |
| Layout | Content > Content Layout | Grid, Masonry, Metro, Carousel | Grid |
| Style | Content > Content Layout | Style 1 to 3, Custom Skin | Style 1 |
| Desktop Column | Content > Columns Manage | Column 1 to 6 | Column 4 |
| Tablet Column | Content > Columns Manage | Column 1 to 6 | Column 3 |
| Mobile Column | Content > Columns Manage | Column 1 to 6 | Column 2 |
| Maximum Posts Display | Content > Content Source | Number | 8 |

## Limitations

- **Pro only.** The Woo Product Listing widget is not in the free plugin.- **Uneven titles make uneven cards.** Keep product names a similar length, or use Masonry.

## 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 masonry grid](https://theplusaddons.com/docs/show-woocommerce-products-in-masonry-grid-layout-in-elementor/)- [Show products in a metro layout](https://theplusaddons.com/docs/show-woocommerce-products-in-metro-layout-in-elementor/)- [Show products in a carousel](https://theplusaddons.com/docs/create-woocommerce-product-carousel-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before showing WooCommerce products in a grid layout in Elementor?**
A: The Woo Product Listing widget is part of The Plus Addons for Elementor Pro, so it will not appear in the free plugin. You also need WooCommerce installed and active, plus some published products. The widget must be switched on under ThePlus Settings > Widgets. That setup matters because the grid layout is built into the widget itself, not added later with a separate layout tool.

**Q: Why isn’t the Woo Product Listing widget showing in Elementor?**
A: The usual blocker is edition or activation. This widget belongs to The Plus Addons for Elementor Pro, so it does not appear in the free plugin’s widget panel. It also has to be enabled under ThePlus Settings > Widgets. If those two pieces are in place, the widget should be available inside the Elementor editor.

**Q: How many products can I show per row on desktop, tablet, and mobile?**
A: The grid uses separate column counts per device, which is useful when one layout needs to stay readable across screen sizes. Desktop defaults to Column 4, Tablet to Column 3, and Mobile to Column 2. Each device can be set from Column 1 to Column 6, so you can keep the grid tighter on desktop or more compact on smaller screens.

**Q: What card styles are available for Woo Product Listing grids?**
A: The widget offers Style 1, Style 2, Style 3, and Custom Skin. That gives you a quick preset path or a fully custom card design if you want to build the product card yourself as a template. The practical tradeoff is speed versus control: presets are faster, while Custom Skin is better when you need a specific product-card structure.

**Q: How do I keep product cards from looking uneven in a grid?**
A: Uneven product titles are the main reason cards end up with different heights. Keeping product names a similar length helps the grid stay visually tidy. If title length varies too much, Masonry is the better layout choice because it handles uneven card heights more naturally than a strict grid.

**Q: Is there another layout if I don’t want a standard product grid?**
A: The Woo Product Listing widget supports more than Grid. Its Content Layout options include Grid, Masonry, Metro, and Carousel. That makes it easy to switch based on the content shape: Grid for uniform cards, Masonry for uneven heights, Metro for a more varied visual pattern, and Carousel when you want products presented in a sliding format. Related guides cover [masonry](https://theplusaddons.com/docs/show-woocommerce-products-in-masonry-grid-layout-in-elementor/), [metro](https://theplusaddons.com/docs/show-woocommerce-products-in-metro-layout-in-elementor/), and [carousel](https://theplusaddons.com/docs/create-woocommerce-product-carousel-in-elementor/).