Infinite Scroll en el módulo tienda de Divi

Si tienes una tienda online con WooCommerce en Divi y manejas un catálogo amplio de productos, seguro has notado que la paginación nativa del módulo tienda corta la experiencia del usuario: llegan al final de la página, ven el botón de "página 2", y muchos simplemente se van. El infinite scroll — o scroll infinito — resuelve ese problema haciendo que los productos aparezcan automáticamente mientras el usuario baja, tal como funciona en Instagram o Amazon. En este tutorial te muestro cómo activar el infinite scroll en el módulo tienda de Divi con un plugin gratuito y sin escribir código complejo.

La solución que uso en este tutorial es el plugin YITH Infinite Scrolling, completamente gratuito desde el repositorio oficial de WordPress, y que se integra perfectamente con el módulo tienda de Divi a través de unas clases CSS específicas que le indicamos dónde aplicar la funcionalidad.

¿Por qué el infinite scroll mejora la experiencia de tu tienda?

La paginación tiene su lugar — especialmente cuando el usuario quiere comparar categorías o volver a un producto específico. Pero en tiendas donde el descubrimiento es parte de la experiencia (ropa, accesorios, artesanías, productos digitales), el infinite scroll reduce la fricción de forma significativa. El usuario sigue viendo productos sin tener que hacer clic en "siguiente página", lo que aumenta el tiempo en el sitio y las probabilidades de que algo capture su atención. Si estás construyendo tu tienda con Divi, este tutorial complementa todo lo que puedes aprender en el Curso de Tiendas Online con Divi 5 y WooCommerce.

Paso 1: Instala el plugin YITH Infinite Scrolling

Desde tu panel de WordPress, ve a Plugins → Añadir nuevo y busca YITH Infinite Scrolling. El plugin es de YITH, uno de los fabricantes de plugins para WooCommerce más conocidos del ecosistema. Instálalo y actívalo. Es un plugin ligero y la versión gratuita cubre todo lo que necesitas para este tutorial.

Consejo: verifica que la paginación del módulo tienda esté visible antes de continuar. YITH Infinite Scrolling transforma la paginación existente en scroll infinito, así que si tienes la paginación desactivada en Divi, el plugin no tiene nada que convertir.

Paso 2: Agrega la clase CSS al módulo tienda

Ahora entra al editor de Divi donde tienes tu módulo tienda. Puede estar en el Theme Builder (si lo construiste ahí) o directamente en una página. Haz clic en el módulo de tienda para editarlo, ve a la pestaña Avanzado → ID y clases CSS, y en el campo de clase agrega: my_infinite_shop (en minúsculas y con guiones bajos). Esta clase es el identificador que el plugin usará para saber sobre qué módulo aplicar el scroll infinito.

Mientras estás ahí, también necesitas ir a las opciones del módulo tienda y en la sección Elementos activar la opción de Mostrar paginación. Es un paso contraintuitivo — activas la paginación para que el plugin la pueda transformar — pero es necesario para que YITH Infinite Scrolling funcione correctamente.

🎓 ¿Quieres dominar el módulo tienda de Divi al completo?
En uxdivi.com/cursos cubrimos el módulo tienda, el Theme Builder para tiendas, la integración con WooCommerce y mucho más. Accede como suscriptor y construye tu tienda online de forma profesional.

Paso 3: Configura los selectores en el plugin YITH

Ve al panel de configuración de YITH Infinite Scrolling en tu WordPress (los plugins de YITH aparecen agrupados bajo el menú YITH en la barra lateral del admin). Entra a su configuración y asegúrate de que el infinite scroll esté activado.

El plugin tiene cuatro campos que debes completar con los selectores CSS que identifican los elementos del módulo tienda de Divi. Estos valores son estándar para el módulo de Divi y puedes usarlos tal cual:

• Navigation Selector (selector de navegación): el selector del bloque de paginación de Divi.
• Next Selector (selector siguiente): el enlace a la siguiente página.
• Item Selector (selector de artículo): el elemento individual de cada producto.
• Content Selector (selector de contenido): la clase que asignaste al módulo, en este caso .my_infinite_shop con el punto delante.

