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

The Sky Addons WC Category Carousel widget turns your WooCommerce product categories into a Swiper-powered sliding carousel. It shares the same four layout styles and query builder as the grid version, and adds carousel-specific controls for slides per view, spacing, loop, autoplay, navigation arrows, and pagination dots. This documentation will guide you through the process of using the WC Category Carousel Widget to create a compact, interactive category showcase that fits any width on your store.

Features:

1. Four Layout Styles: Choose Style 1–4 to change how image, title, and content sit within each carousel card.
2. Responsive Slides Per View: Control how many category cards are visible at once for desktop, tablet, and mobile — all from a single column selector.
3. Swiper Carousel Engine: Full Swiper.js controls including loop, autoplay, speed, space between slides, and transition effects.
4. Navigation Arrows: Previous/next arrows with full style control — color, background, size, border, and hover states.
5. Pagination Dots: Bullets, fraction, or progressbar pagination with color and size controls.
6. Item Normal / Hover / Active States: Independently style each carousel item for its default, hover, and active (current visible) states.
7. Match Spacing: A single slider adds matching padding and negative margin to the carousel container so overflowing slides peek in from the edges correctly.

Insert WC Category Carousel Widget

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

Configure Layout

The Layout section in the Content tab controls the card arrangement and responsive columns.

1. Layout: Choose Style 1, 2, 3, or 4.
2. Columns: Set how many category cards are visible at once per breakpoint (1–6). This maps to Swiper’s slidesPerView.
3. Image Size: Select any registered WordPress image size for the category thumbnails.

Configure Query

The Query section uses the global terms query builder — identical to the WC Category grid widget.

1. Filter by parent category, include or exclude specific terms by name, and set an Item Limit.
2. Choose an Order By field (name, count, slug, term ID) and direction (ASC / DESC).

Configure Additional Options

The Additional section controls which elements appear inside each card — identical to the WC Category widget.

1. Show Title / Title HTML Tag: Toggle and choose the heading tag.
2. Show Image: Toggle the category thumbnail.
3. Show Text: Toggle the category description.
4. Show Count: Toggle the product count in parentheses next to the title.

Configure Carousel Settings

The Carousel Settings section exposes the Swiper configuration options.

1. Height: Optionally fix the carousel and image wrapper height in px or em.
2. The global carousel settings controls include: Loop, Autoplay (with delay and pause-on-hover), Slide Speed, Space Between slides, Centered Slides, and Effect (slide, fade, coverflow).

Configure Navigation and Pagination

1. Navigation: Enable previous/next arrow buttons and set their icon, position, and visibility (always visible or on-hover).
2. Pagination: Enable pagination indicators and choose the type (bullets, fraction, or progressbar). Set position and color.

Style Your WC Category Carousel

Use the Style tab to customize every visual element.

1. Carousel Item:
   Alignment, Match Spacing (overflow peek), padding, border, border radius. Normal/Hover/Active tabs for background, box shadow, and opacity.
2. Image:
   Padding, margin, border, border radius, box shadow, and CSS filters.
3. Content:
   Background, padding, margin, border, border radius, and box shadow for the content area below or over the image.
4. Title:
   Spacing and global title style controls (typography, normal color, hover color).
5. Text:
   Typography and color for the category description.
6. Navigation:
   Arrow size, color, background — Normal and Hover states.
7. Pagination:
   Bullet/bar color and size — Normal and Active states.

Save and Preview

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

Best Practices

1. Use Match Spacing to let the adjacent slide “peek” from the edge — it signals to users that the widget is swipeable, increasing engagement.
2. Set autoplay delay to at least 4000 ms (4 seconds) so users have time to read the category name before the slide advances automatically.
3. On homepage carousels, show 3–4 columns on desktop and 1–2 on mobile so each card is large enough to be visually inviting.
4. Ensure all category thumbnails are the same aspect ratio before uploading — mixed portrait and landscape images cause uneven card heights that break the carousel layout.

Troubleshooting

1. Carousel is not sliding on click/touch. Make sure no JavaScript conflict is suppressing Swiper initialization. Check the browser console for errors and confirm Sky Addons Pro scripts are loading.
2. Navigation arrows are missing. Open the Navigation section in the Content tab and confirm the arrows are enabled and their visibility is not set to hidden.
3. The “peek” effect is cut off by the section container. Set the Elementor section’s overflow to “visible” so peeking adjacent slides are not clipped by the section boundary.

Frequently Asked Questions

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

WC Category displays categories in a static CSS grid. WC Category Carousel uses Swiper.js to show the same data in an animated sliding carousel with autoplay, navigation, and pagination options.

Can I use both the grid and carousel on the same page?

Yes. They are independent widgets and can coexist on the same page or even in the same section.

How do I make the carousel show partial slides for a peek effect?

Use the Match Spacing slider in the Carousel Item style section. It adds padding inside the swiper container and a matching negative margin, which makes adjacent (partially visible) slides peek in from the sides.

Can I disable autoplay?

Yes. In the Carousel Settings section, toggle Autoplay off. The carousel will then only advance when users click the navigation arrows or swipe.

Does the widget work without WooCommerce active?

No. The widget queries the product_cat taxonomy which is registered by WooCommerce. If WooCommerce is deactivated the widget will output nothing.

Related Documentation

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

• WC Category: Show the same categories in a static responsive grid.
• WC Products Carousel: Pair a category carousel at the top with a product carousel below for a compact, complete shop section.

Conclusion

The WC Category Carousel widget brings your WooCommerce product categories to life in a smooth, swipeable carousel — with full control over layout, query, navigation, pagination, and styling for every state. If you have any questions or need help, visit the Sky Addons support center.