Cómo filtrar productos de WooCommerce (Guía paso a paso)

¿Está buscando una forma de filtrar los productos en su tienda WooCommerce por atributos?

Filtrar sus productos de WooCommerce por atributos hace que sea más fácil para los clientes encontrar el artículo que desean comprar. Ayuda a los clientes a ahorrar tiempo y hace que la experiencia de compra sea más fluida.

En este artículo, le mostraremos cómo usar el filtro de WooCommerce por configuración de atributos en su tienda en línea.

¿Por qué filtrar los productos de WooCommerce por atributos?

Los filtros facilitan a los clientes la búsqueda de productos en su tienda WooCommerce.

Permiten a los compradores restringir su búsqueda en función de varios atributos, incluidos el color, el rango de precios, la tela, el tamaño y más. En lugar de desplazarse por toda su colección de productos, los usuarios pueden simplemente buscar los productos que les interesan.

Agregar filtros puede ayudar a mejorar la experiencia del usuario, mejorar la funcionalidad de búsqueda y reducir las tasas de rebote en su tienda en línea.

También pueden aumentar las ventas al permitir que los clientes vean todas las opciones disponibles para los productos que les interesan, ayudándolos a realizar compras más informadas.

Ahora veamos cómo puede filtrar fácilmente los productos en su tienda WooCommerce. Le mostraremos cómo filtrar los productos de WooCommerce por atributos y atributos personalizados.

Cómo filtrar productos de WooCommerce por atributos

Si está buscando una manera rápida y fácil de filtrar los productos de WooCommerce, este método es para usted. Le mostraremos cómo configurar un filtro WooCommerce simple usando la configuración de atributos.

Primero debe instalar y activar el complemento YITH WooCommerce Ajax Product Filter. Para obtener más instrucciones, consulte nuestra guía paso a paso para instalar un complemento de WordPress.

Una vez activado, vaya a YITH » Filtro de productos Ajax Página de la barra lateral de administración de WordPress.

Aquí, haga clic en el botón "+ Crear nuevo ajuste preestablecido" para comenzar a crear un ajuste preestablecido de filtro.

Una vez allí, puede comenzar a ingresar un nombre para el filtro en el campo Nombre preestablecido.

Tenga en cuenta que el nombre predeterminado no se mostrará en su tienda y es solo para su información.

Luego simplemente seleccione "Horizontal" como el diseño preestablecido, luego haga clic en el botón "+ Agregar nuevo filtro" en la parte inferior.

Si está utilizando la versión gratuita del complemento, esta opción no está disponible para usted. En su lugar, puede utilizar el diseño predeterminado "Estándar".

Ahora puede comenzar a crear un filtro para sus productos de WooCommerce.

Crear un filtro de productos de WooCommerce

Primero, debe ingresar un nombre de filtro junto a la opción Nombre del filtro.

Por ejemplo, si está creando un filtro que ayude a los clientes a clasificar por categoría de producto, puede llamarlo Filtrar por categoría.

A continuación, puede seleccionar los parámetros para el filtro en el menú desplegable "Filtrar por". Tenga en cuenta que la versión gratuita del complemento solo ofrece categorías de productos y filtros de etiquetas.

Para obtener más información sobre las diferencias entre estas opciones, puede leer nuestra guía sobre cómo agregar etiquetas, atributos y categorías a WooCommerce.

Al crear un filtro para ordenar productos por diferentes rangos de precios, debe seleccionar la opción de rango de precios. Si desea ordenar los productos por popularidad o calificación promedio, también debe seleccionar la opción "Ordenar por".

También puede seleccionar la opción Taxonomía si desea filtrar por etiquetas de productos, categorías, colores, tamaños, materiales, estilos y más. Para este tutorial usaremos este opción.

Después de hacer esto, debe elegir entre las opciones taxonómicas para el filtro. Por ejemplo, si desea filtrar productos por color, debe seleccionar esta opción en el menú desplegable.

Como estamos creando un filtro por categorías de productos, seleccionamos la opción "Categorías de productos".

A continuación, en la pestaña Seleccionar términos, debe ingresar todas las categorías de productos en su sitio web.

Luego puede usar el menú desplegable "Tipo de filtro" para elegir cómo se debe mostrar el filtro en la parte frontal de su tienda.

Puede mostrar el filtro como una casilla de verificación, menú desplegable, texto, muestras y más. Para este tutorial, elegiremos la opción "Seleccionar" para agregar un menú desplegable.

A continuación, debe alternar la opción "Mostrar cuadro de búsqueda" si desea habilitar un cuadro de búsqueda en el menú desplegable.

También puede mostrar el filtro que creó como un interruptor activando el interruptor Mostrar como. Los clientes pueden activar y desactivar el filtro.

A continuación, simplemente seleccione un orden predeterminado para los términos filtrados en el menú desplegable "Ordenar por". Las categorías de filtro se muestran en el orden que seleccionó.

Puede ordenar las categorías de filtro por nombre, número de términos o slug. También puede seleccionar "Tipo de orden" para las condiciones filtradas en orden ascendente (ASC) o descendente (DESC).

