Blog de SearchWP

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

Cómo filtrar productos de WooCommerce por etiquetas

Gestionar una tienda WooCommerce a menudo implica lidiar con un inventario creciente que puede resultar abrumador para los visitantes.

Por experiencia, notamos que los clientes tienen dificultades para encontrar artículos específicos cuando hay demasiadas opciones en una sola página.

Si los compradores no pueden examinar tus productos fácilmente, podrían irse antes de comprar nada.

Añadir etiquetas de producto ayuda a organizar tu inventario, pero necesitas una forma para que los clientes las utilicen para acotar los resultados.

En este artículo, te mostraremos cómo filtrar productos de WooCommerce por etiquetas usando WPFilters.

¿Por qué filtrar productos de WooCommerce por etiquetas?

Antes de empezar el tutorial, hablemos de por qué añadir un filtro de productos por etiquetas cambia las reglas del juego para tu tienda.

Piensa en tu tienda WooCommerce como un gran almacén de ropa. Si un comprador quiere específicamente un artículo "de verano" o "vintage", no debería tener que buscar entre cada prenda que posees.

Sin filtros, les obligas a hacer exactamente eso, lo que genera frustración y carritos abandonados.

Hemos visto una y otra vez que añadir filtros sencillos hace que la experiencia de compra sea mucho más fluida. Ayuda a tus visitantes a sentirse en control de su experiencia de navegación.

Cuando pueden hacer clic en una etiqueta y ver solo artículos relevantes, es mucho más probable que completen una compra.

Dicho esto, veamos una forma sencilla de configurar filtros de etiquetas de productos en WooCommerce.

Configurar el filtro de etiquetas de productos de WooCommerce

La mejor manera de filtrar productos por etiquetas en WooCommerce es usando WPFilters.

WPFilters - El mejor plugin de filtrado de WordPress

WPFilters es el principal plugin de filtrado para WordPress que hace que la ordenación de contenido sea increíblemente fácil.

Nos encanta usarlo porque maneja tareas de filtrado complejas sin pedirnos que escribamos código.

Normalmente, crear un filtro personalizado para WooCommerce requiere contratar a un desarrollador o editar archivos de plantilla.

WPFilters elimina ese dolor de cabeza y te permite crear filtros usando un sencillo constructor visual.

Está desarrollado por el mismo equipo detrás de SearchWP, por lo que puedes confiar en que manejará los datos de forma precisa y eficiente.

Usando WPFilters, puedes:

  • Elementos predefinidos: Elige entre filtros predefinidos como casillas de verificación, radio, desplegables y más.
  • Filtrar cualquier contenido: Configura filtros para entradas de blog, productos, descargas y contenido personalizado.
  • Elegir fuentes de datos avanzadas: Filtra fácilmente entradas y productos por etiquetas, categorías, atributos, marcas, clases de envío, etc.
  • URL de filtros compartibles: Convierte cada búsqueda filtrada en una URL única que los visitantes pueden marcar y compartir.
  • Integración con Gutenberg: Añade filtros usando el bloque WPFilters a cualquier página, entrada o barra lateral.

Con esto, veamos cómo podemos configurar esto en tu sitio.

Paso 1: Instalar y activar WPFilters

Para empezar, necesitas visitar el sitio web de SearchWP e iniciar sesión en tu cuenta.

Una vez allí, haremos clic en la pestaña Descargas para encontrar los archivos del plugin.

Descargar archivos zip del plugin WPFilters

Haz clic en el botón Descargar WPFilters para guardar el archivo ZIP en tu ordenador.

Mientras est aacute; en esta paacute;gina, tambieacute;n recomendamos copiar la clave de licencia, ya que la necesitaraacute; en breve.

A continuacioacute;n, debe cargar el complemento en nuestro panel de WordPress e instalarlo. Si no estaacute; seguro de coacute;mo hacerlo, consulte esta guiacute;a sobre coacute;mo instalar un complemento de WordPress.

Despueacute;s de activar el complemento, el asistente de configuracioacute;n apareceraacute; en la pantalla. Simplemente haga clic en el botoacute;n ‘Empezar’ y siga las raacute;pidas instrucciones para tener todo listo.

Asistente de configuración de WPFilters

Paso 2: Crear un elemento de filtro de etiquetas de WooCommerce

A continuacioacute;n, deberaacute; crear el elemento de filtro de etiquetas de productos de WooCommerce que utilizaraacute;n sus visitantes.

Para empezar, simplemente diriacute;jase a WPFilters » Elementos desde su panel de WordPress y haga clic en el botoacute;n An;adir nuevo.

Añadir un nuevo elemento en WPFilters

En la siguiente pantalla, deberiacute;a escribir un nombre para su filtro en la parte superior. Esto le ayuda a mantenerse organizado si decide an;adir maacute;s filtros maacute;s adelante.

