Cómo agregar scroll infinito a WordPress/WooCommerce

¿Quieres implementar el desplazamiento infinito en tu sitio pero no sabes cómo? ¡Has venido al lugar correcto! En este artículo, le mostraremos cómo agregar desplazamiento infinito a cualquier sitio de WordPress y tienda WooCommerce .

Antes de sumergirnos en eso, primero comprendamos las diferencias entre la paginación y el desplazamiento infinito.

Diferencia entre paginación y scroll infinito

La paginación es un sistema de navegación basado en dividir el contenido en conjuntos de páginas, donde cada página contiene un número fijo de elementos. Para navegar entre las páginas, debe hacer clic en un número de página o en la anterior/siguiente y el navegador lo llevará a esa página en particular.

El ejemplo más común de paginación son los resultados de búsqueda de Google. Cuando busca algo en Google, devuelve una lista de resultados relevantes que se dividen en diferentes páginas. Si se desplaza hacia abajo hasta la parte inferior de la página de búsqueda, verá una lista de enlaces numerados que apuntan a cada página. Desde allí, puede hacer clic en cualquier número para navegar a esa página en particular.

El desplazamiento infinito , por otro lado, adopta un enfoque diferente para la navegación. En lugar de dividir el contenido en un conjunto de páginas, usa AJAX para mostrar todo el contenido en una sola página. Inicialmente, se muestra una pequeña cantidad de elementos, mientras que más contenido se carga automáticamente a medida que el usuario continúa desplazándose hacia abajo. La idea detrás del desplazamiento infinito es que, independientemente de cuánto se desplacen los usuarios, siempre verán algún contenido.

Los mejores ejemplos de desplazamiento infinito son los sitios de redes sociales como Facebook, Instagram, Twitter, etc. Cuando estés navegando por tu feed, verás que nunca termina y siempre te muestra algo. El feed carga más publicaciones siempre que continúes desplazándote hacia abajo. Así es como funciona el pergamino infinito.

Tanto la paginación como el desplazamiento infinito son muy comunes hoy en día, pero no hay mejor método. Ambos tienen sus pros y sus contras, por lo que serán más apropiados para distintos escenarios. Dependiendo de sus requisitos y condiciones, puede preferir uno u otro.

Esto nos lleva a la pregunta, ¿cuándo tiene sentido agregar scroll infinito a WordPress? ¿Cuándo es más apropiado que la paginación? Echemos un vistazo.

¿Cuándo usar el desplazamiento infinito?

Usar el desplazamiento infinito o la paginación como método preferido de navegación es puramente subjetivo. No hay correcto o incorrecto aquí y depende completamente de sus necesidades y gustos. Sin embargo, como ambos métodos se usan ampliamente, los visitantes están acostumbrados a ciertas cosas y esperan ciertos comportamientos según el sitio. Es por eso que elegir el sistema de navegación adecuado puede tener grandes beneficios para usted.

Ahora, ¿cuál es el adecuado para ti? Eso depende en gran medida de sus requisitos y, por lo tanto, solo usted puede analizar mejor su situación, sopesar los pros y los contras de cada uno y tomar esa decisión.

Por ejemplo, los sitios de comercio electrónico que contienen miles de productos están mejor con la paginación. Esto facilita la navegación entre las páginas en lugar de desplazarse interminablemente por el enorme inventario. Por ejemplo, Amazon, la plataforma de comercio electrónico más grande del mundo, utiliza la paginación para fines de navegación.

Por el contrario, si tu tienda contiene relativamente menos productos organizados en categorías, el scroll infinito puede ser una buena opción para ti. Dado que cada categoría tendrá una menor cantidad de artículos, encontrar productos no será una molestia para los compradores. También puede ser más cómodo para los usuarios de dispositivos móviles, ya que desplazarse es más fácil y fluido que hacer clic en números de página pequeños.

Por otro lado, una página de blog podría beneficiarse más del desplazamiento infinito. Con el desplazamiento infinito, las publicaciones seguirán cargándose automáticamente, por lo que los usuarios no tendrán que realizar ningún paso adicional para descubrir más contenido. Esto mantiene a los usuarios comprometidos y, como resultado, permanecerán en el sitio por más tiempo.

Estos son solo algunos ejemplos de cosas que debe considerar para tomar su decisión. Como se mencionó anteriormente, no hay elección correcta o incorrecta, simplemente elija lo que funcione mejor para su situación particular.

