Blog de SearchWP

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

Cómo agregar un filtro de cuadro de búsqueda a WooCommerce

Gestionar una tienda WooCommerce con muchos productos puede dificultar que los clientes encuentren exactamente lo que necesitan.

Por ejemplo, imagina que tus visitantes llegan a la página de la tienda, navegan por docenas de productos y se van sin comprar nada simplemente porque no pudieron encontrar el artículo adecuado lo suficientemente rápido.

La mejor solución para esto es agregar un filtro de cuadro de búsqueda directamente a tu página de tienda. Esto permite a los compradores escribir una palabra clave y filtrar instantáneamente la lista de productos en la página de la tienda, sin ser llevados a una página de resultados separada.

En este artículo, te mostraremos cómo agregar un filtro de cuadro de búsqueda a una lista de productos de WooCommerce.

¿Por qué agregar un filtro de cuadro de búsqueda a tu tienda WooCommerce?

Por defecto, WooCommerce no incluye una forma para que los clientes busquen y filtren productos directamente en la página de la tienda.

La búsqueda integrada de WordPress envía a los visitantes a una página de resultados de búsqueda separada. Esto interrumpe la experiencia de compra y aleja a los clientes de tu tienda.

Un filtro de cuadro de búsqueda soluciona esto al permitir que los clientes escriban una palabra clave y que la lista de productos se reduzca en tiempo real, justo donde están. No hay recarga de página ni redirección.

Piensa en una tienda de ropa con 300 productos. Sin un filtro, un cliente que busca una "sudadera negra" tiene que desplazarse por todos los artículos para encontrarla. Con un filtro de cuadro de búsqueda, escriben la palabra clave y ven solo los productos relevantes en segundos.

Esto mantiene a los compradores concentrados, reduce la frustración y facilita la búsqueda y compra de productos. Para los propietarios de tiendas, esto generalmente significa tasas de conversión más altas y menos sesiones abandonadas.

Dicho esto, veamos cómo puedes agregar esto a tu tienda sin necesidad de codificación.

Cómo mostrar un filtro de cuadro de búsqueda para WooCommerce

La forma más fácil de agregar un filtro de cuadro de búsqueda a tu lista de productos de WooCommerce es usando un plugin como WPFilters.

WPFilters - El mejor plugin de filtrado de WordPress

WPFilters es el mejor plugin de filtrado para WordPress que te permite agregar filtros estilo Amazon a tu tienda WooCommerce sin escribir una sola línea de código.

Está construido por el mismo equipo detrás de SearchWP, por lo que sabemos que funciona de manera confiable y maneja tus datos de productos de manera eficiente.

Con WPFilters, puedes crear un cuadro de búsqueda dedicado que filtra tu lista de productos en tiempo real. También puedes combinarlo con otros filtros como deslizadores de precios, casillas de verificación de categorías o filtros de etiquetas para dar a los clientes control total sobre su experiencia de compra.

Algunas de las cosas que puedes hacer con WPFilters:

  • Agrega un cuadro de búsqueda de palabras clave que filtre productos instantáneamente a medida que los clientes escriben
  • Crea deslizadores de rango de precios, casillas de verificación de categorías y filtros de etiquetas
  • Muestra filtros usando el bloque de Gutenberg, shortcode o código PHP
  • Personaliza la configuración de apariencia, como mostrar un título o hacerlo colapsable

Ahora, veamos cómo puedes usar WPFilters para agregar un filtro de cuadro de búsqueda a tu tienda WooCommerce.

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 tengas una cuenta, dirígete a la pestaña Descargas en tu panel.

Descargar archivos zip del plugin WPFilters

Aquí, haga clic en el botón Descargar WPFilters para guardar el archivo ZIP del plugin en su computadora. También recomendamos copiar su clave de licencia de esta página, ya que la necesitará en breve.

A continuación, debe cargar el archivo del plugin en su sitio de WordPress e instalarlo. Si no está seguro de cómo hacerlo, consulte esta guía sobre cómo instalar un plugin de WordPress.

Después de activar el plugin, aparecerá el asistente de configuración. Haga clic en el botón ‘Empezar’ y siga las instrucciones en pantalla para finalizar la configuración.

Asistente de configuración de WPFilters

Paso 2: Crear un Nuevo Elemento de Filtro de Búsqueda

Ahora que el plugin está activo, es hora de crear su filtro de cuadro de búsqueda.

Para empezar, simplemente navegue a WPFilters » Elementos desde su panel de WordPress.

Luego, haga clic en el botón Añadir nuevo para crear un elemento de filtro en blanco.

