The Product List widget by Atomic Addons shows your WooCommerce products one under another, each with a small image beside its name, star rating, price and badges. It takes little room, so it suits a sidebar or a narrow column with your newest, best-selling or discounted products. This guide covers adding the widget, choosing the products and setting up what each row shows.
Enable the Product List Widget
Product List 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 List. You can also open the WooCommerce category.
- 4
Turn the Product List widget on.
- 5
Click Save Settings.
Add the Product List Widget
Product List works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Product List. 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).
Layout
(Open the full-size image in a new tab)Open the widget and go to Content → Layout:
- 1
Items Gap: The space between rows. Left empty, it is 20 to 30px depending on the screen width. Use the device icon to set other values for tablets and phones.
- 2
Title HTML Tag: The product name's markup: H1 to H6, div, span or p. H3 by default.
- 3
Image Resolution: Which image size WordPress serves. The default is Full, the original upload; the image shows at about 100 to 170px wide, so Thumbnail or Medium loads faster.
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; 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 list, 6 by default.
- 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.
Row Content, Badges and Buttons
(Open the full-size image in a new tab)Content → Additional picks what each row shows:
- 1
Tabs: Content, Badge and Action btn, each described here.
- 2
Image: The product image, linked to the product.
- 3
Title: The product name, linked to the product.
- 4
Price: The price, with the regular price struck through while a product is on sale.
- 5
Rating: The star rating, between the name and the price. Products without reviews show no stars.
The Badge tab chooses the labels at the right end of each row:
- Sale — on products that are on sale.
- Percentage — the discount, such as “15% off”.
- Stock Status — In Stock, Out of Stock or On Backorder. On by default in this widget.
- Trending — on your featured products, the ones starred in Products → All Products.
- New — on products published within the Newness Days, 90 by default.
The Action btn tab has Wishlist, Compare and Quick View switches for buttons over the image. They appear only while their extensions are on (Atomic Addons → WooCommerce → Extensions). See the Product Wishlist, Product Compare and Quick View guides.
What the List Shows
(Open the full-size image in a new tab)Each row shows the image on the left and the name, rating and price beside it, with the badges at the right. When a shopper points at the image, the wishlist, compare and quick view buttons appear down its left side. The buttons belong to the image, so they go when you turn Image off. The image is small: with all three extensions on, the third button is cut off at its bottom edge.
Style the Product List
Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.
- Items — each row: background, border, border radius, padding and shadow.
- Image — the image's border, border radius and shadow. Image Size makes the image wider; it can't go below the default width.
- Title and Price — colors, hover color, 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.
If no product matches the query, the widget shows a short notice in place of the list.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.