Blog de SearchWP

Tutoriales, consejos y recursos de WordPress para ayudarte a hacer crecer tu negocio

Cómo añadir un botón de restablecer filtro en WordPress

Si has visitado tiendas en línea donde has hecho clic en un montón de opciones para reducir productos, se siente genial hasta que te das cuenta de que seleccionaste la talla o el color incorrectos y no puedes averiguar cómo deshacerlo.

La página de resultados de búsqueda se queda atascada sin mostrar nada, y no hay una forma fácil de borrar la selección. Esto suele obligar a los usuarios a pulsar el botón de retroceder o a actualizar la página, lo cual es muy molesto.

La mejor solución es mostrar exactamente qué filtros están activos y dar a los usuarios un simple botón para restablecer todo.

En esta guía, te mostraremos cómo añadir un botón de restablecimiento de filtros en WordPress.

¿Por qué tus visitantes se quedan atascados sin un botón de restablecimiento?

Imagina caminar por el pasillo de un supermercado y poner artículos en tu carrito, pero luego darte cuenta de que no puedes sacarlos.

Eso es exactamente lo que siente un usuario cuando selecciona un filtro como "Rojo" o "Pequeño" y no puede desmarcarlo fácilmente.

Hemos notado que cuando los usuarios seleccionan varias opciones en un sitio web, a menudo olvidan en qué hicieron clic hace unos momentos.

Terminan mirando un mensaje de "No se encontraron resultados" y se sienten frustrados porque no saben cómo solucionarlo.

Esta confusión mata las ventas y hace que la gente abandone los sitios que gestionamos. Al mostrar los filtros activos, básicamente estás dando a tus visitantes un mapa para que sepan exactamente dónde están.

Añadir un botón de restablecimiento es como pulsar un interruptor de "empezar de nuevo". Devuelve el control al usuario para que pueda navegar por tu contenido libremente sin el miedo a quedarse atascado en un callejón sin salida.

Dicho esto, veamos una forma rápida y sencilla de añadir un botón de restablecimiento a WordPress.

Mostrar un botón de restablecimiento de filtros en WordPress

La forma más fácil de permitir a los usuarios controlar su experiencia de búsqueda es utilizando un plugin como WPFilters.

WPFilters - El mejor plugin de filtrado de WordPress

WPFilters es el mejor plugin de filtrado para WordPress que hace que la gestión de los resultados de búsqueda sea sencilla.

Nos encanta usarlo porque te permite añadir herramientas de navegación útiles sin escribir ningún código. Normalmente, necesitarías contratar a un desarrollador para mostrar los filtros activos o añadir un botón de borrado.

Pero WPFilters se encarga de estas tareas complejas automáticamente para que puedas centrarte en tu contenido. Está construido por el mismo equipo detrás de SearchWP, por lo que confiamos en que ofrecerá resultados precisos cada vez.

Aquí tienes algunas cosas que puedes hacer con WPFilters:

  • Mostrar filtros activos: Muestra una lista de los criterios seleccionados para que los usuarios sepan exactamente lo que están viendo.
  • Restablecimiento con un clic: Añade un botón simple que permite a los visitantes borrar todos los filtros al instante.
  • Varios tipos de filtros: Elige entre casillas de verificación, menús desplegables, deslizadores de rango y botones de radio para adaptarlos a tu diseño.
  • Integración fácil: Coloca tus filtros en cualquier lugar de tu sitio usando el editor de bloques.

Con eso, veamos cómo configurar los filtros activos y un botón de restablecimiento en tu sitio web.

Paso 1: Instalar y activar WPFilters

Primero, necesitarás visitar el sitio web de SearchWP para obtener el plugin WPFilters.

Cuando hayas terminado, simplemente ve a tu panel de SearchWP y haz clic en la pestaña Descargas.

Descargar archivos zip del plugin WPFilters

Una vez que llegues a la pestaña Descargas, presiona el botón Descargar WPFilters y guarda el archivo ZIP del plugin en tu ordenador.

También deberías copiar tu clave de licencia en la parte inferior izquierda, ya que la necesitarás más adelante en el proceso de configuración.

A continuación, necesitarás instalar y activar WPFilters en tu sitio web de WordPress. Si no estás seguro de cómo hacerlo, consulta esta guía para principiantes sobre cómo instalar un plugin de WordPress.

Tras la activación, aparecerá la pantalla de bienvenida junto con el asistente de configuración. Simplemente haz clic en el botón ‘Empezar’ y sigue las instrucciones en pantalla.

Asistente de configuración de WPFilters

Paso 2: Crear un nuevo elemento de filtro de reinicio

Para empezar, necesitas crear un nuevo elemento que contendrá todas tus diferentes opciones de filtrado.

Simplemente navega a WPFilters » Elementos desde tu panel de WordPress y haz clic en el botón Añadir nuevo.

