The WooCommerce Product Carousel Widget helps you to showcase your WooCommerce products on any Elementor page in an interactive carousel format. This widget lets you easily display your WooCommerce products on your Elementor page with plenty of customization options. You can turn on or off different parts of the carousel to make it suitable exactly for your needs.
Let’s look at each of the options in the “WooCommerce Product Carousel Widget” below.
Install WooCommerce 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 “WooCommerce Product Carousel”
- Hover over the widget in the search results and click install
- Add your “WooCommerce Product Carousel” widget to any Elementor Page
General Settings
Select the product image size.
- Medium Large
- Large
- Medium
- Thumbnail
- Full Size
- 1536*1536
- 2048*2048
Select the layout of carousel.
- Under
- Overlay
- Under Overlap
- Partial Overlay
- Reveal from Bottom
- Side by Side
Turn on or off the autoplay option.
Set the interval between autoplay transitions.
Autoplay will pause on mouse hover.
Turn on/off the loop option.
Set the number of items to display in carousel.
Slide the carousel to scroll.
Set the margin between carousel items.
Set the transition speed of carousel.
Set the stage padding type.
- None
- Both
- Left
- Right
Enable integrations for third party plugins.
Turn on the option for right to left website.
Shows empty message when no product answers the query.
Type the empty message.
Buttons Settings
Type text to display as product link button text.
Choose an icon to display as product button.
Type text to display as add to cart button text.
Choose an icon for add to cart button.
Type text for select options button.
It will shows button only when you hover over item.
Product link will open in new tab.
Layout Settings
Show/Hide the navigation arrows.
Show/Hide the navigation dots.
Show/Hide the product category.
Show/Hide the product name.
Show/Hide the regular price of product.
Show/Hide the sale price of product.
Show/Hide the product button.
Show/Hide the add to cart button on carousel.
Show/Hide the ratings of product.
Show/Hide the product intro.
Labels Setting
Show/Hide the labels.
Show text to display as sale label text.
Show/Hide the sale percentage in label.
Set positioning of labels.
- Before Number
- After Number
Type text to show out of stock message.
Arrows Setting
Choose icon for left arrow.
Choose icon for right arrow.
Connected Widgets Settings
Use remote control widgets to create advanced creative layouts.
This name will be used to connect and controls this widget by other widgets.
You can connect two item-based widgets and sync them.
Choose the same group for two or more item-based widgets so they can sync together.
Products Query Setting
Choose any of the below options for your product source.
- Current Query Product
- Custom Products
- Related Products
- Manual Selection
Include the products from different options given below
- Author
- Date
- Post Meta
- Most Viewed
- ID's from PHP function
- ID's from Post Meta
- ID's from Dynamic Field
- Products on Sale Only
- Up Sells Products
- Out of Stock Products Only
Choose specific products that you would like to include from your selection by adding rules.
- Include By Terms Relation
- Include Terms Children
Choose specific products that you would like to exclude from your selection by adding rules.
- Out of Stock Products
- Products on Sale
- Terms
- Current Products
- Specific Products
- Author
- Product Without Featured Image
- Product with current category
- Product with current tags
- Offset
- Avoid Duplicates
- ID's from Dynamic Field
Post Pagination and Ajax
Display the pagination for your post grid
- None
- Numbers
- Using Pagination Widget
When turned on, all the filters, all the filters interaction will be with ajax.
WooCommerce Product Carousel Widget Styling
A variety of styling options are provided to control every aspect of the widget’s appearance. Modify the colors to match your site’s look and feel. You can customize every single detail to perfectly blend with your website design.
Item Styling
Set the item alignment, text direction, content padding, background color, border, height, and image hover effect.
Image Styling
Style the image height, image type, and background.
Category Name Styling
You can set the category color, and typography.
Product Name Styling
In this section, set the product name typography, color, and spacing.
Price Styling
Set the price typography, color, spacing, and padding.
Regular Price Styling
You can set the regular price typography, color, spacing, and padding.
Buttons Styling
Here, You can style the button background color, text color, border, spacing, padding, and typography.
Nav Arrows Styling
You can set the nav arrow spacing, positioning, background, and icon color.
Nav Dots Styling
In this section, you can set the nav dots size, color, spacing, and alignment.
Labels Styling
You can style the label typography, color, padding, radius, height and width.
Rating Styling
Style the rating color, size, and spacing.
Intro Styling
Style the intro color, typography, and spacing.
Empty Message Styling
Style the empty message typography, color, background, radius, padding, margin, and border.
Usage Examples
Here are some live use cases for the WooCommerce Product Carousel widget.
