View Product Page

General Settings

With YITH Infinite Scrolling, you can show the content of multiple pages on a single page, the pagination will be disabled, and the content will load on the same page with an infinite scrolling effect, so your users will not see that they are loading a new page, but will always stay on the same page.
The items are loaded in Ajax and you can enable the scrolling effect on the blog and the shop pages.

The Premium Version allows you to enable Infinite Scrolling on as many sections as you want.

In the Plugin options section from the General Settings tab, you can enable and set the sections accordingly.

General settings

Within the same section, you will find the following options:

Enable Infinite Scrolling on mobile devices: Enabling this option will allow your customers to benefit from infinite scrolling on your e-commerce shop through their mobile devices.

Change the URL of the page whenever new items are loaded: By enabling the following option, you can implement a dynamic URL change based on the loaded page. This feature allows users to resume their browsing session from the point at which they left off, even if they navigate back to the main page with infinite scrolling. This is due to the fact that the position is registered when the back button is pressed.

Custom JavaScript: As you can see in the image above, 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, while yith_infs_added_elem is triggered after the AJAX call ends.

Sections

The premium version of the YITH Infinite Scrolling allows you to have a scroll effect on different pages of your site (e.g. the blog or the product loop), with the ability to customize these settings separately.

In the Sections tab you can create and name each section in which you want to apply the Infinite Scrolling effect. In this example, we will create a section and name it “Shop“.

Sections

For each section you can customize the following options, included the CSS selectors needed for the plugin to work. You have to configure the selectors in the plugin settings, as these change based on the theme you’re using and the section you want to enable the scrolling effect on (e.g. blog or product loop).

Shop section

Navigation Selector: The selector that contains the navigation of this section.

Navigation Selector

Next Selector: The selector of the link that redirects to the next page of this section.

Next page selector

Item Selector: The selector of the single item in the page.

Item selector

Content Selector: The selector that contains your section content.

Content selector

Event Type

Next, you can define an Event Type. This is the type of pagination for the content of the specified selection. You can choose between Infinite Scrolling, “Load more” Button and Ajax Pagination.

Event type

Infinite Scrolling

If you choose Infinite Scrolling, the contents of the next page are loaded scrolling the current page. Furthermore, you can decide if you want to use a default or custom loader in the Loader to use option.

When you select the Default loader, you will find four types of loaders to choose from. This will be the loader you want to show to your customers while they are scrolling and waiting for your products to load.

Default loader

In this case, we have selected Loader 2. It will look like this in the frontend:

Loader 2 on frontend

On the other hand, if you select Custom loader, it will override the previous one and you will be able to upload a custom loading image or enter a URL to it.

Custom loader

Load More Button

Another option available is the “Load more” Button, which allows you to load the content of the next page in Ajax by clicking on the Load more button. Here, you will find two more options to customize:

  • Button Label: It allows you to set the button label.
  • Extra Class of the Button: You can add a custom class to customize the button style.
Load more

This is what it will look like in the frontend, in this case we kept the Load More label:

Ajax Pagination

The third Event Type is Ajax Pagination which is added to the bottom of the current page. It will look this way:

Ajax Pagination in frontend

Load Effect

The last option of the Sections tab is the Load Effect. Here you can select the type of animation to be used when loading new content:

Load effect

YITH Ajax Product Filter

YITH WooCommerce Ajax Product Filter allows filtering the product list basing on their attributes or price. The filter is applied by Ajax, therefore without the need to refresh the page to show the search result.

Thanks to this integration, you can replace the pagination of your site content with infinite scrolling on the pages you prefer (posts, shop page, etc.), including the ones with products filtered by AJAX Product Filter.

Integration with YITH Ajax Product Filter

For further details about YITH Ajax Product Filter settings, please refer to the official documentation.