The Product Carousel Widget allows you to showcase your products in an interactive carousel layout. The Product Carousel widget is customizable with many options to create amazing Carousels for your products. This widget enables you to quickly and easily create an interactive Carousel with its wide range of customization and styling options. It also supports advanced options such as Remote Connection and syncing with other widgets.
Let’s look at each of the options in the “Product Carousel Widget” below.
Install Product Carousel Widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Product Carousel”
- Hover over the widget in the search results and click install
- Add your “Product Carousel” widget to any Elementor Page
General Settings #
Loop
Turn on or off the loop option.
Number of Products
Set the number of products to show at a time in carousel.
Slide to Scroll
Set the number of item to scroll at once.
Transition Speed
Set the transition speed of carousel.
Margin between slides
Set the margin between carousel items.
Stage Padding Type
Choose from the given options to show offset margin.
- None
- Both
- Left
- Right
Stage Padding
Set the stage padding in pixels.
Autoplay
Turn on or off the autoplay option.
Autoplay Interval
Set the time interval between autoplay.
Autoplay Hover Pause
Autoplay will pause on mouse hover.
Transition Easing
Turn on or off the transition easing option.
Center
It will set the carousel items to center.
Set Active Mode On Mobile
Enable/disable the active mode on mobile device.
Change On Click
It will change the clicked item on item click.
RTL
It will set the carousel direction from right to left.
Random Order
By turning on, random product items will display in the carousel.
Mouse Drag
You can drag the product items with mouse.
Touch Drag
Items can be dragged with touch swipe on touch friendly devices.
Scroll to Head
Scroll to head on item change if carousel not visible.
Layout Settings #
Show or hide elements in Product Carousel.
Show Image
Show/Hide the image.
Show Title
Show/Hide title element.
Title HTML Tag
Select the HTML tag for title from given options.
- div
- h1
- h2
- h3
- h4
- h5
- h6
- span
Show Price
Show/Hide the price element.
Currency
Type the currency sign.
Show Description
Show/Hide the description element on carousel.
Show Rating
Show/Hide rating element on the carousel.
Show Button
Show/Hide the button.
Button Text
Type the text for button.
Show Arrows
Show/Hide arrows on the carousel.
Show Bullets
Show/Hide the bullet icon for navigation.
Rating Icons Settings #
Full
Choose an icon for full ratings.
Half
Choose an icon for half ratings.
Empty
Choose an icon for empty rating.
Arrows Settings #
Set the arrow icons of the arrow navigation when turned on.
Left Arrow
Choose a icon for Left Arrow
Right Arrow
Choose a icon for Right Arrow
Connected Widgets Settings #
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Items Settings #
Manage the slides of the carousel using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set a Title for your carousel item.
Price
Type the price for your product carousel item.
Description
Type the description for your product item.
Image
Choose any custom Image for the carousel.
Link
Paste your URL to link with the button.
Rating
Set the rating for your product.
Product Carousel Widget Styling #
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
General Styling #
Set the alignment, height, and margin.
Slides Styling #
You can style the slide padding, margin, content padding, background color, and border.
Image Styling #
You can set the image height, border radius, and image fit.
Title Styling #
In this section, set the title spacing, typography, color, and color hover.
Price Styling #
You can style the price spacing, typography, color, and color hover.
Description Styling #
This section lets you set the description spacing, typography, color, and color hover.
Rating Styling #
You can customize the rating spacing, gap, size, color, and color hover.
Button Styling #
You can style the button spacing, border radius, width, typography, padding, and color.
Nav Arrows Styling #
You can style the nav arrow spacing, positioning, background, size etc.
Nav Bullets Styling #
You can style the nav dots size, dot color, active color, spacing, and alignment.
Usage Examples #
Here are some live use cases for the Product Carousel widget.
Product Carousel synced with Remote Tabs and Remote Arrows.
