Skip to content

How to Add Infinite Scroll to WooCommerce Products List in WordPress?

Key Takeaways

  • Nexter Blocks Pro activa el bloque Product Listing para mostrar desplazamiento infinito en WooCommerce, y la opción se activa en Nexter > Blocks dentro del panel de WordPress.
  • La carga automática trae el siguiente lote de productos cuando el comprador se acerca al final del lote actual, y con la opción lazy load no se renderiza ningún botón load-more.
  • El pie de página queda inaccesible mientras siguen cargando productos, los compradores pierden su lugar al volver a un producto, y Google no desplaza la página, así que los productos profundos no se descubren de forma fiable.
Table of Contents

On a browsing page, where nobody is looking for anything specific, asking the shopper to click for more is friction they did not need.

Infinite scroll loads the next batch of products as they reach the bottom, so the catalogue just keeps going.

Before You Start

  • Edition: Pro — the Product Listing block needs Nexter Blocks Pro.
  • Block to enable: Product Listing, switched on under Nexter > Blocks in your WordPress dashboard.
  • WooCommerce active, with published products. The block reads your real catalogue, so an empty store renders an empty listing.
  • Noticeably more products than one batch, or there is nothing to load.

Steps

  1. Set how many products load at a time.
Setting the batch size
  1. Set the load option to the lazy load style.
Choosing infinite scroll
  1. Publish and scroll the real page to the bottom of the listing.
Infinite scroll fetching the next batch

How It Behaves

The next batch is fetched automatically as the shopper approaches the end of the current one.

  • Measured on a published page: with the lazy load option set, no load-more button is rendered — which is correct, because the loading is automatic rather than triggered by a click.
  • The paging information travels with the listing, which is how the loader knows which batch to fetch next.
  • Each batch is a request, so a long scroll is a lot of round trips.
  • Compare with a load more button, which does the same thing but leaves the shopper in control.
  • Measured with Nexter Blocks Pro deactivated: the block renders nothing at all — no wrapper, no products, no prices. This is a Pro-only block.

Limitations

  • Pro only — measured with Nexter Blocks Pro deactivated, nothing renders.
  • The footer becomes unreachable while products keep loading, which matters more on a shop than a blog because delivery and returns links usually live there.
  • A shopper cannot return to their place. Following a product and coming back lands them at the top again, which is a real cost on a large catalogue.
  • Search engines do not scroll, so products deep in the list may not be discovered.
  • For most shops a load more button is the better choice.

Troubleshooting

Nothing loads when I reach the bottom

There may be nothing left to load. Check the batch size is smaller than your product count, and that you are on the published page.

I cannot reach my footer

That is the known trade-off. Switch to a load more button or pagination if the footer matters.

Shoppers lose their place

Also inherent to infinite scroll. On a large catalogue, pagination serves shoppers better.

Will Google see all the products?

Not reliably. Keep a paginated product archive so everything stays reachable.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Frequently Asked Questions

What do I need before adding infinite scroll to WooCommerce products in WordPress?

Nexter Blocks Pro is required because the Product Listing block is Pro-only. WooCommerce also has to be active, and the store needs published products because the block reads the real catalogue. Infinite scroll only makes sense when there are more products than one batch, otherwise there is nothing for the loader to fetch. That matters on smaller stores, where a load more button or pagination may be a better fit.

Why does nothing load when I reach the bottom of the product list?

The usual cause is that there is nothing left to load, or the batch size is too large for the number of products you have. The page also needs to be the published version, because the loader is tied to the real listing. On a small catalogue, this behavior can look broken even when it is just finished loading all available products.

What happens to the footer when infinite scroll is enabled on a shop page?

The footer can become unreachable while products keep loading, which is one of the main trade-offs of infinite scroll. That matters more on a shop than on a blog because delivery and returns links often live in the footer. If those links matter for your store, a load more button or Add pagination to WooCommerce products is usually safer.

Is infinite scroll a good choice for large WooCommerce catalogues?

It works best when shoppers are browsing casually and do not want to click for more, but large catalogues create two problems: shoppers lose their place and search engines do not scroll. The page also notes that each batch is a request, so a long scroll means a lot of round trips. For most shops, pagination serves shoppers better when they need to come back to a specific product.

Will Google see all the products in an infinite scroll WooCommerce list?

Not reliably. Search engines do not scroll, so products deep in the list may not be discovered if infinite scroll is your only way of exposing them. The practical fix from this tutorial is to keep a paginated product archive so everything stays reachable. That gives crawlers and shoppers a stable path through the catalogue instead of relying on endless loading.

How does infinite scroll compare with a load more button in WooCommerce?

Both approaches fetch the next batch of products, but they differ in control. Infinite scroll loads automatically as the shopper approaches the end of the current batch, while a load more button leaves that decision with the shopper. The page also notes that no load-more button is rendered with lazy load enabled, which makes infinite scroll feel smoother but less predictable for navigation.

Last reviewed: September 27, 2026

Related Docs