Finalmente, haga clic en el botón "Guardar filtro" a continuación para guardar su filtro.

Ahora repita el proceso para crear varios filtros.

Una vez que haya hecho eso, regrese y vaya a la pestaña Configuración general para configurar algunas configuraciones.

Configurar ajustes generales

Lo primero que debe hacer aquí es seleccionar la opción "Modo de filtro". Puede elegir aplicar filtros en tiempo real usando AJAX o mostrar un botón de aplicar filtro en su sitio web.

Luego, también debe elegir entre mostrar un botón de guardar o mostrar los resultados del filtro de inmediato.

Luego, elija si desea mostrar los resultados del filtro usando AJAX en la misma página o volver a cargar los resultados en una página nueva.

Luego, debe desplazarse hacia abajo hasta la opción "Ocultar términos vacíos" y activar el interruptor si no desea mostrar los términos de filtro vacíos.

Por ejemplo, si ha agregado una categoría Tazas a su tienda WooCommerce, pero actualmente no hay elementos, no aparecerá en la lista Filtrar por categoría.

Luego puede alternar el interruptor "Ocultar productos agotados" si no desea que los productos agotados aparezcan en los resultados.

Puede dejar las otras configuraciones en sus valores predeterminados o configurarlas a su gusto.

Una vez que haya hecho sus selecciones, haga clic en el botón Guardar opciones para guardar sus cambios y vaya a la pestaña Personalizar en la parte superior.

Configurar ajustes de personalización (solo complemento premium)

Nota: La pestaña Personalizar no está disponible si está utilizando la versión gratuita del complemento.

Desde aquí, puede elegir un color de estilo de etiqueta, color de término de texto, tamaño de cuadro de color, color de área de filtro y más para su filtro de WooCommerce.

La suma de los colores pueden ayudar a que su filtro de WooCommerce se vea más agradable estéticamente y coincida con la marca de su tienda en línea.

Una vez que haya hecho sus selecciones, haga clic en el botón 'Guardar opciones' y vaya a la pestaña 'SEO' en la parte superior.

Configurar los ajustes de SEO

Una vez allí, cambie el interruptor "Habilitar opción SEO" para activar la configuración.

Ahora puede agregar etiquetas meta desde el menú desplegable para usar en sus páginas filtradas. Esto mejora el SEO de su sitio web.

Para obtener más información, consulte nuestro artículo sobre metadatos y etiquetas meta de WordPress.

También puede agregar automáticamente el atributo nofollow a todas las anclas filtradas activando el interruptor Agregar nofollow al filtrado de anclas. Esto le dice a los motores de búsqueda que no usen anclas de filtro al clasificar su página.

Cuando esté satisfecho, haga clic en el botón "Guardar opciones" para guardar la configuración.

Agregue un filtro de WooCommerce a la página del producto

Para agregar los filtros que acaba de crear a su página de producto de WooCommerce, debe ir a la pestaña Filtros preestablecidos en la parte superior.

Una vez allí, simplemente copie y pegue el código abreviado del ajuste preestablecido de filtro que acaba de crear.

Luego, simplemente abra la página del producto WooCommerce en el editor de bloques desde la barra lateral de administración de WordPress.

Una vez allí, haga clic en el botón Agregar bloque (+) en la esquina superior izquierda para encontrar el bloque de código abreviado.

Ahora simplemente pegue el código abreviado preestablecido de filtro que copió en el bloque de código abreviado.

Finalmente, haga clic en el botón "Publicar" o "Actualizar" para guardar los cambios.

Ahora puede visitar su sitio web para ver el filtrado de atributos de WooCommerce en acción.

Cómo filtrar productos de WooCommerce por atributos personalizados

Si desea crear un filtro de productos de WooCommerce con atributos personalizados, este método es para usted.

Crear un atributo personalizado

Para crear un atributo personalizado, debe visitar Productos » Atributos Página de la barra lateral de administración de WordPress.

Una vez allí, primero ingresa un nombre y un slug para el atributo.

Por ejemplo, si desea crear un filtro para un material de producto específico, puede nombrar el atributo Filtrar por material.

A continuación, debe marcar la casilla Habilitar archivos si desea mostrar todos los elementos que comparten este atributo en una sola página.

Luego haga clic en el botón Agregar atributo a continuación.

Después de crear el atributo, haga clic en el vínculo Configurar condiciones para agregar condiciones al atributo.

Esto lo llevará a una nueva pantalla donde debe ingresar un término en el campo "Nombre".

Por ejemplo, si creó un atributo llamado Filtrar por material, podría agregar cualquier material como término, como: B. lana. Puede agregar tantos términos como desee a un atributo.

Cuando haya terminado, haga clic en el botón Agregar nuevo filtro de material para guardar el término.

Agregar el atributo personalizado a un producto

Después de crear un atributo, debe agregarlo a productos individuales de WooCommerce.

Para hacer esto, debe abrir la página del producto que desea editar. Desde aquí, desplácese hacia abajo hasta la sección Datos del producto y cambie a la pestaña Atributos.

Luego, simplemente abra el menú desplegable Atributo de producto personalizado y seleccione el atributo personalizado que acaba de crear.

