In this documentation guide, you will learn how to display WooCommerce product categories (e.g. Men’s Apparel, Shoes, Electronics) in a sleek, interactive carousel layout using the Products Categories Carousel. This guide covers query filtering, category image displays, product count badges, and CTA button styling.

Step-by-step setup guide

1. Add the DE Woo Products Categories Carousel module to your layout.
2. Under Content > Category Query, choose whether to display All Categories, or Specific Selected Categories.
3. Enable or disable empty categories, set category display limit, and choose sorting order.
4. Toggle visible card elements (Category Image, Category Name, Product Count Badge).
5. Adjust carousel slides per view and autoplay under Carousel Settings.
6. Customize typography, badge colors, card background, and arrow icons under the Design Tab.
7. Save changes.

A. Content Tab

1. Category Query Settings

• Select Categories Mode:
  • All Categories: Automatically displays all WooCommerce shop categories.
  • Parent Categories Only: Shows top-level main categories, ignoring sub-categories.
  • Manual Category Selection: Pick specific categories from a checklist.
• Hide Empty Categories: Turn ON to hide categories that have 0 products.
• Include / Exclude Categories: Filter specific category IDs to show or omit.
• Order By: Sort categories by Name, Slug, ID, Product Count, or Random.
• Order: Choose Ascending (A-Z) or Descending (Z-A).
• Category Count Limit: Set maximum number of categories to display in the carousel (e.g., 8).

2. Card Content Elements

• Show Category Image: Display official WooCommerce category thumbnail image.
• Show Category Name: Turn category title display On/Off.
• Show Product Count Badge: Display total number of items in category (e.g., “14 Products”).
• Show Shop Now Button: Add direct CTA button linking to category shop page.

3. Carousel Settings

• Slides to Show / Scroll: Define responsive slide count for Desktop, Tablet, and Mobile.
• Autoplay & Speed: Configure auto-sliding speed and hover pause logic.
• Infinite Loop & Transition: Choose transition style (Slide, Fade, Coverflow).
• Navigation Controls: Enable/Disable arrows and pagination dots.

B. Design Tab

• Category Card Layout: Choose layout style (Card Box Below Image, Overlay Text On Image, Floating Minimal Card).
• Category Image Styling: Border radius, aspect ratio (1:1 Square, 4:3 Rectangle), and hover zoom effects.
• Category Name Typography: Adjust font family, font size, weight, text transformation (UPPERCASE), and text color.
• Product Count Badge Styling:
  • Badge Background & Text Color: Customize pill badge background color and font color.
  • Badge Position: Position badge over image corner or next to title.
• Shop Button Styling: Custom button styling (background color, border, padding, hover color).
• Carousel Navigation Styling: Arrow icon styles, arrow background colors, active pagination dot colors.

Was this article helpful?

0 out Of 5 Stars

5 Stars		0%
4 Stars		0%
3 Stars		0%
2 Stars		0%
1 Stars		0%

5 Submit

How can we improve this article?

Please submit the reason for your vote so that we can improve the article.

Name

Email

Submit