In the documentation, we will provide comprehensive guidance on the Element Pack Pro WooCommerce Carousel widget for Elementor. This widget adds a dynamic and visually engaging carousel to your WooCommerce website, allowing you to showcase products in an interactive sliding layout. It is designed to improve product visibility, enhance user experience, and drive sales by presenting products in an attractive, scrollable format. The WooCommerce Carousel widget is highly versatile and suitable for highlighting featured products, new arrivals, bestsellers, or promotional items across your online store

WooCommerce Carousel – Key Features

• Multiple Layout Styles
  Display products in various carousel layouts including horizontal, vertical, and grid sliders.
• Customizable Navigation
  Add arrows, dots, or both for easy navigation and improve user interaction.
• Responsive & Mobile Friendly
  Automatically adjusts to all screen sizes, ensuring smooth performance on desktops, tablets, and mobiles.
• Product Filters & Categories
  Show products by categories, tags, or custom filters to highlight specific collections.
• Autoplay & Loop Options
  Enable autoplay with adjustable speed and looping for continuous product display.
• Customizable Styling
  Control colors, fonts, spacing, borders, and background to match your website design.
• Hover Effects & Animations
  Add interactive hover effects to product images, titles, and buttons to enhance engagement.
• Dynamic Content Support
  Fetch live WooCommerce product data, including price, title, and featured images automatically.
• Call-to-Action Buttons
  Include “Add to Cart,” “View Product,” or custom buttons within each carousel item.
• Highly Versatile
  Ideal for featured products, bestsellers, new arrivals, or promotional campaigns to boost sales and conversions.

Activate the WooCommerce Carousel

To use the Woocommerce Carousel widget from Element Pack Pro, first, you have to enable the Core Widgets. Navigate to the WordPress Dashboard.

1. Go to Element Pack Pro > Core Widgets section.
2. Search by the Widget Name ” Woocommerce Carousel ” and it will appear the.
3. Now Enable the Switcher of the Woocommerce Carousel Widget.
4. Hit the Save Settings button.

How to insert WooCommerce carousel

1. Go to the Elementor Editor page and click the Add Element “+” icon.
2. Search for the WC – Carousel widget by name.
3. The widget will appear — you can check the Element Pack Pro logo on the top-right corner.
4. Select the widget, then drag and drop it onto the editor page.

Customize the layout under the Content tab

For almost all widgets, the Content tab holds all the base settings that will help your shift the content layout of this cost calculator widget. This is where we put all the required adjustments that you need to make variations to the default setup and make unique content out of it.

Let us briefly describe everything inside the content tab.

Layout section

Go to Content > Layout

1. Columns: Choose the columns layout for the carousel.
2. Item Gap: Set the gap between the columns.
3. Tex Align: Set the position for the text, Left, Center, Right, and Justified.
4. Image Resolution: Choose the resolution for the Images. Set the full image for the images.

5. Show Badge: Enable the switcher to show the badge of this products.
6. Title: Enable the switcher to show the Title of the product.
7. Title HTML Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
8. Rating: Enable the switcher to show the rating of the product.
   

9. Price: Enable the switcher to show the Price for the Title.
10. Add to Cart: Enable the switcher to show the Cart.
11. Show Cart Always: Enable the switcher to show the show the cart.

12. Quick View: Enable the switcher to show the quick view button. It will appear while hover over the item.
13. Item Match Height: Enable the switcher to match all the height of the content.

Query section

Go to Content > Query

1. Source: Choose the source for the query.
2. Limit: Set the limitation for the source.
3. Include: Choose the included for different type of this content.

Navigation section

Go to Content > Navigation

1. Navigation: Choose the navigation for the carousel. Select the Arrows as icon.
2. Show Scrollbar?: To demonstrate the scrollbar enable the switcher.
3. Arrows Position: Set the position for the arrows.
4. Arrows Icon: Select the icon for the arrows. Different type of icon available now.
5. Hide Arrow on Mobile: Enable the switcher to hide the arrow on Mobile.

Carousel Settings section

Go to Content > Carousel Settings

1. Layout: Select the layout for the carousel.
2. Autoplay: Enable the switcher to make it autoplay.
3. Autoplay Speed: Now set the speed for the autoplay of this carousel.
4. Pause on Hover: Enable the switcher to pause the carousel on hover over the carousel.

