How To Use The Sub Category Carousel Widget By Atomic Addons

The Sub Category Carousel widget by Atomic Addons shows the same cards as the Sub Category widget in a carousel. Each top-level WooCommerce category that has subcategories gets a card with a rotating image, the category name, a link to each subcategory and an “All …” link. This guide covers adding the widget and its settings.

Enable the Sub Category Carousel Widget

Sub Category Carousel is a Pro widget and needs Atomic Addons Pro and WooCommerce. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Sub Category Carousel. You can also open the WooCommerce category.

4. 4

   Turn the Sub Category Carousel widget on.

5. 5

   Click Save Settings.

Add the Sub Category Carousel Widget

Sub Category Carousel works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Sub Category Carousel. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Only top-level categories with subcategories get a card, so the carousel needs a few of them to have something to slide. When all the cards fit on screen at once, they stay put and the arrows hide.

Layout

(Open the full-size image in a new tab)

Open the widget and go to Content → Layout:

1. 1

   Columns: How many cards are visible at once: 3 by default, 2 on tablets and 1 on phones.

2. 2

   Item Gap: The space between cards: 30px by default, 20px on tablets and phones.

3. 3

   Title HTML Tag: The category name's markup: H1 to H6, div, span or p. H3 by default.

4. 4

   Image Resolution: Which image size WordPress serves for the thumbnails, Medium by default.

5. 5

   Direction: The image beside the text (Row - horizontal), above it (Column - vertical), or the same two reversed.

6. 6

   Text Align: Left, center, right or justified text.

Query

Content → Query works as in the Sub Category widget: Include or Exclude top-level Categories, Order By Name, Count or Slug, and Order (Descending by default). Here Hide Empty is off by default, so subcategories without products are listed too.

The widget doesn't follow the category being viewed: in a Products Archive template it shows the same cards on every category page.

Navigation and Carousel Settings

These two sections work as in the Product Category Carousel:

• Navigation — Arrows (the default), Arrows and Dots, Arrows and Fraction, Dots, Progress or None, with a position for each, Show Scrollbar? and Hide Arrows on Mobile (on by default, below 960px).
• Carousel Settings — Layout (Carousel or Coverflow), Autoplay (on, every 5000 ms), Pause on Hover, Slides to Scroll, Center Slide, Grab Cursor, Loop (on), Animation Speed (ms) (500), Observer and Match Padding. The cards always take the height of the tallest one.

Image Settings

(Open the full-size image in a new tab)

Content → Image Settings controls the small image slider inside each card, separately from the carousel itself:

1. 1

   Auto Play: Changes the image on its own. On by default.

2. 2

   Loop: Starts over after the last image. On by default.

3. 3

   Delay: The pause between images, 1500 ms by default.

4. 4

   Speed: How long each change takes, 1500 ms by default.

5. 5

   Effect: Fade (the default), Slide or Creative, with five Creative Effect presets.

The images are the category's thumbnail followed by its subcategories' thumbnails; a card with none shows a placeholder.

Style the Sub Category Carousel

Everything below is on the Style tab.

• Item, Image, Title, Sub Category and Read More — the card, as in the Sub Category widget.
• Navigation — the arrows, dots, fraction, progress bar and scrollbar, with Offset to nudge each from its position.