Añadir un nuevo filtro

Continúe y ponga un nombre a su filtro en la parte superior de la página. Algo como “Filtro de Búsqueda de Producto o Búsqueda por Palabra Clave” funciona bien.

A continuación, mire la sección Tipo de Campo y seleccione la opción Búsqueda.

Seleccionar opción de filtro de búsqueda

Esto crea un cuadro de texto en vivo en el que los clientes pueden escribir para filtrar la lista de productos. Continúe y haga clic en el botón Guardar en la esquina superior derecha.

Ahora verá una vista previa del cuadro de búsqueda en el panel de la derecha.

Paso 3: Personalizar la Configuración del Cuadro de Búsqueda

A continuación, puede personalizar cómo se ve y se comporta el cuadro de búsqueda para sus visitantes.

Desplácese hacia abajo hasta la sección Contenedor. Aquí, puede activar la opción Mostrar título para mostrar una etiqueta encima del cuadro de búsqueda.

También puede habilitar la opción Colapsable si desea que los visitantes puedan ocultar el filtro.

Cambiar la configuración del contenedor para el cuadro de búsqueda

Una vez que esté satisfecho con la configuración, desplácese hacia arriba y haga clic en el botón Guardar.

Paso 4: Añadir el Filtro de Búsqueda a su Tienda WooCommerce

Con su filtro de búsqueda listo, el último paso es colocarlo donde los clientes puedan encontrarlo y usarlo.

WPFilters le ofrece algunas formas diferentes de hacerlo.

Para empezar, haga clic en el botón Incrustar en la esquina superior derecha de la página del elemento.

Haga clic en el botón de filtro incrustado

Aparecerá una ventana emergente con varias opciones de incrustación.

Estas incluyen un bloque de Gutenberg, un shortcode o un fragmento de PHP para desarrolladores.

Incrusta filtros de búsqueda

Además, también puede elegir si seleccionar una página existente o crear una nueva página.

Otra opción popular es colocar el cuadro de búsqueda en la barra lateral de su página de tienda. Esto mantiene el filtro visible en todo momento mientras los clientes navegan por los productos.

Para hacer esto, diríjase a Apariencia » Widgets desde su panel de WordPress. Tenga en cuenta que este paso puede verse diferente según su tema de WordPress.

Encuentre el área de la barra lateral utilizada por su página de tienda y haga clic en el botón + para añadir un nuevo bloque. Busque el widget Elemento WPFilters.

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

Una vez que lo agregue, seleccione su filtro de búsqueda por palabra clave en el menú desplegable Configuración del Elemento WPFilters en el panel de Configuración.

Haga clic en el botón Actualizar cuando haya terminado.

Seleccione su filtro de búsqueda de palabras clave

Ahora, visite su página de tienda de WooCommerce para ver el filtro de cuadro de búsqueda en acción.

Cuando un cliente escribe una palabra clave en el cuadro, la lista de productos se filtrará en tiempo real para mostrar solo los artículos coincidentes.

Ver filtro de búsqueda de palabras clave

Preguntas frecuentes sobre cómo agregar un filtro de cuadro de búsqueda a WooCommerce

¿Funciona con productos variables?

Sí, lo hace. WPFilters funciona con todos los tipos de productos estándar de WooCommerce, incluidos los productos simples, variables y agrupados. El cuadro de búsqueda coincidirá con el título y la descripción del producto, independientemente del tipo de producto.

¿Puedo combinar esto con otros filtros como precio o categoría?

Absolutamente. Puede crear varios elementos de filtro y colocarlos juntos en la barra lateral o encima de la cuadrícula de productos. Por ejemplo, puede apilar el cuadro de búsqueda con un filtro de casillas de verificación de categoría y un control deslizante de rango de precios para que los clientes puedan reducir los resultados desde varios ángulos a la vez.

¿Necesito tener SearchWP instalado para usar WPFilters?

No, WPFilters funciona como un plugin independiente. SearchWP y WPFilters son productos separados creados por el mismo equipo, por lo que se integran bien juntos, pero ninguno requiere el otro para funcionar.

Esperamos que este artículo le haya ayudado a aprender cómo agregar un filtro de cuadro de búsqueda a su lista de productos de WooCommerce. También puede consultar nuestras guías sobre cómo filtrar por taxonomías múltiples en WordPress y cómo agregar búsqueda de autocompletado en vivo a WordPress.

¿Listo para ofrecer a sus clientes una forma más rápida de encontrar productos? Puede comenzar con WPFilters aquí.

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.

Obtén SearchWP Ahora
Icono de múltiples motores de búsqueda