Los valores exactos de los primeros tres selectores los encontrarás en los materiales del tutorial (en los recursos del curso si eres suscriptor), ya que son los selectores nativos que usa el módulo tienda de Divi. Una vez completados, guarda los cambios y recarga tu tienda — deberías ver cómo la paginación desaparece y los productos empiezan a cargarse automáticamente cuando llegas al final.

Consejo: si tu tienda carga los filtros con AJAX (por ejemplo usando el plugin YITH WooCommerce Ajax Product Filter), el infinite scroll es completamente compatible. De hecho, al ser de la misma empresa, los plugins de YITH están diseñados para trabajar en conjunto. También puedes combinarlo con filtros como te explico en el tutorial de filtros para módulos de Divi.

Paso 4: Personaliza el preloader

Por defecto, mientras carga la siguiente tanda de productos aparece un GIF de carga genérico. Puedes reemplazarlo con cualquier imagen animada que vaya mejor con el diseño de tu tienda. Una fuente excelente es icons8.com/preloaders, donde encontrarás cargadores animados gratuitos con opciones de edición de color y tamaño.

Para cambiarlo, descarga el GIF que prefieras, ve a la configuración de YITH Infinite Scrolling y en el campo de imagen de carga sube tu archivo. Una recomendación: descarga el GIF a un tamaño de 32px o menos para que no se vea gigante en pantalla. Una vez subido, guarda y recarga la tienda para ver el resultado.

Cuándo usar infinite scroll y cuándo no

El scroll infinito no es la solución correcta para todos los casos. Funciona muy bien en tiendas de descubrimiento con catálogos grandes y productos visuales. Pero si tu tienda tiene pocas referencias o si el usuario necesita encontrar productos específicos por número de página (por ejemplo para volver a una posición exacta), la paginación clásica puede ser más útil. También ten en cuenta que el infinite scroll puede complicar el acceso al footer de tu tienda — si tienes información crítica ahí, considera mostrarla en otro lugar.

Para tiendas que construyo con Divi, yo suelo combinar el infinite scroll con los carruseles de productos en WooCommerce y Divi para las categorías destacadas, y el scroll infinito para el catálogo completo. Es una combinación que mejora la experiencia en ambos frentes.

Preguntas frecuentes sobre infinite scroll en Divi

¿El infinite scroll funciona en móvil?

Sí, YITH Infinite Scrolling es responsive y funciona en dispositivos móviles sin configuración adicional. El scroll continuo es incluso más natural en pantallas táctiles que la paginación con botones.

¿Afecta el SEO activar infinite scroll?

Potencialmente sí, si el rastreador de Google no puede acceder a los productos de las páginas 2 en adelante. Para mitigarlo, el plugin mantiene la paginación HTML en el código — solo la oculta visualmente — lo que permite que los bots sigan los enlaces aunque el usuario no los vea.

¿Puedo usar YITH Infinite Scrolling fuera del módulo tienda de Divi?

Técnicamente sí, aunque requiere adaptar los selectores CSS al módulo que quieras paginar. Funciona mejor con el módulo tienda porque tiene una estructura de paginación estándar que el plugin reconoce.

¿El plugin YITH es compatible con Divi 5?

Al momento de escribir este tutorial, YITH Infinite Scrolling funciona con el módulo tienda estándar de WooCommerce en Divi. Si usas Divi 5, verifica la compatibilidad en la página del plugin antes de instalarlo.

Conclusión

Activar el infinite scroll en el módulo tienda de Divi es un proceso de cuatro pasos: instalar YITH Infinite Scrolling, agregar la clase CSS al módulo, activar la paginación nativa, y configurar los cuatro selectores en el plugin. El resultado es una tienda con una experiencia de navegación más fluida que mantiene al usuario explorando sin interrupciones. Si además le añades un preloader personalizado, el detalle visual queda completamente integrado con tu diseño.

🎓 ¿Quieres construir una tienda online completa con Divi?
En uxdivi.com/cursos tenemos el Curso de Tiendas Online con Divi 5 y WooCommerce donde cubrimos desde la estructura del catálogo hasta la experiencia de compra, pasando por el módulo tienda, filtros, carruseles y mucho más. Accede como suscriptor y construye una tienda que realmente convierte.

Recursos, Snippets y descargas