The Price Carousel widget by Atomic Addons shows a row of cards that slides sideways, each with an image, a name, a price, a short text, a rating and a time, such as the dishes on a restaurant menu or the services of a salon. You type every card yourself, so it needs no shop: for WooCommerce products use the Product Carousel widget instead. This guide covers adding the widget, writing the cards and setting up the carousel. For the same cards in a fixed grid, see the Price Grid widget.
Enable the Price Carousel Widget
Price Carousel is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Price Carousel. You can also open the Content category.
- 4
Turn the Price Carousel widget on.
- 5
Click Save Settings.
Add the Price Carousel Widget
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Price Carousel. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Product Items
Content → Product Items holds the cards: six samples, from Pizza to Pasta, to start with. Click a card to open it, use Add Item for a new one, and drag cards to change their order. Each card has:
- 1
Image: The card's picture, a placeholder by default.
- 2
Title: The item's name. It also names the card in the list.
- 3
Price: The price as you want it to read, such as “$204” (the default) or “From €12”. It is plain text, so you write the currency yourself.
- 4
Text: A short description, written in a text editor.
- 5
Link: Where the card leads,
#by default. The cog icon opens Elementor's link options. - 6
Rating: A score from 0.5 to 5 in half steps, 4.5 by default.
- 7
Rating Count: Text beside the rating, such as the number of reviews: “(10,678)” by default.
- 8
Time: A duration shown with a clock icon, such as a preparation time: “1 hour 10 mins” by default.
- 9
Badge Text: The label in the corner of the image, “Sale” by default. It shows only while Badge is on; leave it empty for no badge on this card.
A part you leave empty is skipped on that card. The title and price share a line, with the price on the right; the rating and time share the bottom line of the card.
Additional Settings
Content → Additional Settings sets the layout and what every card shows:
- 1
Columns: How many cards show at once, 1 to 6: 3 by default, 2 on tablets and 1 on phones.
- 2
Item Gap: The space between cards, 0 to 100px: 20px by default.
- 3
Item Match Height: Stretches every card to the height of the tallest one. On by default.
- 4
Show Name: Shows the titles. On by default. Title HTML Tag sets their markup: H1 to H6, div, span or p, H3 by default.
- 5
Show Price: Shows the prices. On by default.
- 6
Show Time: Shows the times. On by default.
- 7
Show Text: Shows the descriptions. On by default.
- 8
Link to: Which part of the card opens its link. Button, the default, adds a Read More button under the text. Title, Image or Item Wrapper (the whole card) make that part clickable instead, with no button.
- 9
Show Rating: Shows the rating and its count. On by default. Rating Type shows it as a Number with one star, such as “4.5 ★” (the default), or as five Star icons filled to the score.
- 10
Badge: Shows each card's Badge Text. Off by default.
- 11
Show Iamge: (spelled this way in the panel) Shows the images. On by default. Image Resolution picks which size WordPress serves, Medium by default.
- 12
Alignment: Left, center, right or justified text in the cards, per screen size.
Read More
With Link to set to Button, Content → Read More sets up the button: Read More Text (“Read More” by default), an optional Icon, its Icon Position (Left or Right, the default) and Icon Spacing (8px by default). A card whose Link is empty shows no button.
Badge
With Badge on, Content → Badge places the labels:
- 1
Position: Where the badge sits on the card: Top Right by default, or any corner, edge center or the center.
- 2
Offset: Click the pencil and choose Custom to fine-tune the badge: Horizontal Offset and Vertical Offset move it up to 300px either way, and Rotate tilts it, −360° to 360°. Each can differ per screen size.
Navigation
Content → Navigation sets the controls visitors use to move the carousel. They can also swipe or drag the cards.
- 1
Navigation: Arrows, the default, adds previous and next buttons. Arrows and Dots adds a dot for each position as well, and Arrows and Fraction a counter such as “1 / 6”. Dots shows only the dots, Progress a bar that fills as the carousel moves, and None nothing.
- 2
Dynamic Bullets?: With dots: shows only a few dots at a time, smaller the further they are from the current one.
- 3
Show Scrollbar?: Adds a draggable bar under the cards. It appears while the carousel moves and fades out after.
- 4
Arrows and Dots Position: Where the controls sit. Its name follows your choice above: Arrows Position, Arrows and Fraction Position and Arrows and Dots Position offer nine places around the carousel, Center by default, which puts the arrows at the sides; Dots Position offers eight, Bottom Center by default.
- 5
Progress Position: With Progress: the bar runs along the Bottom of the cards (the default) or the Top.
- 6
Hide Arrow on Mobile: Hides the arrows on screens narrower than 960px, where visitors swipe. On by default.
Carousel Settings
Content → Carousel Settings controls how the carousel moves:
- 1
Layout: Carousel, the default, slides the cards in a flat row. Coverflow turns the cards beside the current one away in 3D.
- 2
Coverflow Effect: Coverflow only: Rotate sets how far the side cards turn (50 by default), Stretch the space between them (0), Depth how far back they sit (100) and Modifier multiplies the whole effect (1).
- 3
Autoplay: Moves the carousel on by itself. On by default.
- 4
Autoplay Speed: How long each position stays, in milliseconds: 5000, or 5 seconds, by default.
- 5
Pause on Hover: Stops autoplay while the pointer is over the carousel. Off by default.
- 6
Slides to Scroll: How many cards each move advances, 1 by default. Use the device icon to set it for tablets and phones.
- 7
Center Slide: Keeps the current card in the middle, with the others on either side. The panel's hint suggests an even number of Columns.
- 8
Grab Cursor: Shows a hand cursor over the cards, a hint that they can be dragged.
- 9
Drag Free Mode: Lets a swipe glide the cards freely and stop anywhere, instead of snapping to the next card.
- 10
Loop: Starts again from the first card after the last one. On by default. When the carousel holds no more cards than it shows at once, loop turns itself off so the same cards don't repeat side by side.
- 11
Animation Speed (ms): How long one move takes, 500 by default.
- 12
Observer: Turn it on when the carousel sits in a tab, an accordion or a popup that is hidden when the page loads, so it sizes itself when it appears.
- 13
Mousewheel: Lets visitors move the carousel with the mouse wheel or a trackpad swipe while the pointer is over it.
Style the Price Carousel
Everything below is on the Style tab. Sections that belong to a part you turned off are hidden.
- Items — the card: content padding, background, border, radius, padding and shadow, with a Hover state. Match Padding adds room around the row of cards so a shadow isn't cut off at the edges.
- Image — border, radius, padding and the spacing below it.
- Title, Price and Text — color, spacing and typography; the title also has a text shadow.
- Read More — the button's colors, background, border, radius, padding and margin, with a Hover state and a hover animation.
- Rating — star colors, or for the Number type the number's colors, background, radius and padding; plus the count's color, typography and spacing.
- Time — color, typography and the space between the clock icon and the text.
- Badge — text color, background, border radius, padding, margin and typography.
- Navigation — the arrows, dots, counter, progress bar and scrollbar: colors, sizes and spacing, plus offsets to move the controls from their position.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.