Añadir un nuevo filtro

A continuación, puedes escribir un título para tu conjunto de filtros en el campo proporcionado en la parte superior.

Desde aquí, tendrás que elegir el tipo específico de filtro que deseas mostrar. Continúa y elige la opción Reinicio en la sección Tipo de filtro.

Seleccionar botón de restablecimiento

Después de eso, puedes desplazarte hacia abajo hasta la sección Contenedor.

Aquí verás opciones para mostrar el título del filtro y hacerlo colapsable.

Ajustes del contenedor del botón de restablecimiento

Cuando hayas terminado, desplázate hasta la parte superior.

Desde aquí, simplemente haz clic en el botón Guardar para almacenar tus cambios.

Guardar el botón de restablecimiento

Paso 4: Incrustar el botón de reinicio en WordPress

Ahora que has creado el botón de reinicio, el último paso es añadirlo a tu sitio web donde has colocado otros filtros.

La mejor parte de usar WPFilters es que puedes incrustar fácilmente el botón de reinicio en cualquier lugar, ya sea una página específica o el área de widgets.

Si deseas añadir el botón de reinicio de filtro a una página específica, simplemente haz clic en el botón Incrustar en el editor de Elementos.

Incrustar el botón de restablecimiento

A continuación, se abrirá una nueva ventana emergente con diferentes opciones para añadir el elemento de filtro.

Por ejemplo, puedes elegir entre un bloque de Gutenberg, shortcode y código PHP. Después de eso, puedes colocar el filtro en una página nueva o en una página existente.

Incrusta filtros de búsqueda

Además de eso, también puedes incrustar el filtro manualmente en un área de widgets de tu sitio, como la barra lateral.

Para este tutorial, añadiremos el botón de reinicio a la barra lateral de nuestra tienda online de demostración, donde hay otros filtros también.

Para hacerlo, simplemente dirígete a Apariencia » Widgets desde tu panel de WordPress. Algo importante a recordar es que este paso puede diferir dependiendo del tema de WordPress que estés utilizando.

A continuación, desplácese hasta la sección de la barra lateral y haga clic en el signo '+' para añadir el bloque de widget Elemento WPFilters.

Añadir bloque de widget de elemento WPFilters a la barra lateral de WooCommerce

Una vez hecho eso, necesitarás seleccionar el filtro de reinicio que creaste en el panel de configuración de la derecha.

Simplemente haga clic en el menú desplegable 'Seleccionar elemento' y elija su filtro.

Elegir filtro de botón de restablecimiento

Después de eso, puedes hacer clic en el botón Actualizar para guardar tus cambios.

El siguiente paso es visitar tu sitio web y probar el filtro del botón de reinicio.

Por ejemplo, así es como funciona en nuestro sitio de demostración:

Vista previa del botón de restablecimiento de filtro

Como puedes ver, al pulsar el botón de reinicio de filtros se eliminan todos los filtros seleccionados. Esta es una excelente manera de devolver rápidamente todo a la configuración predeterminada con un solo clic.

Preguntas frecuentes sobre Restablecer filtros en WordPress

Aquí tienes algunas preguntas comunes que nuestros usuarios hacen sobre la gestión de filtros en sus sitios de WordPress.

¿Puedo personalizar la apariencia del botón de restablecimiento?

Sí, puedes cambiar la apariencia del botón para que coincida con tu marca. WPFilters está diseñado para funcionar automáticamente bien con tu tema de WordPress activo. Si deseas colores o fuentes específicos, también puedes usar CSS personalizado.

2. ¿Funciona esto con productos de WooCommerce?

Sí, estas funciones funcionan perfectamente con WooCommerce. Hemos utilizado WPFilters en muchas tiendas en línea para ayudar a los compradores a navegar por categorías y etiquetas de productos.

Garantiza que los clientes puedan borrar fácilmente sus selecciones de talla o color sin recargar la página.

¿Necesito escribir código para añadir estas funciones?

No, no necesitas escribir ningún código. Como mostramos en esta guía, WPFilters te permite añadir filtros activos y botones de restablecimiento usando un bloque sencillo.

Esto te ahorra el coste y el tiempo de contratar a un desarrollador para que cree estas funciones por ti.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar filtros activos y añadir un botón de restablecimiento en WordPress. También puedes consultar nuestra guía sobre cómo añadir una barra de búsqueda a tu menú de navegación y cómo excluir páginas específicas de los resultados de búsqueda.

Si estás listo para mejorar la navegación de tu sitio, puedes empezar con WPFilters aquí.

avatar del autor
Aazim Akhtar

Cree hoy mismo una mejor experiencia de búsqueda en WordPress

No vuelva a perder visitantes por resultados de búsqueda inútiles. SearchWP facilita la creación de su propia búsqueda inteligente en WordPress.

Get SearchWP Now
Icono de múltiples motores de búsqueda