The Product Review Carousel widget by Atomic Addons shows customer reviews from across your store as cards that slide past, on any page. Each card has the reviewer's avatar and name, the product they reviewed, their rating and the start of their review. You choose the reviews, the cards' content and how the carousel moves: arrows, dots, autoplay, looping and a 3D coverflow effect. This guide covers adding the widget and each of its settings.
Enable the Product Review Carousel Widget
Product Review Carousel 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 Review Carousel. You can also open the WooCommerce category.
- 4
Turn the Product Review Carousel widget on.
- 5
Click Save Settings.
Add the Product Review Carousel Widget
Product Review Carousel works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Product Review Carousel. 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).
The reviews come from all your products, not from the page the widget is on. To show them as a grid instead, use the Product Reviews widget, which has the same review settings.
Layout
(Open the full-size image in a new tab)Open the widget and go to Content → Layout:
- 1
Columns: How many cards are in view at once: 3 by default, 2 on tablets and 1 on phones. Use the device icon to change them per device.
- 2
Item Gap: The space between cards: 30px by default, 20px on tablets and phones.
- 3
Title HTML Tag: The markup of the product name on each card: H1 to H6, div, span or p. H3 by default.
(Open the full-size image in a new tab)A card shows the reviewer's avatar, the name of the product they reviewed (linked to it), a Verified buyer label when WooCommerce knows they bought the product, the reviewer's name, the review's own rating as a star and a number, and the review text. By default the carousel moves on its own every five seconds, and shoppers can use the arrows or swipe.
Query
Content → Query decides which reviews appear:
- 1
Limit: How many reviews to load, 6 by default and up to 20. 0 loads every review.
- 2
Offset: Skips this many reviews from the start of the list. It works only with a Limit above 0.
- 3
Order By: Date (the default), Author, Content or Approved. Random picks and orders the reviews at random each time the page loads.
- 4
Order: Descending, the default, puts the newest first; Ascending the oldest.
- 5
Status: Approve, the default, shows approved reviews. Hold shows reviews waiting for your approval and All shows both.
Reviews waiting for approval show only to users who can moderate comments, such as administrators, each marked “This review is awaiting approval.” Every other visitor sees approved reviews only, whatever the Status.
Additional Options
Content → Additional Options picks what each card shows. Everything is on by default:
- 1
Avatar: The reviewer's profile picture from Gravatar, or WordPress's default avatar. Its size is under Style → Avatar → Size, 80 × 80 by default.
- 2
Title: The name of the reviewed product, linked to its page.
- 3
Author: The reviewer's name, linked to the website they gave with the review, and the Verified buyer label.
- 4
Rating: The review's stars as one star and a number. Reviews without a rating show none.
- 5
Review Text: The review itself.
- 6
Review Text Limit: How many words of the review to show, 15 by default. Longer reviews end in “...”.
Navigation
(Open the full-size image in a new tab)Content → Navigation sets the controls shoppers use:
- 1
Navigation: Arrows (the default), Arrows and Dots, Arrows and Fraction (a “1 / 6” counter between the arrows), Dots, Progress (a bar that fills as the carousel moves on) or None.
- 2
Arrows and Dots Position: Where the controls sit. The setting is named after your Navigation choice, such as Arrows Position or Dots Position. Center, the default for arrows, puts them at the left and right edges; the other positions group them along the top or bottom. Dots sit at Bottom Center by default, and the progress bar at the bottom or top.
- 3
Dynamic Bullets?: For dots: show only a few at a time, the ones nearest the current card larger. Off by default.
- 4
Show Scrollbar?: Adds a scrollbar under the cards that shoppers can drag. It appears while the cards move and fades out afterwards. Off by default.
- 5
Hide Arrows on Mobile: Hides the arrows on screens narrower than 960px, where shoppers swipe. On by default.
With Arrows and Dots or Arrows and Fraction at a bottom position, the controls overlap the bottom of the cards. Move them down with the offsets under Style → Navigation → Offset.
Carousel Settings
(Open the full-size image in a new tab)Content → Carousel Settings sets how the carousel moves:
- 1
Layout: Carousel (the default) slides flat cards. Coverflow turns the cards beside the current one away in 3D, and adds Coverflow Effect settings: Rotate (50 by default), Stretch (0), Modifier (1) and Depth (100).
- 2
Autoplay: Moves the carousel on its own. On by default; Autoplay Speed is the time between moves, 5000 ms.
- 3
Pause on Hover: Stops autoplay while the pointer is over the carousel. Off by default.
- 4
Slides to Scroll: How many cards one move advances, 1 by default. Set it per device.
- 5
Center Slide: Keeps the current card in the middle, with the neighbors on both sides. Off by default.
- 6
Grab Cursor: Shows a hand cursor over the cards, a hint that they can be dragged. Off by default.
- 7
Loop: After the last card the carousel carries on with the first. On by default. When there are no more reviews than cards in view, looping is turned off so no card shows twice.
- 8
Animation Speed (ms): How long each move takes, 500 ms by default.
- 9
Observer: Turn it on when the carousel sits in a tab, an accordion or a popup, so it measures itself again when it becomes visible.
- 10
Match Padding: Space around the cards inside the carousel so their box shadows aren't cut off, 10px by default.
The cards in view always take the height of the tallest one.
(Open the full-size image in a new tab)Coverflow pairs well with Center Slide, as above, so the card facing forward is always in the middle.
Style the Product Review Carousel
Everything below is on the Style tab. A card section is hidden while its part of the card is switched off.
- Item — the card's Background, Border, Border Radius, Padding, Margin and Box Shadow.
- Avatar — Size (25 × 25 to 150 × 150), Image Border, Border Radius, Space Between the avatar and the names, and Box Shadow.
- Title and Text — colors, margins and typography of the product name and the review text, with a Hover Color for the name.
- Author — two tabs: Text styles the Verified buyer label and Name the reviewer's name, with a hover color for names linked to a website.
- Rating — the star's Color and Size, the number's Text Color and typography, and an Offset to move the rating from the top right corner.
- Navigation — tabs for each control: Arrows (color, background, border, radius, padding, size and the space between them, in Normal and Hover states), Dots (color, active color, width, height), Fraction, Progress Bar and Scrollbar colors, and Offset to move the arrows, dots and other controls.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.