The Product Image Accordion widget by Atomic Addons shows your WooCommerce products side by side as tall panels, each filled with the product's image. When a shopper points at a panel, it widens, its text slides up and a quick view and an add to cart button appear. The panels come from a product query, so you don't add them one by one. This guide covers adding the widget, choosing the products and setting up the panels.
Enable the Product Image Accordion Widget
Product Image 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 Image Accordion. You can also open the WooCommerce category.
- 4
Turn the Product Image Accordion widget on.
- 5
Click Save Settings.
Add the Product Image Accordion Widget
Product Image Accordion works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Product Image 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).
It suits a full-width section near the top of a home or landing page. Three to five panels fit a wide screen best.
Layout
(Open the full-size image in a new tab)Open the widget and go to Content → Layout:
- 1
Height: The height of the panels, 600px by default. Use the device icon to set a smaller height for tablets and phones.
- 2
Item Hover Expand: How wide the panel under the pointer grows, in em: 20em by default. Every panel starts at 10em and the others share the space that is left.
- 3
Image Resolution: Which image size WordPress serves for the panels. The default is Full, the original upload, which stays sharp at any height.
(Open the full-size image in a new tab)Each panel shows the product's badges in the top corner and, over a dark shade at the bottom, its categories, name, price and star rating. Products without reviews show no stars. On hover, the panel widens, the text moves up and two round buttons appear: Quick View and add to cart. The add to cart button adds a simple product to the cart without leaving the page; for a variable, grouped or external product it opens the product page. The image and the name link to the product.
On screens narrower than 768px the panels stack one above the other at full width, each as tall as the Height setting.
Query
(Open the full-size image in a new tab)Content → Query decides which products become panels:
- 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, such as a category archive, for a Products Archive template. Related shows, on a product page, products by the same author as the one being viewed.
- 2
Product Limit: How many panels to show, 3 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, which matters here because the image fills the panel. Query ID is for developers: it gives the query a name that custom code can filter. With Current Query the filters and order settings are hidden, and Product Limit still sets how many panels appear.
Settings
(Open the full-size image in a new tab)Content → Settings picks what each panel 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 as small outlined labels above the name.
- 5
Rating: The star rating, shown only for products with reviews.
- 6
Price: The price, with the regular price struck through while a product is on sale.
The Badge tab chooses the labels in the corner of each panel: Sale, Percentage (such as “15% off”), Stock Status (off by default), Trending for your featured products and New for products published within the Newness Days, 30 by default.
The Action btn tab switches the two hover buttons. Quick View appears only while the Quick View extension is on (Atomic Addons → WooCommerce → Extensions). Add to Cart always works. This widget has no wishlist or compare buttons.
Style the Product Image Accordion
Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.
- Content — the text area at the bottom of each panel: Max Width (350px by default; full width on phones), Padding, and Overlay Color, which replaces the dark shade behind the text with a gradient of your color.
- Title — Color, Hover Color and typography of the name.
- Category — the category labels in Normal and Hover states: color, background, border, radius, padding, margin, the space between labels, typography and shadow.
- Price — Regular Color, Sale Color, margin and typography.
- Rating — the Color of empty stars and the Active Color of filled ones.
- Badge — the shared shape (border, radius, padding, margin, 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 panels.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.