¿Me ayudas a llegar a más gente?

Ya he mencionado en otras entradas la importancia de la usabilidad en una tienda online, de hecho es tan importante que incluso a veces se antepone al precio del producto (yo soy uno de esos clientes).

Esto quiere decir que si una persona entra en tu tienda online atraido por el precio de tus productos, pero después le resulta imposible encontrar productos en tu catálogo, navegar por las diferentes secciones o efectuar el pago, al final abandonará tu tienda aburrido y terminará comprando en otra aunque tenga que pagar un poco más por el mismo producto.

Con el fin de ayudarte a mejorar la usabilidad de tu tienda online, en esta entrada voy a explicarte cómo añadir una opción para filtrar productos por colores o tallas en WooCommerce y así facilitar aún más el proceso de compra a tus clientes.

Si tus productos no varían por tallas o colores, sino que tienen otro tipo de variaciones, no te preocupes porque lo que voy a explicar se puede usar perfectamente para cualquier caso.

Cómo añadir un filtro en tu tienda WooCommerce para buscar productos por colores o tallas.

Antes de entrar en detalle sobre como configurar e insertar el filtro en tu tienda WooCommerce, debes de saber que esta opción funciona por medio de atributos.

Si es la primera vez que escuchas hablar sobre los atributos y las variaciones de productos, te recomiendo que eches antes un vistazo a este artículo; “Atributos en WooCommerce ¿Qué son? y ¿cómo configurarlos?

Una vez tengas definidos los atributos y configuradas las variaciones de productos, ya si podemos empezar a trabajar con filtros.

Para esta ocasión he decidido mostrarte dos formas de implementarlo, ambas igual de válidas, pero con ligeras diferencias en cuanto a funcionalidad.

OPCIÓN 1 – Usar la opción por defecto de WooCommerce.

WooCommerce viene por defecto con una serie de widgets para añadir al sidebar (barra lateral) de la tienda.

Todos estos widgets añaden alguna funcionalidad extra a la sección frontend de la tienda, es decir, la que el cliente ve.

En este caso el widget que vamos a usar es el de “Capa de Navegación WooCommerce” que es el que se encarga de mostrar el filtro de búsqueda por color o talla en la página de la tienda.

Por tanto, para configurar e insertar este widget a tu tienda WooCommerce, debes seguir los siguientes pasos:

  1. Ve al apartado de “Apariencia > Widgets“.
  2. Haz clic sobre el widget “Capa de Navegación WooCommerce” y selecciona el sidebar en el que deseas insertarlo. Yo recomiendo insertarlo siempre en el sidebar lateral de la tienda.
    Añadir widget con filtro de búsqueda por colores en WooCommerce
  3. Una vez insertado el widget, podrás ver todos sus parámetros de configuración. En este caso son 4:
    • Título. Es igual que en el resto de widgets, sirve para escribir el título que quieres que se muestre encima del filtro. En este caso yo voy a escribir como título “Filtrar por color”.
    • Atributo. Aquí selecciones por qué atributo quieres filtrar.
    • Tipo de visualización. Defines si quieres que se muestren los valores del filtro como una lista o como una lista desplegable.
    • Tipo de consulta. Este ajuste te permite combinar varios filtros. Por ejemplo, si estás usando 2 filtros en tu tienda y en ambos eliges la opción “Y“, entonces la búsqueda sólo te mostrará productos que cumplan las dos condiciones de los filtros.
      Sin embargo, si eliges la opción “O“, te mostrará productos que cumplan sólo una de las condiciones o que cumplan ambas.
      Este ajuste lo dejo a tu elección, pero debes tener en cuenta que la la opción “Y” es más restrictiva.

    Aquí te muestro una captura de cómo lo he configurado yo.
    Ajustes de filtro de colores y tallas en WooCommerce

  4. Haz clic en “Guardar” y vuelve a cargar la página de la tienda para ver el nuevo filtro activo.

