Get a fast, conversion-focused WooCommerce theme in 2021. Switch to Shoptimizer.

Home Documentation Shoptimizer Shop and Categories Adding Infinite Scroll to the Shop

Adding Infinite Scroll to the Shop

You can add an infinite scroll feature to the Shop page on Shoptimizer, which will load in the next page of products on the same page. This means you don’t need to click on the numbered pagination and aids discovery on stores which have a lot of products.

1. Include some custom code

This is necessary otherwise the infinite scroll loop gets confused and duplicates other products, such as from the mega menu into the loop.

So either within a child theme’s functions.php file or by using the Code Snippets plugin, add the following.

2. Install the YITH Infinite Scrolling plugin

YITH Infinite Scrolling

Install and activate the YITH Infinite Scrolling plugin. You can search for it within the Plugins section of WordPress.

3. Change the Settings

Go to YITH > Infinite Scrolling and change the settings to the following.

YITH Infinite Scroll Settings

Navigation Selector:
.sorting-end

Next Selector:
.woocommerce-pagination a.next

Item Selector:
.mainproduct

Content Selector:
.content-area

4. Hide the pagination

Finally, if you want to hide the pagination from displaying on the Shop or category pages, add the following CSS snippet to:

Appearance > Customize > Additional CSS

$50
Off

Do you want a whopping $50 off Shoptimizer for WooCommerce?

Click the button below to get Shoptimizer for only $49. (Regular price: $99).
This is a special launch offer for today only.
Get it before it is gone!
{"cart_token":"","hash":"","cart_data":""}