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:
- 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:
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.