Para aquellos interesados ​​en el desplazamiento infinito, echemos un vistazo rápido a sus ventajas y desventajas.

Beneficios del desplazamiento infinito

En primer lugar, el desplazamiento infinito mejora su experiencia de usuario al utilizar AJAX para cargar todo el contenido en la misma página, por lo que los usuarios no tienen que hacer clic en los números de página para navegar entre las páginas y esperar a que se vuelvan a cargar cada vez.

Del mismo modo, el desplazamiento infinito tiende a aumentar la participación del usuario y hace que los visitantes pasen más tiempo en su sitio web. Con el desplazamiento infinito, el contenido continúa cargándose automáticamente a medida que el usuario se desplaza, alimentando continuamente a los usuarios con contenido interesante que despierta su interés y los mantiene en el sitio.

Una mejor experiencia de usuario y una mayor participación también ayudan a reducir su tasa de rebote. Los motores de búsqueda consideran esto como una señal de buen contenido, lo que lo ayuda a mejorar el SEO de su sitio.

Además, los usuarios móviles suelen preferir el desplazamiento infinito. Desplazarse hacia abajo en dispositivos de pantalla táctil es mucho más fácil e intuitivo que hacer clic en números de página pequeños. También hace que la navegación sea más rápida, ya que los usuarios no tienen que esperar a que las páginas se vuelvan a cargar cada vez.

Estas son las principales ventajas del desplazamiento infinito, pero existen algunas desventajas. Echemos un vistazo a algunos de los inconvenientes del desplazamiento infinito.

Desventajas del desplazamiento infinito

Si tiene una tienda con miles de productos o un sitio con toneladas de publicaciones, la navegación puede ser difícil con un desplazamiento infinito. Esto es especialmente cierto cuando los visitantes están interesados ​​en un producto o una publicación ubicada al final de la lista. Puede que sea necesario desplazarse bastante para encontrarlo, lo que puede afectar negativamente a la experiencia del usuario.

Además, con el desplazamiento infinito, el pie de página de su sitio podría volverse inaccesible. Por lo general, el pie de página de un sitio web contiene información y enlaces útiles. Si no está disponible, el usuario no podrá ver esa información y perderá detalles importantes.

Además, el desplazamiento infinito consume mucha memoria ya que el contenido sigue cargándose en la misma página. En el peor de los casos, puede provocar el agotamiento de la memoria e incluso bloquear el servidor. Por lo tanto, si desea utilizar el desplazamiento infinito, debe utilizar el alojamiento administrado para asegurarse de evitar el agotamiento de la memoria.

Eso es todo por los pros y los contras. Ahora veamos cómo implementar el desplazamiento infinito en su sitio de WordPress.

Cómo agregar desplazamiento infinito a WordPress

La forma más fácil de implementar el desplazamiento infinito en su sitio es usar un complemento dedicado. Hay muchas herramientas que puede usar, pero en este tutorial usaremos AJAX Load More , desarrollado por Darren Cooney. Esta es una herramienta freemium que le permite agregar desplazamiento infinito a cualquier tienda de WooCommerce y sitio de WordPress.

Instalar y configurar AJAX Cargar más complemento

Primero, necesita instalar el complemento. Vaya a su Panel de administración de WP y navegue a Complementos> Agregar nuevo. Busque AJAX Load More y presione el botón Instalar ahora . Una vez que el complemento esté instalado, presione Activar .

Luego, navegue hasta AJAX Load More > Settings en la columna de la izquierda para configurar el complemento. Aquí puede especificar los parámetros predeterminados. Puede configurar su tipo de contenedor predeterminado, clases de contenedor, botón/estilo de carga y más.

Ahora que hemos instalado y configurado la herramienta, es hora de agregar desplazamiento infinito a su sitio de WordPress o WooCommerce.

Agregar desplazamiento infinito a WooCommerce

En esta sección, agregaremos la función de desplazamiento infinito a una tienda WooCommerce. El proceso para implementarlo en WordPress es muy similar y se describe a continuación. Si simplemente desea incluir desplazamiento infinito en WordPress, puede omitir esta parte y dirigirse a la sección Agregar desplazamiento infinito a las publicaciones de WordPress/Página de blog .

Paso 1: crear una plantilla de repetidor

