WooCommerce Category Carousel

The Owl Carousel Pro plugin includes two types of modules – one that displays posts and custom post types (DP Owl Carousel) and one that displays manually added images and content (DP Owl Image Carousel). In this tutorial, we’ll show you how to display WooCommerce product categories in a carousel using the DP Owl Image Carousel module and a corresponding filter.

The filter we’ll be using is the Custom Items filter. You can find more information and a basic example for this filter on the Custom Items documentation page. Again, this will only apply to the DP Owl Image Carousel module (NOT the DP Owl Carousel module).

Add the following code to your child theme’s functions.php file:

In the dp_ocp_items_carousel_content() function in the code above, we are checking if the module has one of two module IDs:

• ocp-parent-wc-categories (add this to the module you want to display WooCommerce parent categories)
• ocp-child-wc-categories (add this to the module you want to display WooCommerce child categories)

You can add the IDs above to your module by going to the module’s Advanced tab -> CSS ID & Classes -> CSS ID input. Once added, the code above will display either WooCommerce parent or child categories in a carousel based on the module ID. Please note we are also adding a is_archive() check on the child category module since this module will likely be placed on the Divi -> Theme Builder -> All Product Category Pages template. If you are not using this method, you may need to remove the is_archive() check and manually set the $current_term_id variable.

Once we know which module we are working with (parent or child categories), we then get an array of term IDs for the parent categories or the child categories of the current category. We then send that array of terms to the second function which creates the content.

In the dp_ocp_item_output_wc_categories() function, we are getting the data from each WooCommerce category (term name, thumbnail, URL) and outputting it in a format compatible with the carousel.

One thing to note is that the number of items (categories) displayed in the carousel at one time will default to the module’s default values: 5 for desktop, 3 for tablet, and 1 for mobile. There may be scenarios when there are less WooCommerce categories than the default values. For example, if a parent category only has three child categories, the carousel will still display five items in the carousel on desktop – cloning carousel items until it has enough to fill the carousel.

We can add another bit of code to our functions.php file to solve this:

In the code above we are repeating a small portion of the code so we can count the number of categories found for the WooCommerce parent and child categories. We can then use the Owl Carousel Pro API Options filter to modify the number of items displayed in the carousel for each device size. Using the min() PHP function and the default value, we can ensure that the number of items displayed at once will never exceed the total number of categories found. This will prevent categories from being displayed in the carousel more than once.

Since we are duplicating a portion of the code and querying the terms multiple times for different filters, it would be a good idea to install a caching plugin to cache the resulting HTML of these pages.