El scroll infinito es un recurso que se usa bastante en las tiendas online para evitar la paginación clásica de tener que ir moviendote entre páginas de producto. Con el Scroll infinito lograrás ir viendo productos conforme vamos llegando al final de la página (Al más puro estilo Twitter). Aquí veremos como poner en nuestra tienda online Scroll infinito para woocommerce gratis!
Se puede hacer muy facil en wordpress para los post con el plugin llamado «ifinite scroll» ¿Pero y para woocommerce? Pues podemos utilizar el mismo plugin, y cambiando un par de cositas nos funcionará de maravilla para lo que queremos que es crear un efecto de scroll infinito para nuestras categorías de productos.
Descargamos el plugin Infinite Scroll para wordpress y los instalamos en nuestra tienda online.
Nota: Lleva mucho tiempo sin actualizarse pero a día de hoy funciona perfectamente con woocommerce (Yo lo he probado hasta en la versión 2.3.x , es decir hasta abril de 2015).
Una vez instalado tenemos que configurarlo de la siguiente forma:
Content selector: Aquí tendremos que utilizar el inspector de elementos de nuestro navegador para detectar como se llama el div en el que esta nuestro contenido.
Un ejemplo sería: div.left-column .
Aquí no os puedo decir mucho más ya que cada theme usa un layout distinto y esta parte depende de el, pero es facil con el inspector de elementos saber cual es.
Navigation selector: Esta parte también depende del theme pero casi todos los themes para woocommerce utilizan esta estructura: nav.woocommerce-pagination.
En el caso de que no fuera así, será muy parecido, buscando con el inspector de elementos en la tienda online encontraremos fácil el selector que tenemos que añadir.
Next selector: ul.page-numbers a:first
Item selector: ul.products
Aquí os dejo una captura de pantalla de una configuración que funciona perfectamente.
El theme utilizado es flatsome Aquí podréis ver el ejemplo y os ayudará a sacar los selectores de vuestro theme ya que podeis ver un ejemplo y sus selectores así que con el inspector de elementos podréis sacar los selectores de vuestro theme.
Buenos días Miguel Angel,
Aquí van mis dudas tras leer tu post, y antes de hacer una prueba.
¿Afecta al rastreo que no haya enlaces de paginación?, quiero decir, ¿Googlebot (o cualquier bot) puede rastrear la web sin problema al poner el scroll infinito?
¿Recomiendas, desde el punto de vista SEO poner scroll infinito en un ecommerce hecho con woocommerce?
¿Y en el caso de que hasta ahora haya tenido paginación hay problema al pasar a scroll infinito?
Mil gracias
Buenas Ignacio,
1) Si que afecta al rastreo, si lo aplicas deberías crear un Sitemap html con todos los productos para que google y demás bots puedan rastrear todos los productos, no todos los que hay antes de que se ajuste el scroll.
2) Me parece una buena solución sobretodo para dar fuerza a determinados productos, pero hay que analizar cada caso.
3) Si tienes paginaciones bien implementadas con sus rel nex rel prev y no las tienes indexadas no deberías tener problema, eso sí tendrás que complementarlo con un sitemap de productos en HTML para que todos se puedan rastrear.
Un saludo!!