Una plantilla define cómo se mostrarán sus productos en el front-end. Una plantilla repetidora recorre todos sus productos y los muestra de acuerdo con la plantilla guardada. Dado que este complemento utiliza la plantilla repetidora para mostrar productos, primero debe crear uno. En su Panel de administración de WP, vaya a AJAX Cargar más > Plantillas de repetidor.

Estamos interesados ​​en agregar un desplazamiento infinito a nuestra página de la tienda de WooCommerce, por lo que debemos reemplazar la plantilla de repetidor predeterminada con la plantilla de WooCommerce. La mayoría de los temas compatibles con WooCommerce utilizan el archivo content-product.php predeterminado para mostrar los productos. Solo necesita reemplazar la plantilla de repetidor predeterminada con la siguiente plantilla.

 <?php wc_get_template_part( 'contenido', 'producto' ); ?>

Alternativamente, puede copiar y pegar el código completo de la plantilla content-product.php en la sección de plantilla de repetidor. Puede usar su panel de control de administración o cualquier cliente FTP como FileZilla para acceder a la plantilla content-product.php . La plantilla se ubicará en wp-content\plugins\woocommerce\templates . Una vez que haya hecho eso, presione Guardar para guardar la plantilla de repetidor.

Nota: si esta plantilla no funciona, es posible que deba inspeccionar su tema para ver si está usando alguna forma modificada de la plantilla content-product.php .

Ahora que hemos creado nuestra plantilla de repetidor, pasemos al siguiente paso.

Paso 2: crea un código abreviado

En su panel de administración, vaya a AJAX Load More > Shortcode Builder para generar un shortcode. Aquí puede modificar la configuración de visualización y los parámetros de consulta, cada uno de los cuales agrega un parámetro al código abreviado. Este es un paso importante porque necesitará este código abreviado para mostrar sus productos más adelante.

Si no está familiarizado con los códigos cortos y cómo usarlos, consulte esta guía.

Configuración de pantalla

La sección Configuración de visualización contiene muchas opciones que puede configurar para cambiar la forma en que muestra las cosas en la parte delantera de su tienda. Puede cambiar el estilo de su botón/carga a un botón Cargar más o un icono de carga. También puede habilitar la opción de desplazamiento, para que los productos se carguen automáticamente a medida que el usuario se desplaza hacia abajo. Por otro lado, deshabilitar la opción de desplazamiento requerirá que el usuario presione el botón Cargar más para cargar más productos.

Parámetros de consulta

En la sección Parámetros de consulta , puede establecer la cantidad de publicaciones para cargar por solicitud de AJAX, seleccionar los tipos de publicación (publicación, medios, página de destino, etc.) que desea mostrar y más. Una vez que haya terminado con los parámetros, encontrará el shortcode generado en la sección de salida de shortcode en el extremo derecho. Copie ese shortcode ya que lo usará más adelante.

Dado que, de forma predeterminada, no hay ninguna opción para WooCommerce en la sección Tipo de publicación, debe agregar el parámetro woocommerce y eliminar el parámetro post_type manualmente. Para hacer esto, simplemente agregue woocommerce = “true” al código abreviado y elimine el post_type = “post” .

Al establecer el parámetro de woocommerce en verdadero, el complemento considerará automáticamente los parámetros relevantes del producto para mostrar los productos. Su código abreviado debería verse así:

 [ ajax_load_more woocommerce="true" container_type="div" posts_per_page="4" ]

Ahora que tiene su código abreviado final, usémoslo para agregar un desplazamiento infinito a su sitio de WooCommerce/WordPress.

Paso 3: agregue el código abreviado a Archive-Products.php

El archivo archive-product.php es la plantilla utilizada para mostrar los productos de WooCommerce en la página de la tienda. Colocará su shortcode en la plantilla para que los productos se carguen con el complemento AJAX Load More .

Antes de agregar el código abreviado, debe hacer una copia del archivo archive-product.php y colocarlo en el directorio wp-content\themes\your-theme(eg, astra)\woocommerce . Si el directorio de woocommerce no existe, créelo. La plantilla archive-product.php original se encuentra en wp-content\plugins\woocommerce\templates . Puede realizar estos cambios a través de su panel de control de administración o cliente FTP.

Tenga en cuenta que colocar el archivo archive-product.php en el directorio raíz del tema anulará la configuración original de la plantilla. Esto significa que al colocar el archivo archive-product.php en el directorio del tema, WooCommerce le dará mayor prioridad. Si el archivo está ubicado en el directorio de temas, lo leerá y no leerá el archivo original en el directorio de complementos.

