Blog de SearchWP

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

Cómo filtrar productos de WooCommerce por atributos

Si vendes productos con diferentes tamaños o colores, sabes lo difícil que es para los clientes encontrar exactamente lo que quieren. A menudo tienen que hacer clic en docenas de páginas solo para ver si su talla específica está realmente en stock.

Esta frustración generalmente los lleva a abandonar tu sitio sin comprar nada. Hemos visto a muchos dueños de tiendas perder ventas potenciales simplemente porque la experiencia de compra era demasiado confusa para navegar.

La solución es permitir a los visitantes filtrar productos por atributos específicos como tela, talla o marca. Es como tener un dependiente de tienda útil que les señala instantáneamente el estante correcto.

En este artículo, te mostraremos cómo filtrar productos de WooCommerce por atributos sin necesidad de contratar a un desarrollador.

¿Por qué añadir filtros de atributos a la tienda de WooCommerce?

Todos hemos estado ahí como compradores. Visitas una tienda en línea, encuentras una categoría que te gusta, pero no puedes filtrar por lo único que importa, como la talla o el color.

Hemos visitado innumerables sitios de comercio electrónico donde tuvimos que hacer clic en veinte productos diferentes solo para ver si venían en negro. Es frustrante y generalmente nos hace abandonar el sitio para comprar en otro lugar.

Si tu tienda carece de filtros de atributos, es probable que tus clientes sientan esta misma molestia. Las categorías son geniales para grupos amplios, pero fallan cuando un usuario tiene requisitos específicos.

Forzar a los usuarios a hacer clic de un lado a otro entre el catálogo y las páginas de productos crea fricción. Convierte un divertido paseo de compras en una tarea tediosa.

Piensa en los filtros de atributos como un empleado conocedor parado en el pasillo. En lugar de dejar que el cliente busque sin rumbo, los filtros reducen inmediatamente las opciones a exactamente lo que se ajusta a sus necesidades.

Hemos descubierto que solucionar este punto de dolor específico mantiene a la gente en el sitio por más tiempo. Suaviza el viaje desde la simple navegación hasta el pago.

Dicho esto, veamos los pasos que puedes seguir para añadir estos filtros a tu sitio.

Filtrar productos de WooCommerce por atributos

La forma más fácil de filtrar tus productos por atributos específicos es usar un plugin como WPFilters.

WPFilters - El mejor plugin de filtrado de WordPress

WPFilters es el mejor plugin de filtrado para WordPress porque está diseñado para funcionar con WooCommerce directamente.

Por lo general, configurar filtros implica configuraciones complicadas o incluso ediciones de código.

WPFilters resuelve esto con una configuración sin código que te permite crear filtros funcionales en minutos.

Te permite convertir tus atributos de producto existentes en casillas de verificación, botones de radio o menús desplegables fáciles de usar. No tendrás que contratar a un desarrollador para que tu tienda luzca profesional.

Aquí tienes algunas otras características que obtienes con WPFilters:

  • URLs de filtros compartibles: Cada búsqueda crea un enlace único, por lo que los clientes pueden marcar o compartir sus resultados filtrados específicos con amigos.
  • Coloca filtros en cualquier lugar: Puedes añadir fácilmente filtros a cualquier página o barra lateral usando el bloque de Gutenberg o simples shortcodes.
  • Personalización total: Puedes controlar exactamente cómo se ven y se comportan tus filtros sin tocar una sola línea de CSS.
  • Soporte de datos avanzado: Te permite ir más allá de las categorías básicas y filtrar el contenido por campos personalizados, etiquetas y más.
  • Compatibilidad universal: El plugin funciona perfectamente con publicaciones, páginas y tipos de publicaciones personalizadas, por lo que puedes usarlo en todo tu sitio.

Con eso, veamos cómo puedes configurar el filtrado de atributos en tu sitio.

Paso 1: Instalar y activar WPFilters

Para empezar, deberás visitar el sitio web de SearchWP y registrarte para obtener una cuenta de WPFilters.

Una vez que hayas terminado, simplemente ve al panel de tu cuenta y haz clic en la pestaña Descargas.

