View Product Page

Enable Infinite Scrolling

YITH Infinite Scrolling lets you show the content of different pages in one single page: with the related settings, the paging will be cancelled and contents will load on the same page with an infinite scrolling effect.
Products load in Ajax and the plugin works on blog and shop pages.

The Premium Version allows you to enable Infinite Scrolling on as many sections as you want!
You can enable the plugin from YITH -> Infinite Scrolling -> Settings.

Enable infinite scrolling

Change URL

By enabling the following option, you can dynamically change the page URL based on the page that is loaded.

Change URL on items loading

The result is that if your users open a post or a product and then go back to the main page with infinite scrolling, they will be able to resume from where they have left rather than having to scroll down everything again. This happens because it registers the position when you hit the back button.

Add section and set options

The premium version of the YITH Infinite Scrolling lets you have a scroll effect on different pages of your site, allowing you to customize these settings separately.
The first step is to create and name a section in which you want to have the  Infinite Scrolling effect. In this example, we will call it “shop”.

Add sections and set options

Now you will have the following options available to customize the created section. These options are Navigation Selector, Next Selector, Item Selector, Content Selector, Event Type, Button Label, Extra Class of the Button, Choose a Loader, Custom Loader, and Load Effect.Section options

  • Navigation selector: The selector that contains the product navigation

Navigation selector

  • Next selector: The selector of the link that redirects to the next page

Next page selector

  • Item selector: The selector of the single product on the shop page

Item selector

  • Content selector: The selector of the general box in the product list of the shop

Content selector

Afterward, you can choose an event type. This is the type of pagination for the content of the indicated selection. You can choose from:

  • Infinite scrolling: the contents of the next page are loaded scrolling the current page;
  • Load more button: the contents of the next page are loaded in Ajax by clicking on the Load more button;
  • Ajax pagination: Ajax pagination is added to the lower part of the current page;

Event type

  • Button label: here, you can enter the text that will define the Load more button;

Button label

  • Extra Class of the Button: here, you can add one or more custom classes to customize the button style;

Extra class for Load more button

If you chose “Infinite Scrolling” as “Event Type”, you will be able to choose from four types of available loaders. This option allows you to choose the loader you want to show to your customers while they are scrolling and waiting for your products to load. Or if you prefer, choose a custom loader that will override the previous one.

Choose loader

The last option is to set the loading effect. You can choose the type of animation for the loading of new content from the following options.

Load effect

Add Custom JavaScript

You can add your custom JavaScript code to the bottom of the General Settings page. You can use two plugin triggers: yith_infs_adding_elem is triggered before the new elements are appended to the current content, and yith_infs_added_elem is triggered after the AJAX call ends.

Custom Java script