Ejecutar un sitio web con muchos datos, como una tienda en línea o un directorio inmobiliario, a menudo genera resultados de búsqueda desordenados.
Hemos notado que los visitantes tienen dificultades para encontrar artículos específicos que se ajusten a su presupuesto o plazo cuando hay demasiadas opciones.
Sin una forma de acotar estos resultados, los clientes potenciales a menudo se frustran y abandonan el sitio. Es como intentar encontrar un libro específico en una biblioteca que no está organizada por género o autor.
Agregar filtros de rango soluciona este problema al permitir a los usuarios deslizarse entre un valor mínimo y máximo, como el precio o las fechas. Sin embargo, descubrimos que la mayoría de las configuraciones predeterminadas de WordPress no ofrecen esta función, y agregarla generalmente requiere codificación compleja.
En este artículo, te mostraremos cómo crear filtros de rango en WordPress.
¿Por qué ofrecer filtros de rango a tus visitantes?
Antes de pasar al tutorial, hablemos de cómo los filtros de rango mejoran la experiencia del usuario en tu sitio.
Hemos visto que los visitantes que no pueden filtrar por precio o fecha a menudo abandonan su búsqueda rápidamente.
Imagina entrar en una zapatería y tener que mirar cada par, sin importar tu talla o presupuesto. Así es exactamente como se sienten tus visitantes cuando tienen que desplazarse por productos irrelevantes en tu sitio web.
Los filtros de rango actúan como un útil asistente de tienda que muestra inmediatamente los artículos que cumplen criterios específicos.
Descubrimos que esta pequeña adición mantiene a los visitantes interesados durante mucho más tiempo porque ven exactamente lo que pueden permitirse o necesitan.
Ya sea para filtrar un rango de precios de WooCommerce o para seleccionar fechas para una reserva, esta función ahorra tiempo.
Elimina el desorden y ayuda a tus clientes a tomar decisiones más rápidas, lo que a menudo se traduce en más ventas para ti.
Dicho esto, veamos cómo puedes agregar fácilmente un filtro de rango a tu sitio web de WordPress.
Agregar un filtro de rango en WordPress
La forma más fácil de agregar filtros de rango a tu sitio de WordPress es usando un plugin como WPFilters.
WPFilters es el mejor plugin de filtrado para WordPress que simplifica la clasificación de contenido. Puedes usarlo para dar a los visitantes un control preciso sobre lo que ven sin escribir ningún código.
Funciona perfectamente con populares plugins de comercio electrónico como WooCommerce y Easy Digital Downloads.
Usando el plugin, puedes crear todo tipo de filtros para etiquetas, categorías, campos personalizados y otros tipos de datos. La mejor parte es que WPFilters ofrece múltiples campos de datos para agregar filtros a tu sitio.
Lo que significa que puedes configurar fácilmente deslizadores de precios, rangos de fechas y filtros numéricos que se ven geniales en cualquier dispositivo.
Aquí tienes algunas cosas que puedes hacer con WPFilters:
- Filtrar por precio: Permite a los clientes establecer un presupuesto mínimo y máximo para sus compras.
- Filtrar por campos personalizados: Utiliza datos numéricos de tus publicaciones para crear deslizadores de rango específicos.
- Mejorar los resultados de búsqueda: Ayuda a los usuarios a encontrar exactamente lo que necesitan reduciendo significativamente las opciones.
- Personalizar la apariencia: Muestra el título del filtro, hazlo colapsable y organízalo horizontalmente.
Con esto, veamos cómo puedes usar WPFilters para crear un filtro de rango en tu sitio.
Paso 1: Instalar y activar WPFilters
Primero, deberás visitar el sitio web de SearchWP y registrarte para obtener una cuenta de WPFilters.
Una vez que lo hayas hecho, simplemente dirígete a tu área de cuenta de SearchWP y ve a la pestaña 'Descargas'.
A continuación, puedes hacer clic en el botón Descargar WPFilters y guardar los archivos del plugin en tu ordenador.
Mientras estás en la página de descargas, también te recomendamos copiar la clave de licencia, ya que la necesitarás para configurar el plugin.
Ahora, el siguiente paso es subir los archivos del plugin WPFilters a tu sitio de WordPress e instalar el plugin. Si necesitas ayuda con esto, consulta esta guía sobre cómo instalar un plugin de WordPress.
Después de activar el plugin, verás el asistente de configuración de WPFilters. Haz clic en el botón 'Empezar' y sigue las instrucciones en pantalla.
Paso 2: Añadir un Elemento de Filtro de Rango
Ahora que el plugin está activo, es hora de crear tu primer filtro de rango para WordPress.
Para empezar, dirígete a WPFilters » Elementos desde el panel de WordPress y simplemente haz clic en el botón 'Añadir nuevo'.
Después de eso, puedes empezar introduciendo un nombre para tu filtro en la parte superior. Puedes usar un nombre específico que te ayude a mantenerte organizado cuando haya varios filtros en un sitio.
A continuación, selecciona la opción Deslizador en la sección Campos de filtro. Este elemento específico crea la barra deslizante que tus visitantes usarán para seleccionar sus valores mínimo y máximo.
Una vez que hayas seleccionado el tipo de filtro, desplázate hacia abajo hasta la sección Origen de datos. Aquí, puedes elegir exactamente qué datos determinan los valores del rango.
Por ejemplo, si tienes una tienda, puedes seleccionar el precio del producto o el total de artículos en stock como fuente.
Después de seleccionar tus datos, puedes personalizar el aspecto del deslizador para que coincida con el diseño de tu sitio.
Simplemente desplázate hacia abajo hasta la sección 'Contenedor' para ajustar la configuración de visualización. Por ejemplo, puedes mostrar un título de etiqueta para el filtro.
Cuando estés satisfecho con la apariencia, desplázate hasta la parte superior de la página.
Luego, haz clic en el botón Guardar para almacenar tus cambios.
Paso 3: Añadir el Filtro de Rango a tu Sitio
La mejor parte de usar WPFilters es que puedes incrustar tus filtros en cualquier lugar de tu sitio con facilidad.
Para empezar, simplemente haz clic en el botón 'Incrustar' en la página Elemento.
A continuación, verás una ventana emergente con diferentes opciones.
Puedes elegir entre el bloque de Gutenberg, un shortcode o código PHP si eres desarrollador.
Además de eso, también puedes añadir manualmente el bloque de Gutenberg de WPFilters a la barra lateral y otras áreas de tu sitio web.
Para este tutorial, añadiremos el filtro de rango a la barra lateral de tu sitio de demostración de WooCommerce.
Para hacerlo, simplemente dirígete a Apariencia » Widgets desde tu panel de WordPress. Ten en cuenta que este paso puede diferir dependiendo del tema de WordPress que estés utilizando.
A continuación, desplázate hacia abajo hasta la sección de la barra lateral y haz clic en el signo '+' para añadir el bloque de widget Elemento WPFilters.
Ahora, necesitarás seleccionar el filtro de rango que creaste en el panel de configuración de la derecha.
Simplemente haga clic en el menú desplegable 'Seleccionar elemento' y elija su filtro.
Cuando hayas terminado, haz clic en el botón Actualizar en la parte superior.
Desde aquí, puedes visitar tu sitio web para ver el filtro de rango en acción.
Al deslizar el control deslizante, tus visitantes pueden filtrar productos por precio.
Preguntas frecuentes sobre la creación de filtros de rango en WordPress
Aquí tienes algunas preguntas comunes que recibimos sobre la configuración de filtros de rango en WordPress.
1. ¿Qué tipos de datos puedo filtrar con un control deslizante de rango?
Puedes filtrar casi cualquier dato numérico. A menudo usamos controles deslizantes de rango para precios de productos, fechas de reserva o medidas como peso y tamaño en sitios de directorios.
2. ¿Funciona esto con productos de WooCommerce?
Sí, se integra perfectamente con WooCommerce. Descubrimos que agregar un control deslizante de rango de precios ayuda a los clientes a encontrar productos asequibles mucho más rápido, lo que puede aumentar las tasas de conversión.
3. ¿Puedo agregar varios filtros de rango a una página?
Absolutamente. Puedes apilar filtros para permitir a los usuarios ordenar por precio y calificación de usuario simultáneamente. Esto crea una experiencia de búsqueda muy precisa para tus visitantes.
Esperamos que este artículo te haya ayudado a aprender cómo crear filtros de rango en WordPress. También puedes consultar nuestras guías sobre cómo filtrar productos de WooCommerce por etiquetas y cómo filtrar productos de WooCommerce por categoría.
¿Listo para agregar filtros potentes a tu tienda en línea? Puedes comenzar con WPFilters aquí.
