Want to display WooCommerce products in a flexible, filterable grid? The Woo Product Grid widget in aThemes Addons lets you build product layouts with column controls, category filters, a Load More button, and four ready-made product card styles.
In this guide, we’ll walk you through how to activate, configure, and style the Woo Product Grid widget in aThemes Addons.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor and WooCommerce.
Activating the Woo Product Grid Widget
To enable the Woo Product Grid widget, go to your WordPress dashboard and navigate to aThemes Addons » Widgets. Find Woo Product Grid and toggle it on.
Once enabled, open any page in the Elementor editor, search for Woo Product Grid, and drag the widget onto your page.
Configuring the Layout
- Columns – Choose the number of columns (1 to 6).
- Item Gap – Adjust the space between grid items (px, em, rem).
- Product Template – Pick from Style 1, Style 2, Style 3, or Style 4.
Configuring the Query
- Query Type – Recent, Featured, On Sale, Best Selling, or Top Rated.
- Products Per Page – Number of products to display per page.
- Offset – Number of products to skip before the grid starts.
- Order By – Date, Title, Price, Popularity, Rating, or Random.
- Order – Ascending or Descending.
- Categories / Tags – Limit the grid to specific categories or tags.
- Show Filter – Add a filter bar so visitors can narrow by category (requires selected categories).
- Show All Text – Customize the label for the Show All filter option.
- Show Category Thumbs / Show All Thumb – Display thumbnail images in the filter bar.
- Show Load More / Load More Text – Enable and label a Load More button for pagination.
Configuring Product Elements
- Show Image / Show Category / Show Rating / Show Short Description / Show Price / Show Add to Cart – Toggle each element on or off.
- Title HTML Tag – Pick the tag for product titles (H1, H2, H3, etc.).
- Sale Badge Alignment – Place the sale badge on the Left or Right.
- Sale Badge Text – Customize the sale badge label.
- Merchant Options – Enable Quick View, Buy Now, Wishlist, and Product Swatches when the Merchant plugin is active.
Styling the Product Grid
Switch to the Style tab to customize every visual aspect of the grid.
Wrapper Style
Adjust padding, margin, background color, border radius, border, and box shadow for the entire widget wrapper.
Filter Style
- General – Set the filter bar’s alignment, background, and padding.
- Filter Items – Customize typography, padding, spacing, border radius, color, background, and border.
Product Card Style
Adjust padding, background color, border radius, border, and box shadow for each product card.
Product Image Style
Adjust image height, border radius, and box shadow.
Product Content Style
Customize typography and color for the product title, price, short description, rating, and category.
Sale Badge Style
Adjust padding, margin, background color, text color, and border radius for the sale badge.
Add to Cart and Load More Button Style
Customize typography, background color, text color, border, padding, and hover effects for both buttons.
Frequently Asked Questions
Below, we’ve answered some of the most common questions about the Woo Product Grid widget.
Do I need WooCommerce for this widget?
Yes. The widget pulls products from WooCommerce, so the plugin must be installed and active with at least one published product.
How do I show the category filter bar?
In the Query section, select at least one category under Categories, then enable Show Filter.
Can I use this widget alongside the Merchant plugin?
Yes. When Merchant is active, extra options appear under Merchant Options for Quick View, Buy Now, Wishlist, and Product Swatches.
That’s it! You’ve successfully built a customized WooCommerce product grid on your WordPress site using the aThemes Addons Woo Product Grid widget.
Next, would you like to display products in a carousel format instead? Check out our guide on Using the Products Carousel Widget to learn more.
