Create a WooCommerce Product Category Carousel with Custom Shortcode

If you’re looking for an easy way to display WooCommerce product categories in a stunning carousel format, the WooCommerce product category carousel is the perfect solution. Using the power of Owl Carousel, this plugin lets you dynamically showcase categories with advanced customization options.

With user-friendly shortcode attributes, you can control how the carousel looks and behaves—from including/excluding specific categories to enabling autoplay and responsive layouts.

Key Features of the WooCommerce Category Carousel Plugin

  1. Dynamic WooCommerce Category Display: Easily include or exclude categories.
  2. Owl Carousel Integration: Smooth and responsive slider functionality.
  3. Customizable Navigation: Enable autoplay, navigation dots, and arrows.
  4. Responsive Design: Set the number of slides for desktop, tablet, and mobile.
  5. Advanced Options: Show product counts, add “View” buttons, and filter empty categories.

How to Install the WooCommerce Category Carousel Plugin

  1. Copy the plugin code into your theme’s functions.php file or create a custom plugin.
  2. Ensure WooCommerce is installed and active on your site.
  3. Include jQuery if your theme doesn’t already load it.

Shortcode Usage and Attributes

To display the WooCommerce category carousel, use the following shortcode:

[category_carousel autoplay="true" dots="true" loop="true" arrow="false"]

Shortcode Attributes for Customization

This shortcode comes with various attributes to tailor the carousel to your needs:

AttributeDefaultDescription
autoplaytrueEnable autoplay (true or false).
dotstrueShow navigation dots (true or false).
looptrueEnable infinite looping (true or false).
arrowfalseShow navigation arrows (true or false).
slides_desktop4Number of slides on desktop devices.
slides_tablet3Number of slides on tablets.
slides_phone2Number of slides on mobile devices.
include_categories”Include specific category IDs (comma-separated).
exclude_categories”Exclude specific category IDs.
show_view_buttonnoAdd a “View” button below each category (yes or no).
show_countnoDisplay product counts (yes or no).
hide_emptynoHide empty categories (yes or no).

Example Shortcode for WooCommerce Category Carousel

Here’s an advanced example:

[category_carousel
    autoplay="true"
    dots="true"
    loop="true"
    arrow="true"
    slides_desktop="5"
    slides_tablet="3"
    slides_phone="2"
    show_view_button="yes"
    show_count="yes"
    hide_empty="yes"
    parent_only="yes"
]

This shortcode will:

  • Show 5 slides on desktop, 3 on tablets, and 2 on mobile.
  • Enable autoplay, navigation dots, and arrows.
  • Display parent categories only and hide empty ones.
  • Add product counts and a “View” button.

Custom CSS Styling for the Carousel

Want to match the carousel to your site’s branding? You can easily customize it using CSS:

.product-category-item {
    text-align: center;
    border: 1px solid lightgrey;
    border-radius: 5px;
    background-color: #f5f7fd;
}
.product-category-item img {
    border-radius: 5px;
    object-fit: cover;
}

Owl Carousel Library Assets

The plugin utilizes the Owl Carousel library, loaded via CDN for smooth performance:

Ensure these are properly loaded to avoid conflicts.

Benefits of Using a WooCommerce Category Carousel

  1. Improved Navigation: Let users browse product categories quickly.
  2. Enhanced Design: Create a visually appealing layout.
  3. Mobile Responsiveness: Customize the number of slides for various devices.
  4. Increased User Engagement: Highlight popular or important categories dynamically.

Final Thoughts

The WooCommerce Category Carousel plugin provides an elegant and flexible way to display product categories on your WooCommerce store. With powerful shortcode attributes and Owl Carousel integration, you can enhance user experience and improve navigation effortlessly.

Get started today and elevate your WooCommerce store’s design with this customizable category carousel!

Tags:

Leave a Reply