Ahora continúe y haga clic en el botón "Agregar".

Una vez que se haya agregado el atributo personalizado, simplemente busque el término que coincida con el producto en la opción "Seleccionar términos".

Por ejemplo, si ha creado un atributo de material y el producto que está editando es lana, debe seleccionar lana en el menú desplegable.

Cuando haya terminado, haga clic en el botón Guardar atributos.

Luego haga clic en el botón 'Actualizar' o 'Publicar' en la parte superior para guardar los cambios.

Ahora debe repetir el proceso para todos los productos que tengan el mismo atributo.

Crear un filtro de atributo personalizado con un complemento

A continuación, debe instalar y activar el complemento YITH WooCommerce Ajax Product Filter. Para obtener más instrucciones, consulte nuestra guía de instalación del complemento de WordPress.

NotaMisión: Puedes usar... Gratis o versión premium del complemento para crear un filtro de atributos personalizado para WooCommerce.

Una vez activado, vaya a YITH » Filtro de productos Ajax Página de la barra lateral de administración de WordPress.

Desde aquí, haga clic en el botón "+ Crear nueva configuración".

A continuación, debe introducir un nombre para el ajuste preestablecido que está creando en el campo Nombre de ajuste preestablecido.

Cuando haya terminado, haga clic en el botón "+ Agregar nuevo filtro" a continuación para comenzar a crear un filtro de atributo de WooCommerce personalizado.

Primero debe ingresar un nombre en el campo Nombre del filtro.

Por ejemplo, si está creando un filtro para ayudar a los clientes a clasificar las diferentes opciones de materiales, puede llamarlo Filtrar por material.

Luego, simplemente seleccione "Taxonomía" en el menú desplegable "Filtrar por". Si está utilizando la versión gratuita del complemento, esta opción se seleccionará de manera predeterminada.

Ahora, el atributo personalizado que creó ahora está disponible en el menú desplegable junto a la opción "Seleccionar taxonomía".

Continúe y seleccione el atributo personalizado de la lista desplegable e ingrese las condiciones del atributo en el cuadro Seleccionar condiciones.

Luego, debe seleccionar cómo desea que aparezca el filtro en su escaparate en el menú desplegable Tipo de filtro.

El filtro se puede mostrar como una casilla de verificación, menú desplegable, texto, muestras y más.

A continuación, seleccione un orden predeterminado para los términos filtrados en el menú desplegable Ordenar por.

Puede ordenar las categorías de filtro por nombre, número de términos o slug. También puede seleccionar "Tipo de orden" para las condiciones filtradas en orden ascendente (ASC) o descendente (DESC).

Finalmente, haga clic en el botón "Guardar filtro" a continuación para guardar su filtro de atributo personalizado.

Luego debe ir a la pestaña "Configuración general" en la parte superior. Desde aquí puede seleccionar el modo de filtrado, ocultar condiciones vacías y configurar otros ajustes según sus necesidades.

Cuando haya terminado, haga clic en el botón Guardar opciones para guardar los cambios y vaya a la pestaña Personalizar en la parte superior.

Nota: si está utilizando la versión gratuita, la configuración de personalización no está disponible.

Desde aquí puede personalizar cómo desea que se vea su filtro preestablecido en el frente de su sitio web.

Por ejemplo, puede elegir el color del estilo de la etiqueta, el color del término de texto, el tamaño del campo de color, el color del área de filtro y más.

Una vez que haya hecho sus selecciones, haga clic en el botón Guardar opciones y cambie a la pestaña SEO desde la parte superior.

Desde aquí, cambie el interruptor "Habilitar opción SEO" para activar la configuración.

Puede agregar etiquetas meta de robots desde el menú desplegable para usar en sus páginas filtradas. Esto mejora el SEO de su sitio web.

También puede alternar el interruptor "Agregar nofollow a anclas de filtro" para agregar automáticamente el atributo nofollow a todas las anclas de filtro.

Cuando esté satisfecho, haga clic en el botón "Guardar opciones" para guardar la configuración.

Agregue un filtro de atributo personalizado a una página de producto de WooCommerce

Para agregar el filtro de atributo personalizado a una página de producto de WooCommerce, debe ir a la pestaña Ajustes preestablecidos de filtro en la parte superior.

Desde aquí, copie el código abreviado del filtro de atributo personalizado.

A continuación, abra la página de su producto en el editor de bloques desde la barra lateral de administración de WordPress.

Aquí, haga clic en el botón "Agregar bloque (+)" en la parte superior izquierda para buscar y agregar el bloque de shortcode.

Luego, simplemente pegue el código abreviado preestablecido del filtro que copió en el bloque.

Finalmente, haga clic en el botón "Publicar" o "Actualizar" para guardar los cambios.

Ahora puede visitar su sitio web para ver el filtro de atributos personalizados de WooCommerce en acción.

Esperamos que este artículo le haya ayudado a aprender a filtrar los productos de WooCommerce por atributos y atributos personalizados. También puede leer nuestro artículo sobre cómo agregar una búsqueda difusa a su sitio web para mejorar los resultados de búsqueda y nuestras mejores opciones para los mejores temas de WooCommerce.