Descargar archivos zip del plugin WPFilters

A continuación, presiona el botón Descargar WPFilters y guarda el archivo ZIP en tu ordenador. También te recomendamos copiar tu clave de licencia ahora mismo, ya que la necesitarás para verificar el plugin en un momento.

Ahora, necesitas subir el archivo a tu sitio e instalarlo. Si necesitas un repaso, consulta esta guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, el asistente de configuración aparecerá en tu pantalla. Haz clic en el botón Empecemos y sigue las instrucciones en pantalla para finalizar la configuración.

Asistente de configuración de WPFilters

Paso 2: Añadir un nuevo elemento de filtro para el atributo del producto

A continuación, necesitarás crear un nuevo elemento de filtro con el que interactuarán tus clientes.

Para ello, simplemente dirígete a WPFilters » Elementos desde tu panel de WordPress y haz clic en el botón Añadir nuevo.

Añadir un nuevo elemento en WPFilters

Después de eso, puedes introducir un nombre para tu filtro en la parte superior, como "Color del producto" o "Talla". Este nombre interno te ayuda a mantener las cosas organizadas si planeas añadir varios filtros más adelante a tu tienda de WooCommerce.

Luego, selecciona los Campos de filtro de las opciones disponibles.

Para los filtros de atributos de producto, usaremos la opción Casilla de verificación porque permite a los usuarios seleccionar varias opciones a la vez. Sin embargo, también puedes elegir un menú desplegable o botones de radio, dependiendo del diseño de tu tienda.

Seleccionar campo de filtro de atributo de producto

Una vez que hayas elegido un diseño, desplázate hacia abajo hasta la sección Origen de datos para conectar los datos de tus productos. Aquí es donde le dices a WPFilters específicamente qué información buscar dentro de tu tienda.

Haz clic en el menú desplegable para seleccionar el atributo del producto para el que deseas configurar un filtro.

Por ejemplo, elegiremos 'Color del producto' como el atributo específico para este tutorial.

Seleccionar origen de datos de atributo de producto

Si no tienes un atributo de producto añadido, consulta esta guía sobre cómo añadir etiquetas, atributos y categorías de productos a WooCommerce.

Paso 3: Personalizar la configuración de tu filtro

Después de seleccionar tu origen, puedes ajustar y personalizar tu filtro de atributos de producto desplazándote hasta la sección Contenedor.

Aquí, puedes habilitar la opción ‘Mostrar título’, hacerla colapsable y organizar los elementos de contenido horizontalmente.

Editar ajustes del contenedor para filtros de atributos

A continuación, simplemente desplázate hacia abajo hasta la sección Elementos para personalizar aún más tu filtro.

Por ejemplo, puedes habilitar el Recuento de elementos y permitir que los visitantes vean cuántos productos están disponibles antes de hacer clic.

Editar ajustes de elementos para filtros

Cuando estés satisfecho con la configuración, simplemente desplázate hacia arriba y haz clic en el botón Guardar para almacenar tus cambios.

Notarás una útil vista previa en el lado derecho de la pantalla que se actualiza en tiempo real a medida que realizas cambios.

Guardar filtro de atributo de producto

Paso 4: Mostrar el filtro en tu tienda WooCommerce

Ahora que tu filtro está listo, el último paso es colocarlo en tu sitio web, para que los clientes puedan usarlo.

Nos encanta usar WPFilters porque te permite colocar estos filtros en cualquier lugar usando el editor de bloques de WordPress.

También viene con una opción incorporada para incrustar directamente el filtro en tu página preferida. Simplemente haz clic en la opción Incrustar en el editor de elementos.

Incrustar filtro de atributo de producto

A continuación, se abrirá una ventana emergente donde podrás seleccionar el modo de incrustación y la página de destino.

WPFilters ofrece 3 modos de incrustación, que incluyen un bloque de Gutenberg, un shortcode o código PHP.

Para este tutorial, te mostraremos cómo agregar el filtro de atributos de producto a la página de la tienda de WooCommerce y a la barra lateral de tu tienda en línea.