En este caso te he explicado como hacerlo para configurar el filtro de color, pero los pasos son exactamente los mismos para el filtro por tallas. Lo único que varia es que en el campo “Atributo” ahora tienes que seleccionar el valor “talla“.

Insertar filtro por tallas en WooCommerce

Haz clic encima para agrandar.

Como puedes apreciar en la imagen anterior, ese sería el aspecto aproximado de cada filtro (puede variar dependiendo de la plantilla que uses). Si te fijas bien, a la derecha de cada valor hay un número, ese número indica cuantos productos de tu catálogo cumplen la condición.

Esta opción tiene la ventaja de que ya viene integrada de serie con WooCommerce, pero también es cierto que no es muy personalizable y que cada vez que filtras se vuelve a cargar la página del catálogo. Algo que puede ser bastante incómodo para el cliente, si no tienes optimizado el tiempo de cargar de tu tienda WooCommerce.

OPCIÓN 2 – Usar el plugin Yith WooCommerce Ajax Search.

Para esta opción voy a usar un plugin gratuito muy interesante y más personalizable que la opción anterior. Pero sin duda, lo que más me gusta de este plugin es que funciona con AJAX, lo que significa que los productos se filtran sin necesidad de cargar de nuevo la página de catálogo.

El plugin “Yith WooCommerce Ajax Search” está disponible en el repositorio oficial de WordPress, por lo que puedes descargarlo directamente desde el apartado de plugins de tu panel de administración de WordPress.

Una vez lo tengas instalado y activo, veras que el plugin no tiene ningún panel de administración. Este plugin simplemente añade 2 nuevos widgets a la lista de widgets disponibles.

Nosotros vamos a elegir el widget “Yith WooCommerce Ajax Navigation” para añadirlo al sidebar siguiendo los mismos pasos de la opción 1.

Como verás en este caso el widget tiene 5 campos. Los 4 primeros campos son iguales que en la opción anterior y el quinto campo “Display” se refiere a la forma en la que queremos mostrar la jerarquía de valores de los atributos en caso de que la haya. Como en este ejemplo no vamos a trabajar con diferentes jerarquías de valores, este campo lo dejamos con el valor por defecto.

La forma de configurar este widget es muy similar a la opción 1, con la única diferencia de que en el campo “Type” (se refiere al tipo de visualización) podemos elegir entre 4 opciones en lugar de 2 como ocurría en el widget por defecto de WooCommerce. Las cuatro opciones de las que hablo son:

  • List
  • Color
  • Label
  • Dropdown (Lista desplegable)

Lo más interesante es la opción “Color” para cuando trabajes con filtros por colores, como ocurre en este caso.

Por tanto, si seleccionamos la opción “Color” podremos asignar un pequeño cuadro con el color correspondiente a cada valor.  Simplemente al lado de cada valor tienes que hacer clic en “Elegir un color” y marcar el color correspondiente de la paleta de colores. Por ejemplo, para el color azul se haría como en la siguiente imagen.

Configurar filtro de colores en WooCommerce

Repite el proceso para todos los colores disponibles hasta completarlos todos y por último haz clic en “Guardar“. Después recargar la página del catálogo de productos de tu tienda y si todo está correcto, debería de mostrarse un filtro de este estilo:

Buscar productos por colores en WooCommerce

En definitiva, ambas opciones funcionan perfectamente, pero simplemente por el hecho de usar AJAX, yo me decantaría por la segunda opción. Además la opción de usar botones de colores para el filtro es mucho más atractiva visualmente que usar una lista con los nombres de los colores.

Espero que después de leer este artículo te haya quedado claro cómo incluir una opción para filtrar productos por colores o tallas en WooCommerce. Y recuerda que todo lo explicado lo puedes aplicar a cualquier tipo de variación de producto, no tiene porque ser sólo colores y tallas.

Si te ha gustado, por favor ayúdame a difundirlo. ¡Gracias!

Uso de cookies

Este sitio web utiliza cookies para que disfrutes de una mejor experiencia de usuario. Si continúas navegando estarás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, clica en el enlace para mayor información.

ACEPTAR
Aviso de cookies