Comprar en línea debería ser fácil. Pero cuando una tienda tiene docenas o cientos de productos amontonados en una sola página, encontrar el artículo adecuado se parece más a rebuscar en un montón de ropa en un mercadillo que a navegar por una tienda bien organizada.
Ese es un problema con el que se encuentran muchos propietarios de tiendas WooCommerce. Los productos están todos ahí, la tienda se ve genial, pero los clientes aún no encuentran lo que necesitan lo suficientemente rápido.
Y cuando eso sucede, se van. Un filtro desplegable soluciona esto al permitir a los compradores reducir los productos por categoría, tamaño, color, precio o cualquier otro atributo con un solo clic.
En este tutorial, te mostraremos cómo crear un filtro desplegable para productos de WooCommerce.
Por qué tu tienda WooCommerce necesita un filtro desplegable
Imagina entrar en una tienda de ropa donde nada está organizado. Camisas, pantalones, zapatos y chaquetas están todos mezclados en la misma percha. Buscas una chaqueta azul de talla mediana, pero la única forma de encontrarla es revisar cada artículo uno por uno. La mayoría de la gente saldría de inmediato.
Eso es exactamente lo que sucede en una tienda WooCommerce sin filtros desplegables.
Cuando los clientes llegan a la página de tu tienda y ven una pared de productos sin forma de ordenarlos, la frustración aparece rápidamente.
No quieren pasar por diez páginas de artículos solo para encontrar lo que vinieron a buscar. La mayoría no se molestará. Cerrarán la pestaña y comprarán a un competidor cuya tienda sea más fácil de navegar.
Hemos visto esto suceder en tiendas que tienen excelentes productos pero un filtrado deficiente. El tráfico está ahí, pero las ventas no coinciden. Los clientes llegan a la página de la tienda y se van sin comprar nada. Un filtro desplegable suele ser la pieza que falta.
Esto es lo que hace que los filtros desplegables sean una solución tan práctica. Brindan a los compradores una forma limpia y familiar de reducir los resultados.
En lugar de desplazarse por 200 productos, un cliente puede abrir un desplegable, elegir "Grande", "Rojo" o "Menos de 50 €" y ver instantáneamente solo los productos que coinciden. Es el tipo de experiencia que mantiene a las personas en tu sitio por más tiempo y las acerca al pago.
Sin esto, estás dejando muchas ventas sobre la mesa. Y la buena noticia es que configurarlo no requiere un desarrollador ni ningún conocimiento técnico. Veamos cómo puedes agregar fácilmente un filtro desplegable a tu tienda WooCommerce.
Cómo mostrar un filtro desplegable en WooCommerce
La forma más fácil de agregar un filtro desplegable a WooCommerce es usando un plugin como WPFilters.
WPFilters es el mejor plugin de filtrado para WordPress que te permite agregar filtros al estilo de 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 producto de manera eficiente.
Con WPFilters, puedes crear menús desplegables que permiten a los clientes filtrar productos por categoría, etiqueta, atributo de producto o cualquier taxonomía personalizada. También puedes combinar filtros desplegables con otros tipos de filtros como deslizadores de precios, casillas de verificación o un cuadro de búsqueda por palabras clave.
Algunas de las cosas que puedes hacer con WPFilters:
- Crea filtros desplegables para categorías de productos, etiquetas, atributos y campos personalizados
- Muestra varios filtros juntos en la barra lateral o encima de la cuadrícula de productos
- Personaliza etiquetas, texto de marcador de posición y opciones de visualización sin tocar el código
- Filtra resultados en tiempo real sin recargar la página
Ahora, veamos cómo configurar un filtro desplegable en tu tienda WooCommerce.
Paso 1: Instalar y activar WPFilters
Lo primero que deberás hacer es dirigirte al sitio web de SearchWP y registrarte para obtener una cuenta de WPFilters. Una vez que hayas creado tu cuenta, inicia sesión y haz clic en la pestaña Descargas en el panel de tu cuenta.
Desde allí, haz clic en el botón Descargar WPFilters para guardar el archivo ZIP del plugin en tu ordenador. También recomendamos copiar tu clave de licencia de esta página, ya que la necesitarás durante la configuración.
A continuación, deberás cargar e instalar el plugin en tu sitio de WordPress. Si nunca has hecho esto antes, puedes seguir esta guía para principiantes sobre cómo instalar un plugin de WordPress.
Una vez que el plugin esté activo, el asistente de configuración de WPFilters aparecerá en tu pantalla. Haz clic en el botón ‘Empezar’ .
Ahora podemos pasar a crear tu primer filtro desplegable.
Paso 2: Añadir un Nuevo Elemento de Filtro
Ahora que WPFilters está en funcionamiento, es hora de crear tu filtro desplegable.
Para empezar, navega a WPFilters » Elementos desde tu panel de WordPress y haz clic en el botón Añadir Nuevo .
En la parte superior de la pantalla, verás un campo donde puedes darle un nombre a tu filtro.
Es una buena idea usar algo descriptivo aquí, como “Categorías de Productos” o “Filtrar por Etiquetas”, especialmente si planeas añadir más filtros en el futuro. Un nombre claro hace que sea mucho más fácil mantenerse organizado.
A continuación, puedes mirar la sección Campos de Filtro justo debajo del nombre. Aquí es donde eliges cómo se verá y se comportará el filtro en tu tienda.
WPFilters te ofrece varias opciones aquí, incluyendo casillas de verificación, botones de radio, deslizadores y más.
Dado que estamos creando un filtro desplegable, selecciona la opción Desplegable .
Notarás que una vista previa en vivo del filtro aparece en el panel derecho tan pronto como guardas tu configuración.
Paso 3: Conectar el Filtro a una Fuente de Datos de WooCommerce
Con el tipo de filtro desplegable seleccionado, el siguiente paso es indicar a WPFilters de dónde obtener su información. Esto es lo que hace que el filtro sea realmente útil para tus compradores.
Desplácese hacia abajo hasta la sección Origen de datos y haga clic en el menú desplegable. Verá una lista de orígenes de datos disponibles para elegir. Como estamos trabajando con una tienda WooCommerce, querrá elegir una opción específica de WooCommerce de la lista.
Por ejemplo, puede seleccionar Categorías de productos si desea que los clientes filtren por categoría, o Etiquetas de productos si ha etiquetado sus productos.
También puede elegir atributos de producto específicos como color, tamaño o material si los ha configurado en WooCommerce.
Una vez que haya hecho eso, WPFilters extraerá automáticamente los datos relevantes y los conectará a su filtro desplegable.
Paso 4: Personalizar la configuración del filtro desplegable
Ahora que su filtro está conectado a un origen de datos, es hora de que tenga el aspecto y la sensación adecuados para su tienda. WPFilters le ofrece un buen conjunto de opciones de personalización sin abrumarle con configuraciones.
Puede desplazarse primero a la sección Contenedor. Aquí es donde controla el comportamiento general del filtro.
Puede habilitar la opción Mostrar título para que los visitantes sepan exactamente para qué es el desplegable.
También verá una opción para hacer que el filtro sea Colapsable. Esto es útil si planea agregar varios filtros a su barra lateral, ya que mantiene las cosas ordenadas y evita que la página se sienta demasiado abarrotada.
También hay una opción Horizontal si prefiere mostrar las opciones de filtro una al lado de la otra en lugar de apiladas verticalmente.
A continuación, desplácese un poco más hacia abajo hasta la sección Elementos. Aquí puede habilitar opciones como Recuento de elementos, que muestra a los compradores cuántos productos están disponibles para cada opción en el desplegable.
Una vez que esté satisfecho con el aspecto de todo en la vista previa en vivo de la derecha, desplácese hacia arriba y haga clic en el botón Guardar para almacenar sus cambios.
Paso 5: Agregar el filtro desplegable a su tienda WooCommerce
Con su filtro desplegable guardado, es hora de colocarlo en un lugar donde sus clientes puedan usarlo. WPFilters le ofrece varias formas de hacerlo.
1. Agregar el filtro desplegable a su página de tienda
La página de la tienda es uno de los mejores lugares para agregar un filtro desplegable, ya que es donde la mayoría de sus clientes navegarán. Para comenzar, haga clic en el botón Incrustar en la esquina superior derecha de la página del elemento del filtro.
Aparecerá una ventana emergente con algunas opciones de incrustación. Puede elegir entre un bloque de Gutenberg, un shortcode o código PHP. Para la mayoría de los propietarios de tiendas, el bloque de Gutenberg es la opción más fácil de usar.
Seleccione la opción Bloque de Gutenberg y luego haga clic en Seleccionar página existente.
Desde allí, escribe el nombre de tu página de tienda y selecciónala en el menú desplegable. Una vez que hagas clic en el botón Empezar , WPFilters cargará tu página de tienda en el editor de contenido de WordPress con el bloque de filtros ya añadido.
Cuando estés satisfecho con el resultado, haz clic en el botón Actualizar para guardar tus cambios.
2. Añadir el filtro desplegable a tu barra lateral (Recomendado)
Añadir el filtro a tu barra lateral es otra gran opción, y una que recomendamos para la mayoría de los propietarios de tiendas WooCommerce. Esto se debe a que si quieres que permanezca visible mientras los clientes navegan por diferentes páginas de tu tienda.
Para ello, ve a Apariencia » Widgets desde tu panel de WordPress. Ten en cuenta que este paso puede parecer ligeramente diferente dependiendo del tema de WordPress que estés utilizando.
Busca la sección de la barra lateral de tu tienda WooCommerce y haz clic en el botón + para añadir un nuevo bloque. Busca el bloque de widget Elemento WPFilters y añádelo.
Una vez añadido el bloque, mira el panel de configuración de la derecha.
Simplemente haz clic en el menú desplegable Seleccionar Elemento y elige el filtro desplegable que acabas de crear. Cuando hayas terminado, haz clic en el botón Actualizar para guardarlo todo.
Paso 6: Prueba tu filtro desplegable
Ahora que el filtro está activo en tu tienda, es importante asegurarse de que todo funciona como debería. Probarlo solo lleva un minuto, pero te ahorra problemas para los clientes más adelante.
Visita tu tienda WooCommerce en el frontend de tu sitio. Dirígete a la página o barra lateral donde añadiste el filtro desplegable y echa un vistazo a cómo aparece a tus visitantes.
Desde aquí, puedes hacer clic en el desplegable y seleccionar una de las opciones disponibles. Por ejemplo, si configuraste el filtro para ordenar por etiquetas de producto, haz clic y elige una etiqueta de la lista.
Los productos de la página deberían actualizarse inmediatamente para mostrar solo los artículos que coinciden con tu selección.
Si el filtro funciona correctamente, verás que la cuadrícula de productos se reduce a solo los resultados relevantes.
Preguntas frecuentes sobre filtros desplegables para WooCommerce
¿Puedo añadir varios filtros desplegables a la vez?
Sí. Puedes crear tantos elementos de filtro como necesites y colocarlos juntos en la misma ubicación. Por ejemplo, podrías apilar un desplegable "Filtrar por categoría" con un desplegable "Filtrar por color" y un control deslizante de rango de precios para que los clientes puedan acotar los resultados desde varios ángulos a la vez.
¿El filtro desplegable funciona con variaciones de producto?
Sí. WPFilters funciona con todos los tipos de productos estándar de WooCommerce, incluidos los productos variables. Si filtras por un atributo de producto como Color o Talla, WPFilters mostrará los productos que tengan opciones de variación coincidentes.
¿El filtrado se realiza al instante o la página se recarga?
El filtrado se realiza en tiempo real sin recargar la página. Cuando un cliente selecciona una opción del menú desplegable, la lista de productos se actualiza inmediatamente, lo que mantiene la experiencia de compra rápida y fluida.
¿Puedo usar esto con una taxonomía personalizada que agregué yo mismo?
Sí. WPFilters admite taxonomías personalizadas además de las categorías y atributos de productos integrados de WooCommerce. Si ha registrado una taxonomía personalizada para sus productos, aparecerá como una opción en el menú desplegable Origen de datos al configurar el filtro.
Esperamos que este artículo le haya ayudado a aprender cómo crear un filtro desplegable para productos de WooCommerce. También puede consultar nuestras guías sobre cómo agregar un filtro de cuadro de búsqueda a una lista de productos de WooCommerce y cómo crear filtros de rango en WordPress.
¿Listo para ofrecer a sus clientes una mejor manera de encontrar productos? Puede comenzar con WPFilters aquí.
