The Product Grid widget by Atomic Addons shows your WooCommerce products as cards in a grid or a list. Each card has the product image, category, name, price and rating, badges such as Sale and New, and an add to cart button with quick actions on hover. You choose which products appear, and you can add a layout switcher and pagination for a full shop page. This guide covers adding the widget, choosing the products and setting up the cards.
Enable the Product Grid Widget
Product Grid is a Pro widget and needs Atomic Addons Pro and WooCommerce. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Product Grid. You can also open the WooCommerce category.
- 4
Turn the Product Grid widget on.
- 5
Click Save Settings.
Add the Product Grid Widget
Product Grid works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Product Grid. The widget sits in the Atomic Addons Pro category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
To design your store's shop and category pages, put the widget in a Theme Builder template instead: choose the Products Archive card, which applies to WooCommerce → All Product Archives, and set the widget's Source to Current Query (see Query).
Layout
(Open the full-size image in a new tab)Open the widget and go to Content → Layout:
- 1
Style: Grid shows the products as cards in columns. List puts each image beside its text and adds a short description.
- 2
Columns: 1 to 6 columns: 3 by default for the grid, 2 for the list. Use the device icon to set other numbers for tablets and phones.
- 3
Columns Gap: The space between columns, 30px by default.
- 4
Row Gap: The space between rows, 30px by default.
- 5
Alignment: Left, center or right alignment of the text in each card.
- 6
Image Resolution: Which image size WordPress serves for the cards. The default, Medium Large, is sharp at three or four columns.
- 7
Columns Filter: Grid style only: a bar above the grid with buttons that let shoppers change the layout. See Layout Switcher and Pagination.
- 8
Pagination: Page numbers under the grid. Each page shows as many products as the Limit in the Query section.
(Open the full-size image in a new tab)When a shopper points at a card, its image changes to the product's first gallery image, the add to cart button appears along the bottom of the image and the quick action buttons show up. For a product with reviews, the stars take the place of the price. The button reads whatever WooCommerce uses for the product type, such as Add to cart, or Select options for a variable product.
Query
(Open the full-size image in a new tab)Content → Query decides which products appear:
- 1
Source: Product, the default, picks from all your products with the filters below. Manual Selection shows only the products you search for and pick. Current Query shows the products of the page being viewed — the shop, a category, a tag or search results — which is what a Products Archive template needs; the editor may not show them until you save and reload. Related shows, on a product page, products by the same author as the one being viewed; narrow it down with Include By → Terms, and add Exclude By → Current Post to leave out the product itself.
- 2
Limit: How many products to show, 6 by default. With pagination on, it is the number per page.
- 3
Include / Exclude: Include By keeps only products in the Terms you pick (categories or tags) or by the Authors you pick. Exclude By leaves out terms, authors, the Current Post or products you pick with Manual Selection.
- 4
Offset: Skips this many products from the start of the list.
- 5
Date: Only products published in the past day, week, month, quarter or year, or between a Before and an After date with Custom.
- 6
Order By: Date (the default), Title, ID, Author, Comment Count, Menu Order, Random, Price or Sales.
- 7
Order: DESC puts the newest, most expensive or best-selling first; ASC reverses it.
- 8
Show Product: All Products, only products On Sale, or only Featured products.
- 9
Hide Free Product: Leaves out products with no price.
- 10
Hide Out of Stock: Leaves out products that are out of stock.
Only Featured Image Post leaves out products without an image. Query ID is for developers: it gives the query a name that custom code can filter.
With Current Query the page's own query decides which products show and in what order, so the filters and order settings are hidden. Limit still sets how many appear per page.
Card Content, Badges and Buttons
(Open the full-size image in a new tab)Content → Settings picks what each card shows:
- 1
Tabs: Content, Badge and Action btn, each described here.
- 2
Title: The product name, linked to the product.
- 3
Title HTML Tag: The name's markup: H1 to H6, div, span or p. H3 by default.
- 4
Category: The product's categories, above the name.
- 5
Category HTML Tag: The categories' markup, H5 by default.
- 6
Rating: The star rating. Products without reviews show no stars.
- 7
Price: The price, with the regular price struck through while a product is on sale.
With the List style, the Content tab also has Text: the product's short description, cut to the Text Limit (15 words by default).
The Badge tab chooses the labels in the corner of the image:
- Sale — on products that are on sale.
- Percentage — the discount, such as “15% off”.
- Stock Status — In Stock, Out of Stock or On Backorder. Off by default.
- Trending — on your featured products, the ones starred in Products → All Products.
- New — on products published within the Newness Days, 30 by default.
The Action btn tab switches the buttons on the image: Wishlist, Compare, Quick View and Add to Cart. Wishlist, Compare and Quick View appear only while their extensions are on (Atomic Addons → WooCommerce → Extensions). See the Product Wishlist, Product Compare and Quick View guides.
Layout Switcher and Pagination
(Open the full-size image in a new tab)Turn on Columns Filter in the Layout section to add the bar above the grid:
- Select Column Type chooses its buttons: List and grids of 2 to 6 columns. List, 2, 3 and 4 are on by default.
- Result Count adds WooCommerce's “Showing 1–6 of 29 results” on the left. It is on by default.
The grid starts at three columns, and the Columns setting is hidden while the switcher is on. A shopper's choice is remembered in their browser for their next visit. The bar shows only on screens 1200px and wider.
With Pagination on, page numbers and a next arrow appear under the grid; the current page is highlighted.
(Open the full-size image in a new tab)The List style places each image beside the category, name, short description and price, which suits wider columns.
Style the Product Grid
Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.
- Columns Filter and Count Result — the layout buttons in Normal, Hover and Active states, and the result count's color, margin and typography.
- Items — the card: background, border, border radius, padding and shadow, with a Hover state.
- Image — the image area's background, border, radius, padding and shadow. With the List style or the layout switcher, Image Size sets the image's width.
- Content — the text area under the image: background, border, radius and padding.
- Title, Category, Text and Price — colors, hover colors, spacing and typography. Price has separate Regular Color and Sale Color.
- Rating — the Color of empty stars and the Active Color of filled ones.
- Badge — the shared shape (border, radius, padding, spacing, typography), Display Type to stack the badges or set them in a row, and a color and background for each badge.
- Add to Cart — the button in Normal and Hover states, with its width and height.
- Pagination — alignment, the page numbers in Normal, Hover and Active states, and the spacing above and between them.
If no product matches the query, the widget shows a short notice in place of the grid.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.