Los compradores que desean filtrar productos de WooCommerce por color se topan con la misma pared en la mayoría de las tiendas. Aterrizan en la página de la tienda, ven una cuadrícula mixta de todos los colores disponibles y no tienen forma de reducirla sin hacer clic en cada producto individual.
WooCommerce no incluye un filtro de color para la página de la tienda de forma nativa. Sin él, la cuadrícula de productos muestra todo a la vez, y un cliente que busca un color específico tiene que desplazarse por cada listado para encontrarlo.
Un filtro de color soluciona esto al permitir que los compradores hagan clic en un color y vean instantáneamente solo los productos que coinciden. Hemos visto que esta única adición mantiene a los clientes en la página por más tiempo y reduce la frustración que los envía a un competidor.
En este artículo, te mostraremos cómo agregar un filtro de color a tu tienda WooCommerce sin escribir ningún código.
¿Por qué agregar un filtro de color a tu tienda WooCommerce?
Según nuestra experiencia, las tiendas que venden productos en varios colores pierden más ventas debido a este problema exacto. Un comprador con un color específico en mente se rinde cuando la cuadrícula lo obliga a buscarlo.
Piénsalo como una tienda de ropa donde cada camisa, independientemente del color, cuelga en la misma percha sin forma de clasificarla. Nadie quiere revisar cien opciones mezcladas para encontrar la única camisa roja por la que entró.
Esto es más importante para las tiendas que venden ropa, decoración del hogar, accesorios o cualquier producto donde el color sea un factor decisivo. Cuando los clientes no encuentran su color rápidamente, se van y esa venta va a otra parte.
Agregar un filtro de color pone los productos correctos frente a los clientes correctos en segundos. Teniendo esto en cuenta, veamos cómo agregar uno a tu tienda.
Agregar un filtro de color a WooCommerce
La forma más fácil de agregar un filtro de color a WooCommerce es usando un plugin como WPFilters.
WPFilters es el mejor plugin de filtrado para WordPress, creado por el mismo equipo detrás de SearchWP. Te permite agregar filtros estilo Amazon a cualquier tienda WooCommerce sin escribir una sola línea de código.
WPFilters extrae los valores de color directamente de los atributos de tus productos de WooCommerce y los convierte en opciones de filtro clickeables en la página de la tienda. También puedes combinar el filtro de color con otros tipos de filtro como un deslizador de rango de precios, casillas de verificación de categorías o un cuadro de búsqueda de palabras clave para una experiencia de compra aún más precisa.
Aquí tienes algunas cosas que puedes hacer con WPFilters:
- Filtrar por cualquier atributo de producto: Extrae los valores de color directamente de tu atributo de Color de WooCommerce y muéstralos como casillas de verificación que los clientes pueden seleccionar.
- Múltiples formatos de visualización: Muestra las opciones de color como casillas de verificación, un menú desplegable o una lista de radio para que coincida con el diseño de tu tienda.
- Combinar con otros filtros: Apila el filtro de color junto con un filtro de tamaño, marca o precio para que los clientes puedan reducir los resultados desde múltiples ángulos a la vez.
- Actualización instantánea AJAX: La cuadrícula de productos se actualiza en el momento en que un cliente selecciona un color, sin necesidad de recargar la página.
Ahora, repasemos cómo configurar un filtro de color en 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, inicia sesión en tu área de cuenta y ve a la pestaña Descargas.
Luego, 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, sube e instala el plugin en tu sitio de WordPress. Si no lo has hecho antes, consulta esta guía sobre cómo instalar un plugin de WordPress.
Después de activar el plugin, aparecerá el asistente de configuración. Simplemente haz clic en el botón Empecemos y sigue las instrucciones en pantalla para finalizar la configuración.
¡WPFilters está listo! Ahora preparemos los datos de tus productos de WooCommerce.
Paso 2: Configurar un Atributo de Color en WooCommerce
Antes de poder crear el filtro, necesitas tener configurado un atributo de producto de Color en WooCommerce. WPFilters extrae sus valores directamente de tus atributos de producto, por lo que este es un paso obligatorio si aún no lo has hecho.
Nota: Si ya tienes un atributo de Color con términos asignados a tus productos, puedes saltar al Paso 3.
Para empezar, primero ve a Productos » Atributos desde tu panel de WordPress y luego añade tus atributos.
Para obtener instrucciones paso a paso, puedes consultar esta guía sobre cómo configurar correctamente etiquetas, atributos y categorías de productos en WooCommerce.
Paso 3: Crear un Elemento de Filtro de Color en WPFilters
Ahora navega a WPFilters » Elementos desde tu panel de WordPress y haz clic en el botón Añadir nuevo.
A continuación, puedes darle un nombre a tu filtro en la parte superior del editor, como "Filtrar por color".
Después de eso, deberás dirigirte a la sección Campos del filtro y seleccionar la opción Casilla de verificación. Esto crea una lista de casillas de verificación para cada color que los clientes pueden seleccionar para acotar la cuadrícula de productos.
Desde aquí, puedes desplazarte hacia abajo hasta la sección Fuente de datos y hacer clic en el menú desplegable.
En la sección WooCommerce, selecciona el atributo Color del producto (pa_color) que creaste en el paso anterior. WPFilters extraerá automáticamente todos tus términos de color y los añadirá al filtro.
Paso 4: Personalizar la Configuración del Filtro de Color
Con la fuente de datos conectada, puedes ajustar cómo se ve y se comporta el filtro para tus compradores.
Desplázate hasta la sección Contenedor y activa el interruptor Mostrar título para mostrar una etiqueta encima de las casillas de verificación, y activa Colapsable si deseas que los visitantes puedan ocultar el widget del filtro para ahorrar espacio en dispositivos móviles.
A continuación, desplázate hasta la sección Elementos.
Aquí, activar la opción Recuento de elementos muestra a los clientes cuántos productos están disponibles para cada color, para que puedan tomar decisiones más rápidas.
Cuando hayas terminado, desplázate hasta la parte superior y haz clic en el botón Guardar.
Verás una vista previa en vivo del filtro en el panel de la izquierda.
Paso 5: Añade el Filtro de Color a tu Tienda WooCommerce
Con tu filtro guardado, el último paso es colocarlo en tu tienda. Recomendamos añadirlo al área de widgets de la barra lateral en tu página de tienda, donde permanece visible mientras los clientes se desplazan y se ajusta al diseño estándar de WooCommerce.
Para empezar, ve a Apariencia » Widgets desde tu panel de WordPress. Ten en cuenta que este paso puede parecer diferente dependiendo del tema que estés utilizando.
Desde aquí, tendrás que encontrar el área de la barra lateral que utiliza tu página de tienda (normalmente Barra lateral de WooCommerce) y hacer clic en el botón + para añadir un nuevo bloque. Luego busca Elemento WPFilters y añade el widget.
Una vez que añadas el bloque de widget Elemento WPFilters, podrás seleccionar tus filtros de color.
En el panel Ajustes del elemento de la derecha, abre el desplegable Seleccionar elemento y elige el filtro 'Filtrar por color'.
Cuando hayas terminado, haz clic en Actualizar.
Ahora visita tu página de tienda y prueba el filtro. Selecciona el color Carbón y confirma que solo aparecen en la cuadrícula los productos que tienen el color asignado.
Preguntas frecuentes sobre cómo añadir filtros de color
1. ¿WPFilters extrae automáticamente mis valores de color de WooCommerce?
Sí. Una vez que conectes el filtro a tu atributo de producto de Color de WooCommerce, WPFilters extrae todos tus términos de color automáticamente y muestra cada uno como una opción de casilla de verificación. No necesitas introducir los colores manualmente dentro del plugin.
2. ¿Puedo combinar el filtro de color con un filtro de precio o categoría?
Sí. Puedes crear elementos de filtro separados para precio, categoría, talla o cualquier otro atributo en WPFilters y añadirlos todos a la misma barra lateral. Los clientes pueden entonces acotar los resultados desde varios ángulos a la vez, como filtrar por Rojo y un rango de precios inferior a 50 €.
3. ¿Funcionará el filtro de color con productos variables de WooCommerce?
Sí. WPFilters funciona con todos los tipos de productos estándar de WooCommerce, incluidos los productos variables. Cuando un cliente filtra por un color, WPFilters muestra cualquier producto que tenga una variación que coincida con ese color, incluso si hay otras variaciones disponibles en diferentes colores.
4. ¿Pueden los clientes seleccionar más de un color a la vez?
Sí. El tipo de campo Casilla de verificación permite a los clientes seleccionar varios colores simultáneamente. Si un cliente marca Azul y Negro, WPFilters muestra todos los productos disponibles en cualquiera de los dos colores. Cambia al tipo de campo de Botón de opción si quieres limitar a los clientes a una sola selección a la vez.
Esperamos que este artículo te haya ayudado a aprender cómo filtrar productos de WooCommerce por color. También te puede interesar consultar nuestras guías sobre cómo filtrar productos de WooCommerce por atributos y cómo filtrar productos de WooCommerce por etiquetas.
¿Listo para ofrecer a tus clientes una forma más rápida de encontrar productos por color? Puedes empezar con WPFilters aquí.
