The “Woo Product Carousel Widget” allows you to showcase WooCommerce products in a dynamic sliding carousel for free in WordPress Elementor websites. This widget enhances the shopping experience by displaying products in an interactive and visually appealing format. You can customize the layout, navigation, autoplay settings, and styling to seamlessly match your site’s design.
Let’s explore the features of the “Woo Product Carousel Widget” below.
Elementor Woo Product Carousel Tutorial Video
Add a Free Woo Product Carousel for Elementor
This widget requires Unlimited Elements Free 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
Elementor Woo Product Carousel General Settings
Product Image Size
Select the product image size.
- Medium Large
- Large
- Medium
- Thumbnail
- Full Size
- 1536*1536
- 2048*2048
Layout
Select the layout of carousel.
- Under
- Overlay (Pro)
- Under Overlap (Pro)
- Partial Overlay (Pro)
- Reveal from Bottom (Pro)
- Side by Side (Pro)
Autoplay
Turn on or off the autoplay option.
Autoplay Interval
Set the interval between autoplay transitions.
Autoplay Hover Pause
Autoplay will pause on mouse hover.
Loop
Turn on/off the loop option.
Number of Items
Set the number of items to display in carousel.
Slide to Scroll
Slide the carousel to scroll.
Margin Between Items
Set the margin between carousel items.
Transition Speed
Set the transition speed of carousel.
Stage Padding Type
Set the stage padding type.
- None
- Both
- Left
- Right
Enable Third Party Integration
Enable integrations for third party plugins.
RTL
Turn on the option for right to left website.
Show Empty Message
Shows empty message when no product answers the query.
Empty Message
Type the empty message.
Buttons Settings in Elementor Woo Product Carousel
Product Link Button Text
Type text to display as product link button text.
Product Button Icon
Choose an icon to display as product button.
Add to Cart Button Text
Type text to display as add to cart button text.
Add to Cart Button Icon
Choose an icon for add to cart button.
Select Options Button Text
Type text for select options button.
Show Button on Hover
It will shows button only when you hover over item.
Open Product in New Tab
Product link will open in new tab.
Layout Settings in Elementor Woo Product Carousel
Show Arrows
Show/Hide the navigation arrows.
Show Dots
Show/Hide the navigation dots.
Show Category
Show/Hide the product category.
Show Product Name
Show/Hide the product name.
Show Regular Price
Show/Hide the regular price of product.
Show Sale Price
Show/Hide the sale price of product.
Show Product Button
Show/Hide the product button.
Show Add to Cart Button (Pro)
Show/Hide the add to cart button on carousel.
Show Rating
Show/Hide the ratings of product.
Show Intro (Pro)
Show/Hide the product intro.
Labels Settings in Elementor Woo Product Carousel
Show Labels
Show/Hide the labels.
Sale Label
Show text to display as sale label text.
Show Sale Percentage in Label
Show/Hide the sale percentage in label.
Sale Label Position
Set positioning of labels.
- Before Number
- After Number
Out of Stock Text
Type text to show out of stock message.
Arrows Settings in Elementor Woo Product Carousel
Left Arrow
Choose icon for left arrow.
Right Arrow
Choose icon for right arrow.
Connected Widgets Settings in Elementor Woo Product Carousel
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.
Products Query Settings in Elementor Woo Product Carousel
Products Source
Choose any of the below options for your product source.
- Current Query Product
- Custom Products
- Related Products
- Manual Selection
Include By
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
Include By Terms
Choose specific products that you would like to include from your selection by adding rules.
- Include By Terms Relation
- Include Terms Children
Exclude By
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 in Elementor Woo Product Carousel
Pagination
Display the pagination for your post grid
- None
- Numbers
- Using Pagination Widget
Enable Ajax
When turned on, all the filters, all the filters interaction will be with ajax.
Elementor Woo 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.
Elementor Woo Product Carousel Item Styling
Set the item alignment, text direction, content padding, background color, border, height, and image hover effect.
Elementor Woo Product Carousel Image Styling
Style the image height, image type, and background.
Elementor Woo Product Carousel Category Name Styling
You can set the category color, and typography.
Product Name Styling in Elementor Woo Product Carousel
In this section, set the product name typography, color, and spacing.
Price Styling in Elementor Woo Product Carousel
Set the price typography, color, spacing, and padding.
Regular Price Styling in Elementor Woo Product Carousel
You can set the regular price typography, color, spacing, and padding.
Buttons Styling in Elementor Woo Product Carousel
Here, You can style the button background color, text color, border, spacing, padding, and typography.
Nav Arrows Styling in Elementor Woo Product Carousel
You can set the nav arrow spacing, positioning, background, and icon color.
Nav Dots Styling in Elementor Woo Product Carousel
In this section, you can set the nav dots size, color, spacing, and alignment.
Labels Styling in Elementor Woo Product Carousel
You can style the label typography, color, padding, radius, height and width.
Rating Styling in Elementor Woo Product Carousel
Style the rating color, size, and spacing.
Intro Styling in Elementor Woo Product Carousel
Style the intro color, typography, and spacing.
Empty Message Styling in Elementor Woo Product Carousel
Style the empty message typography, color, background, radius, padding, margin, and border.
Usage Examples of Elementor Woo Product Carousel
Here are some live use cases for the WooCommerce Product Carousel widget.
Free Elementor Product Carousel with Navigation Arrows and Dots.
Free Elementor Product Carousel with an Under Overlap Layout.
Thank you for using the Woo Product Carousel Widget for Elementor! With its smooth slider effects and flexible customization, this is the best Woo Product Carousel Widget for Elementor, perfect for showcasing WooCommerce products in an engaging, interactive carousel. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