5. Slides to Scroll: Choose how many slide will scroll at a time. Select the position for this.
6. Center Slide: Enable the slider for the centre slide.
7. Grab Cursor: Enable slider to grab the slider using the cursor.
8. Drag Free Mode: It drag the carousel easily.

10. Loop: Enable the switcher to loop the carousel item.
11. Animation ( Speed ms ): Choose the speed in ms. It will demonstrate the speed of this.
12. Observer: Choose the observer Auto refresh when layout changes. Enable this to demonstrate the beautiful design.

13. Show Hidden Item: Enable the switcher to demonstrate the hidden items of the carousel. It will appear the hidden item excluding the selected grid columns item.
14. Hidden Item Opacity: Set the opacity of the hidden items. The Opacity range is 0 – 1 and step is .1

Style tab customizations

Item section

Go to Style > Item

Normal Tab

1. Background Color: Choose the color for the Item background. It demonstrate the beautiful visibility for the Items.
2. Border Type: Choose the type of the border. Border Types are Solid, Dashed, Dotted etc.
3. Border Width: Set the thickness of the border.
4. Border Color: Choose the color for the border. It displays beautiful design for the border.

5. Border Radius: Choose the border corner edges rounded by selecting the radius.
6. Box Shadow: Set a shadow for the box.
7. Item Padding: Choose the padding for the Item. It demonstrate the inner space of the Items.
8. Description Padding: Set the description padding for content item inner spaces.

Hover

1. Background Color: Set the background for the Items. It will demonstrate on hover over the Item.
2. Border Color: Choose the border color of the items.
3. Box Shadow: Set the shadow of the Box.
4. Match Padding: Select the padding for the match items.

Title section

Go to Style > Title

1. Color: Choose the color for the Title of Item.
2. Hover Color: Select the hover color of this. It will demonstrate after hover over it.
3. Margin: Set the margin for the Title.
4. Padding: Choose the padding for the Title. It refer the inner space of the Title.
5. Typography: Set the typography for the Title. It will appear all the items for the Title.

Price section

Go to Style > Price

Old Price

1. Color: Select the color for the old price. Highlighting it can compare easily.
2. Margin: Set the outer space for the margin.
3. Typography: Choose the typography for the Price section.

Sale Price

1. Color: Select the color for the Sale price. It refer the current price of this product.
2. Margin: Set the outer space for the margin.
3. Typography: Choose the typography for the Sale Price section.

Add to Cart Button section

Go to Style > Add to Cart Button

Normal Tab

1. Color: Choose the color for the Button text.
2. Background Color: Select the background color for the button. It represent the beauty of this button.
3. Box Shadow: Set a shadow for the button.

4. Border Type: Select the type for the border. Different types are available for the button.
5. Border Width: Set the thickness for the border.
6. Border Color: Select the color for the Border.

7. Border Radius: Make the border corner edges rounded by selecting the border.
8. Padding: Choose the padding for the button. It works as inner space.
9. Typography: Select the typography for the button.

Hover Tab

1. Color: Choose the color for the text.
2. Background Color: Set the background color for the button.
3. Border Color: Choose the color for the border.

Navigation section

Go to Style > Navigation

Normal Tab

1. Color: Choose the color for the arrows.
2. Background: Set the background color for the arrows area.
3. Border Type: Choose the border type from Dashed, dotted, double etc.
4. Border Width: Set the thickness for the border.

5. Border Radius: Set the radius for the border. It will rounded the corner edges.
6. Padding: Set the padding for the border.
7. Size: Choose the size for arrows.

8. Space Between Arrows: Select the space between the arrows. It represent the gap between them.
9. Box Shadow: Make a shadow for the edges for the background.

Hover Tab

1. Color: Choose the color for the arrows. The color will appear on hover over it.
2. Background: Select the background color.
3. Border Color: Choose the border color for the hover tab.
4. Box Shadow: Make a shadow for the box.

OFFSET

1. Arrows Horizontal Offset: Set the offset between the arrows in horizontal line.

Video Assist

Watch this video to learn more about the WooCommerce Carousel widget. Please visit the demo page for examples.

Thanks for being with us.