YITH Infinite Scrolling - WordPress Plugin

How to Configure YITH Infinite Scrolling for Catalogs, Blogs, and WooCommerce

YITH Infinite Scrolling is not just meant to hide standard page numbers. Its real job is to replace traditional pagination with AJAX loading for additional products, posts, or other items while keeping the list manageable, the theme working properly, and the results easy to verify.

In this guide, we will look at how to prepare your site, where to find the settings, why CSS selectors matter more than a fancy loader, how automatic scrolling differs from a Load More button and AJAX pagination, how to test it on a shop page, and what to do about filters, cache, and multiple product grids on the same page.

This guide is written for a WordPress site owner, webmaster, or developer who already understands where the product or post archive lives, but wants to set up infinite scrolling without running into random conflicts with the theme, WooCommerce, Elementor, filters, or performance optimization.

How the Plugin Changes Standard WordPress Pagination

Traditional pagination is simple: an archive page displays a limited number of items, and the Next link takes the user to the next page. YITH Infinite Scrolling uses that same logic as its data source, but changes the user journey. The visitor stays on the current page while the plugin finds the next-page link, sends a request, retrieves the new items, and appends them to the existing list.

Because of that, the plugin does not create a new product catalog or replace the WooCommerce query. It works on top of the existing product or post loop. If the theme outputs proper pagination, the list has a clear container, each card has a stable selector, and the next page returns the expected items, the plugin can hook into that structure. If there is no loop, if the page contains multiple similar grids, or if pagination is built through a non-standard page builder, the setup becomes more precise.

That is an important difference from universal query builders. YITH Infinite Scrolling works well when you already have a functioning shop, blog, or archive page and just want to change how users move between pages. If you need to build a brand-new list from arbitrary post types, taxonomies, output templates, and complex query parameters, it makes more sense to evaluate more flexible alternatives in the comparison section ahead of time.

What Happens When the Next Batch Loads

The logic behind infinite scrolling has four parts. First, the plugin identifies the navigation area that contains the next-page link. Then it extracts that link. After that, it finds the container where new cards should be added, along with the individual card selector so it does not insert extra wrappers, headings, or duplicates.

In YITH documentation, these elements are described as Navigation Selector, Next Selector, Item Selector, and Content Selector. These fields look technical, but they determine whether the plugin will work with your theme. A single selector error can lead to silence, an endless loader, repeated products, or the wrong grid being inserted.

Why URL Changes Matter

YITH premium features include an option to change the page URL as new items load. The practical benefit is straightforward: if a user scrolls through the catalog, opens a product, and then goes back, the browser has a better chance of restoring the right context. The same logic also helps analytics and search visibility because each portion of the list does not turn into fully hidden content with no separate address.

Quick check: if the browser address does not change after the next batch loads, that is not always an error. The free version and some configurations may not include that feature. In that case, it becomes even more important for SEO and back-button behavior to keep standard pagination available in the original HTML.

When Infinite Scrolling Makes Sense and When Pages Are Better

Infinite scrolling works best when visitors are browsing through many similar items and do not need to compare every result against an exact page number. In WooCommerce, that might be a clothing storefront, accessories, impulse-buy items, a new arrivals collection, or a category where users typically scan the catalog visually. For a blog, it can work well for article feeds, news posts, recipes, portfolio cards, or archives where continuous browsing matters.

But infinite scrolling is not universal. If someone arrives looking for a specific product, compares many attributes, often returns to a previously found position, or needs quick access to the site footer, traditional pagination or a Load More button may be more convenient. UX research on this pattern regularly points to issues with finding an already viewed item again, accessing the bottom of the page, handling weaker connections, and supporting keyboard navigation.

Good Use Cases

• A product catalog with consistent item cards that users can browse as a continuous stream.
• A mobile storefront where an extra click to open the next page interrupts browsing.
• A blog feed, news archive, or portfolio where the visitor is not tied to page numbers.
• WooCommerce categories that already have stable server-side pagination and valid next-page links.
• A filtered page, as long as the AJAX filtering is compatible and the plugin is pointed at the correct results container.

Cases Where You Should Think Twice

If your site sells expensive products that require detailed comparison, infinite scrolling can make orientation worse. A user sees a product, opens it, goes back, and loses their place. If the footer contains important links for shipping, returns, contact information, or help, automatic loading can make it harder to reach. If your audience often uses a keyboard or screen reader, make accessibility testing mandatory and consider a Load More button as a more controlled compromise.

