El scroll infinito permite que se carguen más productos cuando se llega al final de la página, en vez de tener que hacer clic en los enlaces de “siguiente página”. Esto es una gran ventaja, sobre todo para los usuarios de móvil, ya que para ellos es más complejo pulsar en botones pequeños.

Otra ventaja importante es que el tiempo de carga de tu página mejora, al tener que cargar solo unos pocos artículos. Y en general tu usuario tendrá una experiencia más cómoda.

Vamos a ver como hacerlo con WooCommerce de forma gratuita, si el tema que estás utilizando no trae esta funcionalidad.

YITH Infinite Scrolling

YITH Infinite Scrolling es gratuito y está disponible en el repositorio oficial de WordPress. Puedes ver un ejemplo de como funciona en esta demo.

Lo único que necesita para funcionar es que le digas que clases CSS utiliza tu tema para hacer funcionar la navegación.

Yo he utilizado para probarlo el tema Storefront que respeta la clases que trae por defecto WooCommerce. Si en tu caso no funciona puedes preguntarle al desarrollador de tu tema que clases son las que utiliza.

plugin-gratis-para-scroll-infinito-en-woocommerce

Clases CSS necesarias para utilizar scroll infinito en los productos de WooCommerce

El plugin también tiene una versión de pago Yith Infinite Scrolling Pro. Entre otras ventajas permite configurar que se carguen más productos solo cuando se pulsa un botón, en vez de hacerlo de forma automática.

Utilizar scroll infinito con shortcodes

Lo visto hasta ahora funciona exclusivamente en las páginas de tienda, categorías, etiquetas etc. Pero también puedes utilizarlo en los shortcodes incluidos en Woocommerce.

Los shortcodes son muy útiles para añadir tus productos a los posts. Lo cual es muy interesante para conducir el tráfico de tu blog hacia los productos.

Por defecto los shortcodes de WooCommerce no traen la funcionalidad de paginación, y cargan todos los productos que tu le digas en el parámetro “per_page”.

Por ejemplo:

[product_category category=”bufandas”]

Cargaría todos los productos de la categoría bufandas. Sin embargo:

[product_category category=”bufandas” per_page=”6″]

Cargaría solo 6 productos.

Pero puedes darle la funcionalidad de paginación añadiendo el plugin gratuito Shortcode Pagination for WooCommerce.

Este plugin no necesita configuración, simplemente instalar y activar.

Si ya has instalado y configurado el plugin Yith Infinite Scroll anteriormente, no necesitas hacer nada más. Los productos se cargarán con scroll infinito. Además lo harán en grupos dependiendo del valor que le des al parámetro “per_page”.

Eso es todo por hoy. Como siempre, si tienes cualquier duda, deja un comentario!