1. Mostrar el filtro de atributos de producto en la página de la tienda de WooCommerce

Primero, puedes simplemente seleccionar la opción Bloque de Gutenberg y luego hacer clic en el botón ‘Seleccionar página existente’.

Incrustar filtros en una página

Después de eso, deberás introducir el nombre de la página y seleccionarla del menú desplegable.

Una vez hecho esto, simplemente haz clic en el botón ¡Vamos!.

Incrustar filtro de producto en la página de tienda

En la siguiente pantalla, verás tu filtro de productos ya agregado al editor de WordPress.

Alternativamente, también puedes agregar el bloque Elemento WPFilters en tu página de Tienda de WooCommerce y seleccionar el filtro que acabas de crear desde el panel de configuración de la derecha.

Ver filtro de atributo de producto en el editor de contenido

Finalmente, puedes hacer clic en el botón GuardarPublicar.

Ahora puedes visitar tu tienda en vivo para probar el filtro y asegurarte de que ordena tus productos correctamente.

Vista previa de filtros de producto

2. Mostrar el filtro de atributos de producto en la barra lateral

Para agregar el filtro de atributos de producto de WooCommerce a la barra lateral de tu tienda, puedes ir a Apariencia » Widgets desde tu panel de WordPress.

Nota: Estamos usando el tema de WordPress Astra para este tutorial. Los pasos para agregar el widget pueden diferir dependiendo del tema que estés utilizando para tu sitio.

A continuación, deberás agregar el bloque de widget Elemento WPFilters en la sección Barra lateral de WooCommerce.

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

Para empezar, simplemente haz clic en el botón + y agrega el bloque.

Después de eso, deberás seleccionar el filtro de atributos de producto desde la Configuración del elemento en el panel de la derecha.

Seleccionar tu filtro de producto en los ajustes del widget

Cuando hayas terminado, simplemente haz clic en el botón ‘Actualizar’.

Ahora, puedes visitar tu tienda de WooCommerce y ver los filtros en la barra lateral.

Ver filtro de producto en la barra lateral

Paso 5: Prueba tu filtro de atributos de producto

Tras incrustar el filtro en tu tienda WooCommerce, el siguiente paso es probarlo y ver si funciona correctamente.

Para este tutorial, creamos un filtro donde los visitantes pueden ordenar los productos según el color.

Cuando seleccionamos un color en particular en el filtro, el producto se ordenó automáticamente y se mostró el artículo correcto.

Filtro de atributos de producto de WooCommerce

Ahora, puedes agregar más filtros de atributos de producto para tu tienda. Por ejemplo, quizás puedas mostrar marcas, tamaño, material y otros atributos en el filtro.

Preguntas frecuentes sobre el filtro de atributos de producto de WooCommerce

1. ¿Cuál es la forma más fácil de filtrar productos de WooCommerce por atributos?

La forma más fácil de filtrar productos de WooCommerce por atributos es usar un plugin como WPFilters, que ofrece una configuración sin código para crear opciones de filtro fáciles de usar en minutos.

¿Puedo agregar filtros a páginas específicas o solo a la barra lateral?

Sí, WPFilters te permite incrustar filtros en cualquier lugar de tu sitio, incluidas páginas específicas como la página de la tienda WooCommerce o en la barra lateral, utilizando bloques de Gutenberg, shortcodes o código PHP.

¿Por qué es importante agregar filtros de atributos a una tienda WooCommerce?

Agregar filtros de atributos mejora la experiencia de compra al permitir que los clientes encuentren rápidamente productos que coincidan con criterios específicos como tamaño, color o material, reduciendo así la frustración y aumentando la probabilidad de compra.

Esperamos que este artículo te haya ayudado a aprender cómo filtrar productos de WooCommerce por atributos. También puedes consultar nuestra guía sobre cómo agregar una búsqueda inteligente de productos en WooCommerce y cómo buscar por SKU de producto en WooCommerce.

¿Listo para hacer que tu tienda en línea sea más fácil de navegar? Puedes 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