The main decision point is not whether infinite feeds are trendy, but what the user is trying to do. If they are exploring a stream of similar cards, YITH Infinite Scrolling can make that path smoother. If they need to find an exact item, compare options, and go back, it is better to preserve clear navigation landmarks.

What to Check Before Installation and Activation

Before installation, you do not need to rewrite the theme or change the shop structure. But you should make sure the page where you want to enable the effect already works as a normal paginated archive. The plugin should not be the first tool you use to “fix” a broken grid. It should build on a working list and improve how users move between pages.

Verify Standard Pagination

Open the shop, category, or blog page with the effect disabled. Move to the second page using the regular link. If the URL opens correctly, products do not repeat, sorting is preserved, and filters do not reset the list unexpectedly, the plugin has a solid foundation to work with. If the second page already matches the first or returns an error at this stage, fix the archive, theme, WooCommerce query, or permalink settings first.

Verify the HTML Structure

Right-click the product or post grid and open your browser developer tools. You need to see:

• A main list container such as ul.products, #post-list, or another stable block.
• An individual card element such as li.product or article.post.
• A navigation block that contains the next-page link.
• A link that actually points to the next batch of items.

Do not blindly copy someone else’s selectors from a forum. Even if the theme has the same name, a page builder, child theme, WooCommerce Products widget, or custom markup can change the container. The selector has to match your page, not a theme name from someone else’s example.

Check Cache and Optimization

Caching, minification, JavaScript bundling, and lazy-loading plugins sometimes break AJAX behavior. During the initial setup, enable YITH Infinite Scrolling on a test page or during off-peak traffic, then temporarily clear the cache after each change. If the site uses aggressive script optimization, test in a regular browser window, in incognito mode, and as a logged-out user.

Safe order of operations: first make it work without minification and aggressive caching, then re-enable optimizations one by one. That makes it much easier to identify which layer breaks loading if the issue comes back.

Installation and Initial Check in the Admin Panel

The installation process is standard for a WordPress plugin. In the admin panel, open Plugins, add the plugin from the directory or upload the ZIP archive, then click Activate. If you are working with the free version from WordPress.org, keep its limitations in mind: one site section, mobile activation, and loader options. If you have the premium version, you will get separate sections, multiple event modes, additional loaders, animations, and URL switching.

After activation, do not enable the effect across all archives at once. Pick one page: the shop, a specific category, or a blog feed. That makes it much easier to validate selectors, the grid, filters, and back-button behavior. For WooCommerce, it is usually best to start with a standard product category that does not involve a complex builder, multiple product widgets, or non-standard filters.

First Steps After Activation

1. Open the plugin settings in the YITH admin area.
2. Select a test section where standard pagination already works.
3. Fill in the navigation, next-page, item, and container selectors.
4. Save the settings using Save Changes or the equivalent panel button.
5. Clear the site cache if it is enabled.
6. Open the page in a new window without admin privileges and scroll to the bottom of the list.

If everything is configured correctly, new items will be added after the user reaches the bottom of the list or clicks the button, without a full page reload. If nothing happens, do not change every field at once. Test them one at a time: first the next-page link, then the container, then the item card selector.

Configuring Selectors: The Step Where Most Mistakes Happen

In YITH Infinite Scrolling, selectors are not a minor technical detail. They are the foundation of how the plugin works. The plugin has to understand which part of the page is the list, which elements to append, where to find the Next link, and which navigation block to remove or replace. If a selector is too broad, the plugin may grab the wrong grid. If it is too narrow, it may find nothing. If the page contains multiple identical grids using the same ul.products, the result can become unpredictable.

Four Required Selectors

For a standard WooCommerce archive, you will often see the pair ul.products and li.product, but that is not a universal rule across all themes. Flatsome, Elementor templates, custom archives, and block themes may use different markup. YITH support discussions include cases where a Flatsome blog required selectors like #post-list article.post plus the theme’s own navigation block. That is a useful example: the setup depends on the actual markup, not a one-size-fits-all formula.

How to Narrow a Selector Safely

If the page has a single product grid, you can start with a simple selector. If it has multiple grids, add a parent class or ID for the specific block and use it as a prefix. For example, instead of a broad ul.products, it is better to use .catalog-main ul.products if the catalog-main class exists only on the grid you want. The same applies to the card selector: .catalog-main li.product.

This is especially important in page builders. When Elementor or another editor outputs multiple product widgets, all of them may share the same internal classes. The plugin sees several matching containers and does not always know which list it is supposed to continue. That is why a unique parent class for the target grid often solves more than testing different loaders and animations.

Checking with Developer Tools

