The Product Slider widget by Atomic Addons shows one WooCommerce product at a time: a large image on one side and the product's category, name, short description, price and rating on the other, with a cart button and badges. A strip of thumbnails shows the products that come next, and “PREV” and “NEXT” links with a counter move through them. It works as a feature at the top of a shop or landing page. This guide covers adding the widget, choosing the products and setting up the slides.
Enable the Product Slider Widget
Product Slider 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 Slider. You can also open the WooCommerce category.
- 4
Turn the Product Slider widget on.
- 5
Click Save Settings.
Add the Product Slider Widget
Product Slider works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Product Slider. 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 Height: The slider's height, in vh, px or em. Left empty, it is 540 to 700px depending on the screen width. The image fills its side of the slide and is cropped to fit. Set it per device with the device icon.
- 2
Image Resolution: Which image size WordPress serves for the slides and thumbnails. Full, the default, keeps the large image sharp.
- 3
Show Arrows: The “PREV” and “NEXT” links under the thumbnails. On by default.
- 4
Show Pagination: A counter such as “3 / 6” beside the links. On by default.
(Open the full-size image in a new tab)The slides fade into one another. The cart button sits on the edge of the image; pointing at it shows WooCommerce's button text, such as “Add to cart”, or “Select options” for a variable product. Shoppers can click a thumbnail to go to that product, or drag the slide. On phones (767px and narrower) the image sits above the text and the thumbnails are hidden.
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 the slider holds, 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.
Slide Content, Badges and Button
(Open the full-size image in a new tab)Content → Additional Options picks what each slide shows:
- 1
Tabs: Content, Badge and Action btn, each described here.
- 2
Title: The product name in large type, linked to the product.
- 3
Title HTML Tag: The name's markup: H1 to H6, div, span or p. H3 by default.
- 4
Rating: The star rating, under the price. Products without reviews show no stars.
- 5
Price: The price, with the regular price struck through while a product is on sale.
- 6
Category: The product's categories, above the name.
- 7
Text: The product's short description.
- 8
Text Limit: How many words of it to show, 15 by default.
The Badge tab chooses the labels in the top 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. 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, 30 by default.
The Action btn tab has one switch, Add to Cart, for the cart button on the edge of the image.
Slider Settings
(Open the full-size image in a new tab)Content → Slider Settings controls how the slides change:
- 1
Autoplay: Moves to the next product by itself. On by default.
- 2
Autoplay Speed: How long each product stays, in milliseconds: 5000, or 5 seconds, by default.
- 3
Pause on Hover: Stops autoplay while the pointer is over the slide. Off by default.
- 4
Grab Cursor: Shows a hand cursor over the slide, a hint that it can be dragged.
- 5
Loop: Starts again from the first product after the last one. On by default.
- 6
Mousewheel: Lets shoppers change slides with the mouse wheel or trackpad while the pointer is over the slider. Off by default.
- 7
Animation Speed (ms): How long the change between two products takes, 800 by default.
- 8
Observer: Turn it on when the slider sits in a tab, an accordion or a popup that is hidden when the page loads, so it sizes itself when it appears.
Style the Product Slider
Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.
- Slider — the slide's background, border, radius and padding, and Content Padding for the text side.
- Images — the image's background, border and radius.
- Title — color, hover color, margin, typography, Text Shadow and Text Stroke.
- Text, Price and Category — colors and typography; Price has separate Regular Color and Sale Color, and Category has Normal and Hover states with its own background, border and padding.
- Rating — the Color of empty stars, the Active Color of filled ones and the margin.
- 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 cart button's colors in normal and hover states, border, radius, padding, margin and the Tooltip Font.
- Navigation — the “PREV” and “NEXT” links in Normal and Hover states, and the space between them.
- Pagination — the counter's Color, Active Color and typography.
- Thumbs — the thumbnails' background, border and radius, with a Hover border color.
If no product matches the query, the widget shows a short notice in place of the slides.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.