The Product Accordion widget by Atomic Addons lists your WooCommerce products as a stack of titles. Clicking a title opens it to show the product's image, category, price, short description, rating, badges and an add to cart button. Many products fit in little space, and shoppers open only the ones they care about. This guide covers adding the widget, choosing the products and setting up what each product shows.
Enable the Product Accordion Widget
Product Accordion 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 Accordion. You can also open the WooCommerce category.
- 4
Turn the Product Accordion widget on.
- 5
Click Save Settings.
Add the Product Accordion Widget
Product Accordion works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Product Accordion. 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
Item Gap: The space between the products, 10px by default.
- 2
Title HTML Tag: The markup of the product name in each title bar: H1 to H6, div, span or p. H3 by default.
- 3
Category: The product's categories, above the price.
- 4
Category HTML Tag: The categories' markup, H5 by default.
- 5
Text: The product's short description.
- 6
Text Limit: How many words of it to show, 25 by default.
- 7
Rating: The star rating. Products without reviews show no stars.
- 8
Price: The price, with the regular price struck through while a product is on sale.
- 9
Image Resolution: Which image size WordPress serves. Full, the default, is the original upload.
- 10
Image Position: Where the image sits next to the details: Left, Top, Right or Bottom. Left empty, the image is on the left on screens 640px and wider and above the details on smaller ones. Set it per device with the device icon.
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.
Badges and Button
(Open the full-size image in a new tab)Content → Additional Options has two tabs. Badge chooses the labels in the top corner of an open product:
- 1
Tabs: Badge and Action btn.
- 2
Sale: On products that are on sale.
- 3
Percentage: The discount, such as “15% off”.
- 4
Stock Status: In Stock, Out of Stock or On Backorder. On by default in this widget.
- 5
Trending: On your featured products, the ones starred in Products → All Products.
- 6
New: On products published within the Newness Days.
- 7
Newness Days: How recent a product must be to count as new, 30 days by default.
The Action btn tab has one switch, Add to Cart, for the button under the details. It reads whatever WooCommerce uses for the product type, such as Add to cart, or Select options for a variable product.
How the Accordion Works
(Open the full-size image in a new tab)When the page loads, every product is closed and shows only its title bar with a + icon. Clicking a title opens that product and closes the one that was open, so only one is open at a time; clicking the open title closes it again. The image links to the product page.
Style the Product Accordion
Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.
- Item — the title bars in Normal and Hover states: text color, background, border, Border Radius for the whole item and Header Radius for the bar, padding, shadow and typography.
- Open & Close Icon — the + and − icon in Normal and Hover states: color, background, border, radius, spacing, size and font size.
- Content — the open panel's background and padding, and Space Between the image and the details.
- Image — the image's background, border, radius, padding and shadow.
- Category, Price and Text — colors, spacing and typography. Price has separate Regular Color and Sale Color, and Category has Normal and Hover states.
- 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 set the badges in a row or stack them, and a color and background for each badge.
- Add To Cart — the button's color, background and border color, a hover state, border, radius and padding.
If no product matches the query, the widget shows a short notice in place of the accordion.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.