1. Open the archive page in your browser.
2. Select the first product card using the inspector.
3. Check which selector consistently matches all cards in the current grid without touching similar blocks above or below it.
4. Open the pagination block and find the next-page link.
5. Compare the HTML on the first and second pages to confirm that the container and cards keep the same structure.

Loading Modes: Infinite Scroll, Button, and AJAX Pagination

In YITH premium settings, you can choose the event type for a section. This is not just a matter of preference. The mode determines who controls the loading moment: the page scroll itself, an explicit user action through a button, or familiar pagination that works without a full reload.

Automatic Scrolling

Automatic mode works well for feeds where the user browses a stream and does not need frequent access to the footer. It reduces clicks and feels familiar on mobile devices. But it also has a downside: if there are many products, the page can become heavy, and the user may lose their sense of place.

For a store, choose this mode when the cards are fairly uniform, filters are not too complex, and the main goal is to show more products without extra navigation steps. After enabling it, do not just verify that new items load. Also test how images behave, how add-to-cart buttons work, and whether wishlist buttons, sale badges, and other dynamic card elements still function correctly.

Load More Button

The button gives control back to the user. It is useful when you want to preserve access to the footer, reduce strain on weak connections, or make behavior more predictable for accessibility. In the settings, you can define the button label and add an extra CSS class. This is a strong option for stores where an infinite feed feels too aggressive, but standard pagination still feels like unnecessary friction.

If you are unsure, start with the button. It is easier to debug because the logic is clearer: the user clicks, the request is sent, and the result appears. If the button works but automatic scrolling does not, the issue may be related to the scroll event, container height, mobile markup, deferred scripts, or a theme conflict.

AJAX Pagination

AJAX pagination keeps the idea of pages but removes the full reload. It makes sense when page landmarks still matter to the user, but you want the transition to feel smoother. For a large catalog, this can be a good compromise between SEO, return navigation, and interaction speed.

Do not treat the mode as a one-time decision. Test it against real tasks: how users filter products, return from a product page, reach information at the bottom of the page, browse on mobile, and how quickly images in the next batch load.

Post-Installation Settings: What to Enable Right Away and What to Leave for Later

After installation, it is best to move from stability to decoration. Start with selectors and the event mode, then test mobile behavior, then the loader, animation, URL changes, and integrations. If you begin with visual effects, you can spend time on a beautiful loader and miss the fact that the plugin is appending the wrong products.

Baseline Setup for a Typical Store

For a standard WooCommerce archive, it is usually enough to configure a single shop section, enter the correct selectors, choose either automatic scrolling or a button, save the settings, and test the second page. If the free version only allows one section, use it for the most important archive instead of trying to cover the shop, blog, portfolio, and individual widgets all at once.

Mobile activation should be tested separately. Infinite scrolling does feel natural on smartphones, but that is also where slow images, heavy product cards, and unstable connections become most obvious. If a mobile category loads heavily, a Load More button may be the more honest choice for the user.

Loader and Reveal Effect

The loader is there so the visitor understands that a new batch has already been requested and the page has not frozen. In the free version, you can use the standard loader or a custom one. The premium version includes multiple choices and animations. Pick a simple visual indicator that does not steal attention or clash with the theme design.

Reveal effects such as fade-in or zoom should only be enabled after the main behavior has been verified. If cards jump, images appear late, or the grid changes height, solve the layout or image optimization issue first. Animation should not be used to hide a broken grid.

URL Changes and Returning with the Back Button

If URL switching is available in your setup, enable it for catalogs where users often open a product and then return to the list. After turning it on, test the full path: scroll to the next batch, open a product, then hit Back. The expected result is that the user returns close to the place they were viewing instead of the top of page one. If the browser still jumps to the beginning, check the cache, the browser history behavior, and whether the address actually changes during loading.

Filter Integration

The YITH product page mentions integration with YITH WooCommerce Ajax Product Filter. The point of that integration is that the filter updates results without a reload, while infinite scrolling continues working with the filtered list. This is exactly the kind of scenario where containers and test order matter most: first the filter must correctly change the products, then scrolling must continue from the next page of the already filtered results.

Practical rule: if filtering works but the next loaded products come from the original category instead of the filtered results, the problem is often not the loader itself but the interaction between the filter, URL state, AJAX request, and results container.

Practical Example: Enabling Product Loading on a WooCommerce Category Page

Imagine a store category where standard pagination already works: the first page displays a grid, there is a link to page two at the bottom, and all product cards share the same structure. The goal is to replace page-to-page navigation with smooth product loading without breaking filters, wishlist features, or card buttons.

Goal