Además, este es un procedimiento seguro porque el archivo original todavía está presente en el directorio de complementos, por lo que si algo sale mal con el archivo de clonación, puede eliminarlo y aún tener su archivo original en el directorio de complementos.

Ahora abra el archivo de plantilla copiado recientemente usando cualquier editor de texto. Busque la declaración condicional que se ve así, if(wc_get_loop_prop('total')){ } . Consulte la captura de pantalla a continuación.

Seleccione toda la declaración condicional y reemplácela con el siguiente código:

 // archivo-producto.php
si (wc_get_loop_prop('total')) {
   echo do_shortcode('[ajax_load_more woocommerce="true" container_type="div" posts_per_page="4"]');
}

Recuerde reemplazar el código abreviado con su código abreviado. Después de esto, guarde el archivo. Luego, navegue hasta el front-end, vaya a la página de su tienda y desplácese hacia abajo. ¡Voila! Verás tu pergamino infinito en acción.

Agregue desplazamiento infinito a las publicaciones de WordPress / página de blog

Agregar desplazamiento infinito a las publicaciones/páginas de blog de WordPress sigue un procedimiento similar al de WooCommerce, pero tiene algunas diferencias. Veamos cómo implementar el desplazamiento infinito en WordPress paso a paso.

Paso 1: crear una plantilla de repetidor

Para una página de blog, usaremos la plantilla content-blog.php como nuestra plantilla repetidora. Simplemente vaya al directorio de su sitio a través del panel de control de administración o un cliente FTP y navegue hasta wp-content\themes\your-theme(eg, astra)\template-parts . Allí encontrarás la plantilla content-blog.php .

Copie el código del archivo de plantilla y péguelo en la sección de plantilla de repetidor del complemento. Después de eso, guarde la plantilla de repetidor.

Paso 2: crea un código abreviado

Ahora necesitas crear un shortcode. Para eso, vaya a su panel de administración de WP y diríjase a AJAX Load More> Shortcode Builder. Elija la configuración de visualización y los parámetros de consulta para generar el código abreviado y, una vez que esté satisfecho con él, copie el código abreviado.

Paso 3: agregue el código abreviado a la página del blog

Si aún no tiene una página de blog, cree una nueva página y llámela Blog . Mientras edita la página, haga clic en el icono " +" en la esquina superior izquierda y aparecerá un cuadro de diálogo. Busque el bloque de shortcode y selecciónelo para agregarlo a su página.

Ahora pegue el código abreviado que copió en el paso anterior en el bloque de código abreviado y actualice la página.

¡Bravo! Acabas de agregar desplazamiento infinito a tu página de blog de WordPress. El proceso para agregarlo a cualquier otra publicación o página es exactamente el mismo.

Conclusión

Con todo, usar el desplazamiento infinito puede ser una buena solución para mejorar la navegación y brindar a los usuarios una mejor experiencia en su sitio. No es ningún secreto que la experiencia del usuario es clave para cualquier tipo de negocio. Mejora la participación del usuario y, como resultado, hace que los visitantes permanezcan más tiempo en su sitio, regresen con más frecuencia y aumenten las posibilidades de conversión.

Con desplazamiento infinito, el contenido se carga automáticamente cuando el usuario llega al final de la página. De esa forma, los usuarios pueden descubrir contenido más valioso sin tener que navegar entre varias páginas. Además, el scroll infinito hace más cómoda la navegación en dispositivos móviles y acelera el proceso de navegación.

Sin embargo, el desplazamiento infinito también tiene algunas desventajas, como un pie de página inalcanzable o el agotamiento de la memoria. Por lo tanto, debe sopesar los pros y los contras antes de decidir si implementar o no el desplazamiento infinito en su sitio. No hay elección correcta o incorrecta, todo se reduce a las necesidades de su negocio.

En este artículo, describimos cómo agregar desplazamiento infinito a WordPress y WooCommerce usando el complemento AJAX Load More . El proceso solo toma unos minutos, es gratuito y puede ayudarlo a mejorar la experiencia del usuario en su sitio.

Para obtener más herramientas para agregar desplazamiento infinito a su sitio, eche un vistazo a esta publicación con más complementos que puede usar.

¿Alguna vez ha intentado usar el desplazamiento infinito en su sitio web o tienda? ¿Cómo fue tu experiencia? ¡Háganos saber en los comentarios a continuación!