Despueacute;s de eso, proceda a seleccionar el Tipo de filtro que desea utilizar.

Elegir campos de filtro de etiquetas de WooCommerce

Para este tutorial, utilizaremos el Desplegable para las etiquetas, ya que permite a los clientes seleccionar su etiqueta preferida manteniendo su experiencia de usuario limpia y ordenada.

Dicho esto, puede elegir cualquier Campo de filtro preconstruido para su tienda de WooCommerce, como una Lista de radio o Casilla de verificacioacute;n.

Una vez que haya tomado su decisioacute;n, desplaacute;cese hacia abajo hasta la seccioacute;n Fuente de datos. Aquiacute;, solo necesita hacer clic en el menuacute; desplegable y seleccionar Etiquetas de producto.

Elegir fuente de datos para etiquetas de WooCommerce

Paso 3: Personalizar su filtro de etiquetas de WooCommerce

Despueacute;s de seleccionar la fuente de datos, puede ajustar la apariencia del filtro para que coincida con el estilo de su sitio.

Simplemente desplaacute;cese hacia abajo hasta la seccioacute;n Contenedor para ver sus opciones.

Aquiacute;, puede habilitar la opcioacute;n ‘Mostrar tiacute;tulo’, para que sus visitantes sepan exactamente lo que hace.

Edita la configuración del contenedor para los filtros

Tambieacute;n tiene la opcioacute;n de hacer que el filtro sea colapsable.

Creemos que esta funcioacute;n es muy uacute;til para mantener ordenados los laterales, especialmente para los clientes que compran en sus teleacute;fonos moacute;viles.

A continuacioacute;n, deberaacute; examinar la seccioacute;n Elementos.

Editar ajustes de elementos para filtros

Aquiacute;, puede habilitar la opcioacute;n para mostrar recuentos de elementos. Esto permite a sus visitantes ver cuaacute;ntos productos estaacute;n disponibles para una etiqueta especiacute;fica antes de hacer clic en ella.

Tambieacute;n puede optar por ocultar teacute;rminos vaciacute;os aquiacute;. Esto evita que los clientes hagan clic en una etiqueta solo para encontrar cero productos, lo que puede ser molesto.

Cuando haya terminado con esta configuracioacute;n, simplemente haga clic en el botoacute;n Guardar en la parte superior de la paacute;gina.

Guardar filtro de etiquetas de WooCommerce

Paso 4: Mostrar el filtro de etiquetas en su tienda

Ahora que su filtro estaacute; completamente configurado, necesita an;adirlo a su sitio web para que los clientes puedan usarlo.

WPFilters hace que el proceso de incrustacioacute;n sea muy faacute;cil al ofrecer un bloque de Gutenberg, un có;digo corto o un có;digo PHP.

Nota: Un punto importante a recordar es que los pasos para incrustar el filtro de etiquetas pueden variar dependiendo del tema de WordPress que esteacute; utilizando.

Para empezar, simplemente vaya a la paacute;gina donde desea mostrar el filtro, como su paacute;gina de Tienda o un aacute;rea de widget lateral.

Por ejemplo, agregaremos el filtro de etiquetas a nuestra página de tienda de WooCommerce para este tutorial. Simplemente haga clic en el signo + y agregue el bloque WPFilters Element.

Agregar bloque de elemento WPFilters en la página de tienda

Después de agregar el bloque, deberá seleccionar el filtro de etiquetas que creó anteriormente.

Vaya y haga clic en el menú desplegable ‘Seleccionar Elemento’ del panel de configuración en la derecha. Desde aquí, seleccione su filtro de etiqueta de producto de WooCommerce.

Elegir filtro de etiquetas de producto de la configuración

Cuando haya terminado, simplemente haga clic en el botón ‘Guardar’ en la parte superior.

Eso es todo. Ahora puede visitar su sitio en vivo para probar el filtro y ver cómo ayuda a ordenar sus productos.

Por ejemplo, filtraremos los productos usando la etiqueta ‘zapatillas negras’ en nuestra tienda de demostración.

Probar filtro de etiquetas para WooCommerce

Como puede ver, el producto correcto aparece en la página de la tienda.

Con el filtro de etiquetas de producto, permite a sus clientes reducir fácilmente los productos que buscan. Como resultado, verá un aumento en las conversiones y las ventas.

Esperamos que este artículo le haya ayudado a aprender cómo filtrar productos de WooCommerce por etiquetas. También puede consultar nuestra guía sobre cómo filtrar productos de WooCommerce por atributos y cómo filtrar publicaciones de blog por etiquetas en WordPress.

Si está listo para facilitar el descubrimiento de productos para sus clientes, 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