Create a category page where the visitor sees the first batch of products, scrolls down, and gets the next products without a full reload. At the same time, standard pagination should remain understandable for search engines and stay available as the fallback structure in the HTML.

Preparation

• The WooCommerce archive opens without errors.
• The second category page is different from the first and contains new products.
• Cache has been cleared or temporarily disabled for testing.
• You know the list container, card element, navigation block, and next-page link.
• The test page does not contain two identical product grids with the same selectors.

Setup Steps

1. Open the YITH Infinite Scrolling settings and create or configure a section for the shop.
2. In the Navigation Selector field, enter the WooCommerce pagination block that contains the next-page link.
3. In the Next Selector field, enter the actual next-page link, not the full set of page numbers.
4. In the Item Selector field, enter a single product card.
5. In the Content Selector field, enter the full product grid container.
6. Select a mode: automatic scrolling for a continuous storefront or Load More for more controlled behavior.
7. Save the settings, clear the cache, and open the category page in a logged-out browser window.

Verifying the Result

After scrolling or clicking the button, the grid should display products from the next page. They should not repeat the first batch, change the number of columns, lose images, buttons, sale badges, or wishlist elements. Open developer tools and check the network tab to see whether a request to the next page is actually being sent. If the response contains new products but the front end shows repeats, check whether the plugin is targeting the wrong container.

One Detail About Multiple Grids

If the page contains a “Popular Products” block, a “Recommended” block, and the main category, all of them may use ul.products and li.product. In that case, a general selector is too broad. Add a unique parent class to the main grid and refine the YITH fields through that class. This lowers the risk of duplicates and products being inserted into the wrong block.

Ways to Use It Across Different Page Types

YITH Infinite Scrolling is useful beyond the standard shop page. The documentation describes it working with products, posts, reviews, and other sections as long as they have a loop and pagination. But each scenario needs its own quality check: WooCommerce product cards are one thing, a blog feed is another, and a product widget inside a builder is something else again.

Store Category with a Large Product Range

For a category where users browse visually, infinite scrolling reduces friction. What matters here is image speed, a stable column count, and proper filter behavior. Make sure that loaded cards inherit the same styling as the original ones and that button interactions still work.

Blog Feed or Post Archive

For a blog, the setup is similar, but the selectors will be different. A common mistake is trying to enable the effect on a single post where no real loop of subsequent posts exists. The plugin needs a list that has pagination. If a single post only includes “previous/next post” navigation, that is not the same as an archive loop.

Page with AJAX Filters

If the store uses an AJAX filter, validate the filter on its own first. Then enable scrolling and see how the next page is built after filtering. A good result is that the next batch matches the selected filters. A bad result is when the list falls back to unfiltered products after the first load or mixes items from different states.

Section Inside a Page Builder

A page builder is convenient for design, but it can make selector choice harder. If the product widget sits inside several nested wrappers, add a clear class to the widget’s top-level container and use that in your selectors. Do not build a selector around a random auto-generated class that the editor may change after the page is updated.

Performance, SEO, and Accessibility: How Not to Break a Useful Feature

Infinite scrolling affects more than appearance. It changes how content is accessed, how browser history behaves, how much load the page carries, and how usable the interface is across different devices. That is why, after setup, you should review three areas: search visibility, performance, and accessibility.

SEO Check

Google’s guidance on infinite scroll emphasizes the importance of accessible paginated pages in a series. In practical WordPress terms, that means the standard paginated URLs should still open, and the content should not exist only after JavaScript loading. Do not block paginated pages from indexing without understanding the consequences, and do not remove navigation from the HTML in a way that prevents search crawlers from reaching later products.

If URL changes during loading are available, test them on the live page. If they are not, be especially careful with internal links, the sitemap, categories, and standard pagination. The plugin should improve user interaction, not make part of your catalog invisible to crawlers.

Performance and Images

Each new batch of products adds images, buttons, widget scripts, and sometimes third-party elements. If the cards are heavy, the page will grow in memory usage and render time. Before launch, check image size, lazy loading, the number of products per page, and behavior on a weak mobile connection. In some cases, it is better to load fewer products at a time than to build a very long page with hundreds of DOM elements.

Accessibility and the Footer

Automatic loading can interfere with keyboard navigation and access to the footer. If the bottom of the page contains important links, consider a Load More button. It lets the visitor decide when to load the next block and avoids the feeling that the bottom of the site keeps moving away.

A Small Button Styling Improvement

If you chose the Load More mode, premium settings let you add an extra button class. This is a safe way to style the button through CSS without changing the plugin code or editing theme files directly. Below is an example for the catalog-load-more class, which you can enter in the Extra Class of the Button field.

