Search Divi Plus Documentation

Search for answers or browse our knowledge base.
Explore Divi Plus's Live Demo

All Topics
Print

WooCommerce Product Categories Carousel

The DP WooCommerce Product Categories Carousel module allows you to showcase your WooCommerce product categories in a dynamic, interactive carousel layout. This widget enhances product exploration by offering customizable layouts, category selection filters, ordering options, thumbnails, product counts, and advanced slider controls.

How to add module on page

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

  1. Create/Edit a Page/Post that uses Divi builder.
  2. Create/Edit a row.
  3. Click on Add New Module option; choose the DP WooCommerce Product Categories Carousel module.

Content Settings

  • Number of Categories: Set how many product categories you want to display in the carousel.
  • Include Categories: Choose the specific WooCommerce categories you want to show. This allows you to highlight selected categories based on your store needs.
  • Order By: Sort the listed categories using the following criteria:
    • Name
    • Slug
    • Term ID
    • Product Count
    • Menu Order
  • Order: Set the order direction:
    • ASC (Ascending)
    • DESC (Descending)
  • Hide Empty: Toggle to Yes/No to decide whether to display categories with no products.
  • No Result Text: Displays a custom message when no categories match the filtering selection.

Display Settings

  • Layout: Choose between: Layout 1 and Layout 2
  • Show Thumbnail: Toggle to display category thumbnails.
  • Thumbnail Size: Select whether to show default thumbnails or full-size images.
  • Show Product Count: Enable this option to display the number of products within each category.

Slider Settings

  • Number of Categories Per View: Set how many categories appear in each visible slide frame.
  • Number of Sliders Per Group: Choose how many slides move together when navigating.
  • Space Between Sliders: Set spacing between each slide.
  • Equalize Slides Height: Toggle to make all slide heights equal, ensuring uniform design.
  • Enable Loop: Enable to allow slides to loop infinitely.
  • Autoplay: Turn on autoplay to automatically cycle through slides.
  • Enable Linear Transition: Enable a smooth, linear transition effect between slides.
  • Autoplay Delay: Set the autoplay delay in milliseconds.
  • Pause on Hover: Pause the autoplay when the user hovers over the carousel.
  • Transition Duration: Set how long the slide transition takes.

Navigation & Pagination Settings

  • Enable Dynamic Dots: Toggle to enable dynamic (moving) pagination dots.
  • Show Arrow: Enable or disable navigation arrows for slide control.
  • Previous Arrow Icon: Select an icon for navigating to the previous slide.
  • Next Arrow Icon: Select an icon for navigating to the next slide.
  • Show Arrow on Hover: Show navigation arrows only when the user hovers over the carousel.
  • Show Dots Pagination: Toggle to show or hide pagination dots under the carousel.
  • Dots Pagination Style: If dots are enabled, choose from multiple available dot styles.
Table of Contents