A product grid is the workhorse of every online store, and most of them are a compromise. The theme gives you one layout, WooCommerce gives you pagination that reloads the page, and anything beyond that means a child theme and a developer. The Product Grid widget takes that whole job into Elementor: six layouts from one dropdown, filter tabs that swap products without a reload, a quick-view modal, and pagination that loads more in place. Sentio built the Elementor Product Grid so a store’s catalogue pages can be designed rather than inherited.
What Is the Product Grid Widget?
The Product Grid widget queries your WooCommerce catalogue and renders it however the page needs. Six layouts ship in the widget — grid, masonry, list, compact, card and overlay — and each can be set to between one and six columns with its own gap. What appears on a card is entirely optional: category label, title, star rating, price, savings, short excerpt, add-to-cart button, wishlist heart, compare checkbox and a quick-view trigger can each be switched on or off. Products can come from the latest additions, items on sale, featured or best-selling lines, a top-rated list, specific categories or tags, or a manual selection. Every Elementor Product Grid instance is configured from one panel, so the query and the presentation stay together.
Key Features of the Product Grid Widget
- Six layouts, eight hover effects — grid, masonry, list, compact, card and overlay, paired with zoom, slide, swap, grayscale, shine, overlay, blur or parallax imagery.
- AJAX filter tabs — a category or tag bar above the grid that swaps the products in place, with an optional All tab.
- Quick view and AJAX add to cart — shoppers open a gallery and add to the basket without leaving the page, with animated feedback on the button.
- Smart badges and pagination — automatic sale percentage, new, featured, hot and out-of-stock badges, plus numbered pages, a load-more button, or infinite scroll.
Why Use the Product Grid Widget on Your Site?
Catalogue pages are where browsing either continues or stops, and almost every stall is a page reload. The Product Grid widget removes those. Filter tabs swap the grid in place, load-more appends instead of navigating, and quick view answers what a product is without losing the shopper’s scroll position. Because the layout and the query live in the same widget, one page can carry several very different grids. A coffee roaster can run a tight three-column grid of beans and brewing kit with quick view and a wishlist. A homeware store can use the card layout with filter tabs across five categories, star ratings, savings on discounted lines, and a load-more button. A minimal concept shop can switch to the list layout with short excerpts and every decorative element turned off. Same Elementor Product Grid, three different shopping experiences, no child theme involved.
Getting Started With Product Grid in Minutes
Install Sentio Addons on a store running WooCommerce and drop the Elementor Product Grid widget onto a page. Pick where the products come from — latest, on sale, featured, best selling, top rated, a category, a tag, or a manual list — and how many to show. Choose a layout and a column count, then set the gap and an image hover effect. Switch on the parts of the card you want: badges, category, rating, price, savings, excerpt, add to cart, wishlist, compare, quick view. If the page needs filtering, enable the tabs and choose which categories appear. Finally pick a pagination style. Everything after that is styling, and cards, badges, buttons, filters and typography each have their own controls.
See the Product Grid Widget in Action
The widget page above this article runs three configurations against one catalogue: a navy three-column grid with badges and quick view, a pink card layout with AJAX filter tabs and load-more, and a minimal list with excerpts and no chrome at all. Filter, load more, and open a quick view to see how little the page moves.
A catalogue page should feel like a designed surface, not a default template with your products poured into it. Reach for the Product Grid widget for Elementor and the layout, the query, the badges and the interactions all come from one place. Sentio Addons keeps building practical, design-system-friendly widgets like this because publishing teams need real tools, not toy components.