.catalog-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 6px;
  background: #6f42c1;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.catalog-load-more:hover,
.catalog-load-more:focus {
  background: #56329a;
  color: #fff;
  outline: 2px solid #cbb7ff;
  outline-offset: 2px;
}

Add the CSS to your child theme, the theme’s Additional CSS section, or a safe snippet plugin. After saving, open the page as a regular visitor, click the button, confirm that products still load, verify that keyboard focus is visible, and make sure the button does not clash with the overall theme style. Rolling it back is simple: remove the CSS and delete the extra class from the button setting.

Why YITH Infinite Scrolling May Not Work and How to Find the Cause

Diagnostics work best when you move from page structure to optimization. Do not start by reinstalling the plugin if you have not checked the selectors, standard pagination, and AJAX request. Most common symptoms happen because the plugin cannot find the correct link, targets the wrong container, or runs into caching and dynamic widget issues.

Nothing Loads After Scrolling

Symptom: the user reaches the bottom of the list, but the loader never appears or spins forever. A likely cause is an incorrect Next Selector, a missing next-page link, a JavaScript error, or an optimization layer that moved the script to the wrong place.

Check the second page manually. Then open the browser console and the network tab. If there is no request, look at the scroll event or the selectors. If there is a request but the response is not inserted, move on to the container and item-card selector. If the Load More button works but automatic scrolling does not, temporarily keep the button and check the mobile page height, sticky elements, and optimization scripts.

Products Repeat or Are Inserted into the Wrong Block

Symptom: requests are being sent, but the user sees repeated cards, mixed grids, or products loading into the wrong place. YITH support has seen this scenario on pages with multiple product grids, especially when page builders are involved. The cause is often a Content Selector or Item Selector that is too broad.

Add a unique class to the correct grid and use it as a prefix. If the page contains multiple WooCommerce Products widgets, do not assume that a generic ul.products will be precise enough. When the issue appears only on the homepage but not in a standard category, compare how many grids are present and how they are wrapped.

Wrong Products Load After Filtering

Symptom: the filter updates the first batch, but the next load returns products from the original category or resets the selected parameters. A likely cause is that the filter and the scrolling logic are using different URL states or different results containers.

First make sure the AJAX filter works correctly on its own. Then check which next-page link the plugin sees after the filter is applied. If you are using YITH WooCommerce Ajax Product Filter, rely on the official integration and test both plugins together. If the filter is from a third party, do not assume full compatibility without testing it on a real category page.

Card Buttons or Wishlist Features Stop Working After Loading

Symptom: the original cards work, but the loaded ones lose the wishlist button, quick view, pop-up elements, or other dynamic functionality. The usual cause is that a third-party script initializes only on the first page load and has no awareness of newly inserted elements.

Check whether the relevant plugin supports AJAX-loaded content. Within the YITH ecosystem, the developer offers a shared framework and separate integrations, but third-party widgets still need testing. If the feature is critical, use the Load More mode and confirm that the elements are reinitialized after each click.

The Problem Only Affects Logged-Out Users

Symptom: everything works for the administrator, but not for regular visitors. A common reason is page cache, JavaScript optimization, or a different state of minified files. Clear the site cache, browser cache, and CDN cache, temporarily disable script bundling for testing, then restore optimizations one item at a time.

When It Is Better to Roll the Change Back

Roll the effect back if, after testing, you cannot preserve correct pagination, products keep repeating, filters return incorrect results, or the page becomes too heavy on mobile devices. Rolling back does not mean giving up on the plugin permanently. Sometimes it is enough to switch from automatic scrolling to a button, refine the selectors, or keep infinite scrolling only for one simple category.

When YITH Infinite Scrolling Is the Right Choice

YITH Infinite Scrolling is a good fit when your site already has a working catalog or archive, you want to improve browsing through a long list, and the page structure allows you to define the navigation, container, and items precisely. The plugin is especially appropriate for WooCommerce categories, blog feeds, and storefronts where visitors browse many similar cards and do not want to click through to the next page every time.

If the site relies on complex filters, multiple product widgets on the same page, non-standard queries, and custom templates, plan for more testing time. In cases like that, success depends less on the installation itself and more on careful selector setup, AJAX request validation, and theme compatibility.

Before launching on a live site, walk through a short checklist: standard pagination opens correctly, selectors target only the intended grid, new products do not repeat, filters preserve state, card buttons still work after loading, and the mobile page stays fast. If that path checks out, you can download the installation file and move on to safe testing on your own page.