WooCommerce Products Grid for Elementor

When shoppers want to browse and compare, nothing beats a clean grid. A products grid lays out your WooCommerce items in even rows and columns, so people can scan prices and options at a glance. This is the Products Grid widget from the Magical Products Display add-on for Elementor, when to use it, how to add it, and how to keep it fast and scannable.

• Type Elementor widget
• For WooCommerce
• Layout Grid
• Best for Browsing many products

Why a products grid

A carousel is for featuring; a grid is for shopping. On a shop or category page, visitors want to see many products at once, compare them, and pick. A grid gives every item an equal, scannable cell and lets the page grow with the catalog. It is the workhorse layout of any store, and getting it clean makes browsing effortless.

Grid vs a carousel

How to add a Products Grid in Elementor

With the Magical Products Display add-on active:

1. Activate the add-on and edit your page with Elementor.
2. Drag the Products Grid widget onto the canvas.
3. Choose the products: category, tag, featured, on-sale, or best-selling.
4. Set columns for desktop, tablet, and mobile.
5. Style and publish: cards and optional pagination, then check mobile.

Options worth setting

• Product source. Category, tag, featured, on-sale, best-selling, or hand-picked.
• Columns. Set the grid columns per screen size.
• Card details. Image, title, price, rating, sale badge, and add-to-cart.
• Pagination. Show more, numbered pages, or a fixed count.
• Styling. Card style, spacing, and hover effects in Elementor.

Tips for a fast, scannable grid

• Use three or four columns on desktop for readable cards.
• Keep image ratios equal so rows line up cleanly.
• Show the price and rating, the two things shoppers scan for.
• Paginate long lists so the page does not load hundreds of items.
• Optimize images and cache, since a grid loads many at once.

Frequently asked questions