How to use WC Products Carousel Widget of Sky Addons for Elementor

The Sky Addons WC Products Carousel widget displays WooCommerce products in a Swiper-powered sliding carousel with three layout styles. It shares the same query builder, Add to Cart button, Quick View modal, sale badge, and category display as the WC Products grid widget, and adds carousel-specific controls for slides per view, autoplay, loop, navigation arrows, pagination, and item Normal/Hover/Active state styling. This documentation will guide you through the process of using the WC Products Carousel Widget to create an engaging, scrollable product showcase on your store.

Features:

1. Three Layout Styles: Style 1 (buttons below content) and Styles 2/3 (icon-overlay buttons on the image) — the same styles as the WC Products grid widget.
2. Swiper Carousel Engine: Loop, autoplay with pause-on-hover, slide speed, space between slides, and centered-slides mode.
3. Navigation Arrows and Pagination: Previous/next arrows and bullet/fraction/progressbar pagination — each with full Normal/Hover style controls.
4. Add to Cart and Quick View: Same customizable buttons and modal settings as the WC Products grid widget.
5. Sale Badge: Automatic WooCommerce sale flash badge with independent style control.
6. Normal / Hover / Active Item States: Style carousel items differently for their default, hovered, and currently active (centered/visible) slide state.
7. Match Spacing (Peek Effect): A single slider makes adjacent slides partially visible on the edges for a clear “there’s more” visual cue.

Insert WC Products Carousel Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for WC Products Carousel in the widget panel and drag it onto the canvas.

Configure Layout

The Layout section controls the carousel structure and image size.

1. Layout: Choose Style 1, 2, or 3.
2. Columns: Set how many product cards are visible per breakpoint (1–6) — maps to Swiper’s slidesPerView.
3. Image Size: Select a registered image size for product thumbnails.

Configure Query

The Query section is identical to the WC Products grid widget.

1. Source: Product (all), Manual Selection, Current Query, or Related.
2. Filter by category, tag, and author. Set Posts Per Page (default 8) and choose the order.

Configure Additional Options

The Additional section toggles which product elements are displayed — identical to the WC Products grid widget.

1. Toggle Show Title, Show Price, Show Image, Show Category, Show Text (with Text Limit and Strip ShortCode), Show Add to Cart, and Show Quick View.

Configure Add to Cart and Quick View Buttons

Button configuration is identical to the WC Products grid widget. See that section for full details.

1. Add To Cart Button: Set button text, view-cart text, icon, icon position, and icon spacing.
2. Quick View Button: Set quick view label, icon, and icon position.
3. Modal Settings: Set popup animation, position, width, and height.

Configure Carousel Settings

The Carousel Settings section exposes all Swiper configuration options.

1. Global carousel controls: Loop, Autoplay (with delay and pause-on-hover), Slide Speed, Space Between, Centered Slides, and Effect.

Configure Navigation and Pagination

1. Navigation: Enable previous/next arrows and configure their icon, position, and visibility mode.
2. Pagination: Enable indicators and choose bullets, fraction, or progressbar type. Set position and colors.

Style Your WC Products Carousel

Use the Style tab to customize every visual element.

1. Carousel Item:
   Alignment, Match Spacing (peek effect), padding, border, border radius. Normal/Hover/Active tabs for background, box shadow, and opacity.
2. Image:
   Height, padding, margin, border, border radius, box shadow, and CSS filters.
3. Badge:
   Color, typography, and spacing for the sale badge.
4. Title:
   Spacing and global title style controls (typography, normal and hover color).
5. Price:
   Regular price color, sale price color, and typography.
6. Text:
   Typography and color for product excerpt text.
7. Category:
   Spacing, space between category labels, typography, and Normal/Hover colors.
8. Pagination:
   Global pagination style controls.
9. Add to Cart Button:
   Full button style controls.
10. Quick View Button:
    Full button style controls.
11. Modal:
    Modal backdrop and container style controls.
12. Navigation:
    Arrow size, color, and background — Normal/Hover states.
13. Pagination:
    Bullet/bar color and size — Normal/Active states.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your WC Products Carousel widget in action.

Best Practices

1. Use this widget for “Featured Products” or “New Arrivals” sections on a homepage — carousels work best when showing a curated, limited selection rather than a full catalog.
2. Enable the Match Spacing (peek) effect so visitors immediately understand the widget is swipeable — this increases interaction rates.
3. Pause autoplay on hover (available in Carousel Settings) so users who pause to read a product card are not interrupted mid-inspection.
4. Keep product image heights consistent across your catalog — use the Image Height slider in the Style tab to enforce a fixed height when source images vary.

Troubleshooting

1. Carousel does not slide. Verify Swiper JS is loading on the page. Check the browser console for errors and make sure no other Swiper plugin is conflicting.
2. Quick View modal opens behind the navigation arrows. Increase the modal’s z-index via custom CSS, or reduce the z-index of the navigation arrows from the Style tab.
3. Product cards have uneven heights. Use the Image Height slider to set a fixed image height, or ensure all product featured images share the same crop ratio in WooCommerce’s media settings.

Frequently Asked Questions

What is the difference between WC Products and WC Products Carousel?

WC Products uses a static CSS grid. WC Products Carousel presents the same product data in a Swiper animated carousel with autoplay, navigation, and pagination — better suited for featured sections where you want engagement and motion.

Can I show the carousel on a WooCommerce category archive page?

Yes. Set the Source to “Current Query” in a category archive Elementor template and the carousel will display products matching the current archive filter.

Does the carousel support touch/swipe on mobile?

Yes. Swiper.js has built-in touch and pointer event support, so the carousel is fully swipeable on smartphones and tablets without any extra configuration.

Can I use the carousel in a full-width section?

Yes. The widget adapts to whatever column width it is placed in. In a full-width section you can use Match Spacing to let adjacent slides peek from the screen edges for a cinematic look.

Does the Add to Cart button update the cart count in my header?

Yes, if your theme’s cart widget or custom cart icon uses WooCommerce’s standard AJAX cart fragments. WooCommerce triggers cart fragment refresh events after a successful AJAX add-to-cart action.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the WC Products Carousel widget:

• WC Products: Display the same products in a static, paginated grid.
• WC Category Carousel: Combine a category carousel above a product carousel for a complete browsable shop section.
• Social Share: Add share buttons below a featured products carousel to encourage visitors to spread product links.

Conclusion

The WC Products Carousel widget combines the full power of the WC Products grid — query builder, Add to Cart, Quick View, sale badges, and deep styling — with a smooth Swiper carousel, making it the go-to widget for featured product sections, “New Arrivals”, and “Best Sellers” carousels on any Elementor-built WooCommerce page. If you have any questions or need help, visit the Sky Addons support center.