Skip to main content
All CollectionsTroubleshooting and FAQsFrequently Asked QuestionsWooCommerce
How to Customize the Woo Products Module to Include Infinite Scrolling
How to Customize the Woo Products Module to Include Infinite Scrolling

Customize the Woo Products module to include Infinite Loading products by using the Yith Infinite Scrolling Plugin.

Updated over 6 months ago

The Woo Products module doesn't include infinite scrolling functionality out of the box. The following article will use the YITH Infinite Scrolling plugin to enable infinite scrolling on the Woo Products module.

  1. Install and activate the YITH Infinite Scrolling plugin.

  2. Edit the Woo Products module for which you want to enable the Infinite Scrolling

  3. Set the number of products to be displayed in Woo Products → Content Tab → Product Count to 8

    Woo Products - Product Counts

  4. Enable the Show Pagination option in Woo Products → Content Tab → Elements

    Woo Products - Enable Page Navigation

  5. Go to Advanced Tab → CSS ID & Classes → CSS Class, and type in my_infinite_shop

    Woo Products - Custom CSS Class

  6. Save the changes

  7. Go to WordPress Dashboard → YITH → Infinite Scrolling

  8. Set the following CSS selectors:

    1. Navigation Selector: .my_infinite_shop nav.woocommerce-pagination

    2. Next Selector: .my_infinite_shop nav.woocommerce-pagination a.next

    3. Item Selector: ul.products li.product

    4. Content Selector: .my_infinite_shop

The result can be seen in the GIF below

Infinite Scroll for Divi Woo Products module
Did this answer your question?