Después de trabajar con innumerables propietarios de sitios web de WooCommerce, hemos aprendido que las tiendas en línea exitosas comparten una característica clave: facilitan que los clientes encuentren exactamente lo que quieren.
Los grandes mercados como Amazon utilizan filtros por precio, color, tamaño y ordenación por novedades porque entienden cómo compran los clientes.
El filtrado de productos es esencial para hacer crecer un negocio de comercio electrónico. Cuando los clientes no pueden encontrar rápidamente lo que buscan, a menudo se van sin comprar.
Es por eso que hemos creado esta guía paso a paso para ayudarte a agregar un filtrado de productos efectivo a tu tienda de WooCommerce.
Aprenderás a crear filtros basados en atributos que harán que tu tienda sea más fácil de navegar y más agradable para los compradores.
¿Por qué filtrar productos de WooCommerce por atributo?
Los filtros hacen que sea muy fácil para los clientes buscar productos en tu tienda de WooCommerce.
Permiten a los compradores reducir su búsqueda según diferentes atributos, incluyendo color, rango de precios, tela, tamaño y más.
En lugar de desplazarse por toda tu 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 tu 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ándoles a realizar compras más informadas.
Dicho esto, veamos cómo puedes filtrar fácilmente los productos en tu tienda WooCommerce. Te mostraremos cómo filtrar productos de WooCommerce por atributo y atributo personalizado:
- Cómo filtrar productos de WooCommerce por atributo
- Cómo filtrar productos de WooCommerce por atributo personalizado
- Consejos adicionales para aumentar las ventas de WooCommerce
Cómo filtrar productos de WooCommerce por atributo
Si buscas una forma rápida y sencilla de filtrar productos de WooCommerce, este método es para ti. Te mostraremos cómo configurar un filtro simple por ajustes de atributos utilizando un plugin de filtro de productos de WooCommerce.
Primero, necesitas instalar y activar el plugin YITH WooCommerce Ajax Product Filter. Para más instrucciones, por favor consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: También existe una versión gratuita del plugin YITH WooCommerce Ajax Product Filter. Sin embargo, utilizaremos la versión premium que viene con funciones avanzadas.
Hemos probado exhaustivamente el plugin en nuestro sitio web de demostración. Para saber más sobre nuestra experiencia, consulta nuestra reseña de YITH WooCommerce Ajax Product Filter.
Tras la activación, dirígete a la página YITH » Ajax Product Filter desde el panel de WordPress.
Desde aquí, haz clic en el botón '+ Crear un nuevo preset' para empezar a crear un preset de filtro.
Una vez allí, puedes empezar escribiendo un nombre para el filtro en el cuadro 'Nombre del preset'.
Ten en cuenta que el nombre del preset no se mostrará en tu tienda y solo está ahí para tu referencia.
A continuación, simplemente elige ‘Horizontal’ como el diseño preestablecido y luego haz clic en el botón ‘+ Agregar un nuevo filtro’ en la parte inferior.
Si estás utilizando la versión gratuita del plugin, esta opción no estará disponible para ti. En su lugar, tendrás el diseño preestablecido ‘Predeterminado’.
Ahora puedes empezar a crear un filtro para tus productos de WooCommerce.
Crear un filtro para productos de WooCommerce
Primero, deberás escribir un nombre de filtro junto a la opción ‘Nombre del filtro’.
Por ejemplo, si estás creando un filtro que ayudará a los clientes a ordenar por categorías de productos, puedes nombrarlo ‘Filtrar por categoría’.
A continuación, puedes seleccionar los parámetros para el filtro desde el menú desplegable 'Filtrar por'. Ten en cuenta que la versión gratuita del plugin solo ofrece filtros para categorías y etiquetas de productos.
Para obtener más información sobre las diferencias entre estas opciones, puedes leer nuestra guía sobre cómo agregar etiquetas, atributos y categorías a WooCommerce.
Si estás creando un filtro para ordenar productos por diferentes rangos de precios, entonces debes elegir la opción 'Rango de precios'. De manera similar, si deseas ordenar productos por popularidad o calificación promedio, entonces necesitas elegir la opción 'Ordenar por'.
También puedes elegir la opción 'Taxonomía' si deseas filtrar etiquetas de productos, categorías, colores, tallas, materiales, estilos y más. Para este tutorial, elegiremos esta opción.
Después de haber hecho eso, debes elegir entre las opciones de taxonomía para el filtro. Por ejemplo, si deseas filtrar productos por color, entonces necesitarás elegir esa opción del menú desplegable.
Como estamos creando un filtro para categorías de productos, seleccionaremos la opción 'Categorías de productos'.
A continuación, debes escribir todas las categorías de productos en tu sitio web en la sección 'Elegir términos'.
Después de eso, puedes elegir cómo deseas que se muestre el filtro en la parte frontal de tu tienda desde el menú desplegable 'Tipo de filtro'.
Puedes mostrar el filtro como una casilla de verificación, un menú desplegable, texto, muestras de color y más. Para este tutorial, elegiremos la opción 'Seleccionar' para agregar un menú desplegable.
A continuación, activa el interruptor 'Mostrar campo de búsqueda' si deseas habilitar un cuadro de búsqueda dentro del menú desplegable.
También puedes mostrar el filtro que estás creando como un interruptor activando el interruptor 'Mostrar como interruptor'. Luego, los clientes podrán activar y desactivar el filtro.
Una vez que hayas hecho eso, simplemente elige un orden predeterminado para los términos filtrados en el menú desplegable ‘Ordenar por’. Las categorías de filtro se mostrarán en el orden que elijas.
Puedes ordenar las categorías de filtro usando el nombre, el recuento de términos o el slug. También puedes elegir el ‘Tipo de orden’ para los términos filtrados en orden ascendente (ASC) o descendente (DESC).
Finalmente, haz clic en el botón ‘Guardar filtro’ en la parte inferior para guardar tu filtro.
Ahora, repite el proceso para crear múltiples filtros.
Una vez que hayas hecho eso, regresa a la parte superior y cambia a la pestaña ‘Configuración general’ para configurar algunas opciones.
Configurar los ajustes generales
Aquí, tienes que empezar eligiendo una opción de ‘Modo de filtro’. Puedes seleccionar si quieres aplicar filtros en tiempo real usando AJAX o si quieres mostrar un botón de ‘Aplicar filtros’ en tu sitio.
A continuación, también debes elegir entre mostrar un botón de guardar o mostrar los resultados del filtro inmediatamente.
Una vez que hayas hecho eso, elige si quieres mostrar los resultados del filtro en la misma página usando AJAX o si quieres recargar los resultados en una página nueva.
A continuación, desplázate hacia abajo hasta la opción ‘Ocultar términos vacíos’ y activa el interruptor si no quieres mostrar términos de filtro que estén vacíos.
Por ejemplo, si has agregado una categoría de ‘Tazas’ en tu tienda de WooCommerce, pero actualmente no tiene ningún artículo, entonces no se mostrará en la lista ‘Filtrar por categoría’.
Después de eso, procede a activar el interruptor ‘Ocultar productos sin stock’ si no quieres mostrar productos sin stock en los resultados.
Puedes dejar las otras configuraciones como predeterminadas o configurarlas a tu gusto.
Después de tomar tus decisiones, haz clic en el botón ‘Guardar opciones’ para almacenar tus cambios y cambia a la pestaña ‘Personalización’ en la parte superior.
Configurar los Ajustes de Personalización (Solo Plugin Premium)
Nota: La pestaña ‘Personalización’ no estará disponible si estás usando la versión gratuita del plugin.
Desde aquí, puedes elegir el color de la etiqueta de tu filtro de WooCommerce, el color del término textual, el tamaño del swatch de color, el color del área del filtro y más.
Agregar colores puede ayudar a que tu filtro de WooCommerce se vea más estético y coincida con la marca de tu tienda de comercio electrónico.
Una vez que hayas tomado tus decisiones, haz clic en el botón ‘Guardar Opciones’ y cambia a la pestaña ‘SEO’ desde la parte superior.
Configurar los Ajustes de SEO
Una vez allí, activa el interruptor ‘Habilitar opción de SEO’ para activar los ajustes.
Ahora, puedes agregar metaetiquetas desde el menú desplegable para usarlas en tus páginas filtradas. Esto mejorará el SEO de tu sitio.
Para más detalles, quizás quieras leer nuestro artículo sobre metadatos y metaetiquetas de WordPress.
También puedes agregar automáticamente el atributo nofollow a todos los anclajes filtrados activando el interruptor ‘Agregar “nofollow” a los anclajes de filtro’. Esto le indicará a los motores de búsqueda que no utilicen los anclajes de filtro al clasificar tu página.
Una vez que estés satisfecho, haz clic en el botón ‘Guardar Opciones’ para almacenar los ajustes.
Agregar el Filtro de WooCommerce a la Página de Productos
Para agregar los filtros que acabas de crear a tu página de productos de WooCommerce, necesitas cambiar a la pestaña ‘Presupuestos de filtros’ desde la parte superior.
Una vez allí, simplemente copia el shortcode del presupuesto de filtro que acabas de crear.
A continuación, simplemente abre tu página de productos de WooCommerce en el editor de bloques desde el panel de WordPress.
Una vez allí, haz clic en el botón Agregar Bloque ‘(+)’ en la esquina superior izquierda para encontrar el bloque Shortcode.
Ahora, simplemente pega el shortcode del presupuesto de filtro que copiaste en el bloque Shortcode.
Finalmente, haz clic en el botón ‘Publicar’ o ‘Actualizar’ para guardar tus cambios.
Ahora puedes visitar tu sitio de WordPress para ver el filtro de atributos personalizados de WooCommerce en acción.
Cómo filtrar productos de WooCommerce por atributo personalizado
Si deseas crear un filtro de productos de WooCommerce utilizando atributos personalizados, entonces este método es para ti.
Crear un Atributo Personalizado
Para crear un atributo personalizado, debes visitar la página Productos » Atributos desde el panel de WordPress.
Una vez allí, comienza ingresando un nombre y un slug para el atributo de taxonomía personalizada.
Por ejemplo, si deseas crear un filtro para un material de producto específico, entonces puedes nombrar el atributo ‘Filtrar por material’.
A continuación, debes marcar la casilla ‘Habilitar archivos’ si deseas mostrar todos los artículos que comparten ese atributo en una sola página.
Después de eso, haz clic en el botón ‘Agregar atributo’ en la parte inferior.
Una vez que se haya creado el atributo, haz clic en el enlace ‘Configurar términos’ para agregar términos al atributo.
Esto te dirigirá a una nueva pantalla, donde debes escribir un término en el cuadro ‘Nombre’.
Por ejemplo, si creaste un atributo llamado ‘Filtrar por material’, entonces puedes agregar los materiales individuales como términos, como lana. Puedes agregar tantos términos como desees a un atributo.
Una vez que hayas terminado, haz clic en el botón ‘Agregar nuevo filtro por material’ para guardar el término.
Agregar el atributo personalizado a un producto
Después de crear un atributo, deberás agregarlo a productos individuales de WooCommerce.
Para esto, abre la página del producto que deseas editar. Desde aquí, desplázate hacia abajo hasta la sección ‘Datos del producto’ y cambia a la pestaña ‘Atributos’.
A continuación, simplemente abre el menú desplegable ‘Atributo de producto personalizado’ y selecciona el atributo personalizado que acabas de crear.
Ahora, procede a hacer clic en el botón ‘Agregar’.
Ahora que se ha agregado el atributo personalizado, simplemente busca el término que coincida con el producto en la opción ‘Seleccionar términos’.
Por ejemplo, si creaste un atributo para el material y el producto que estás editando está hecho de lana, entonces necesitarás elegir ‘Lana’ del menú desplegable.
Una vez que hayas terminado, haz clic en el botón ‘Guardar atributos’.
A continuación, haz clic en el botón ‘Actualizar’ o ‘Publicar’ en la parte superior para guardar tus cambios.
Ahora tendrás que repetir el proceso para todos los productos que comparten el mismo atributo.
Crea un filtro de atributos personalizado usando un plugin
A continuación, necesitarás instalar y activar el plugin YITH WooCommerce Ajax Product Filter. Para más instrucciones, por favor consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Nota: Puedes usar la versión gratuita o premium del plugin para crear un filtro de atributos personalizado para WooCommerce.
Tras la activación, dirígete a la página YITH » Ajax Product Filter desde el panel de WordPress.
Desde aquí, haz clic en el botón ‘+ Crear un nuevo preset’.
A continuación, tienes que escribir un nombre para el preset que estás creando en el cuadro ‘Nombre del preset’.
Una vez que hayas terminado, haz clic en el botón ‘+ Añadir un nuevo filtro’ en la parte inferior para empezar a crear un filtro de atributos personalizado de WooCommerce.
Primero, tendrás que escribir un nombre en el cuadro ‘Nombre del filtro’.
Por ejemplo, si estás creando un filtro que ayudará a los clientes a clasificar diferentes opciones de materiales, entonces puedes nombrarlo ‘Filtro de Material’.
A continuación, simplemente selecciona ‘Taxonomy’ (Taxonomía) en el menú desplegable ‘Filter for’ (Filtrar por). Si estás usando la versión gratuita del plugin, esta opción se elegirá por defecto.
Ahora, el atributo personalizado que creaste ya estará disponible en el menú desplegable junto a la opción ‘Choose taxonomy’ (Elegir taxonomía).
Continúa y elige el atributo personalizado de la lista desplegable y escribe los términos del atributo en el cuadro ‘Choose terms’ (Elegir términos).
A continuación, debes elegir cómo quieres que se muestre el filtro en la parte frontal de tu tienda desde el menú desplegable ‘Filter type’ (Tipo de filtro).
El filtro se puede mostrar como casillas de verificación, menú desplegable, texto, muestras de color, y más.
Una vez que hayas hecho eso, elige un orden predeterminado para los términos filtrados desde el menú desplegable ‘Order by’ (Ordenar por).
Puedes ordenar las categorías del filtro usando el nombre, la cantidad de términos o el slug. También puedes seleccionar el ‘Order type’ (Tipo de orden) para los términos filtrados en orden ascendente (ASC) o descendente (DESC).
Finalmente, haz clic en el botón ‘Save Filter’ (Guardar filtro) en la parte inferior para guardar tu filtro de atributo personalizado.
A continuación, necesitas cambiar a la pestaña ‘General Settings’ (Configuración general) desde la parte superior. Desde aquí, puedes elegir un modo de filtro, ocultar términos vacíos y configurar otros ajustes según tus necesidades.
Una vez que hayas terminado, haz clic en el botón ‘Save options’ (Guardar opciones) para almacenar tus cambios y cambia a la pestaña ‘Customization’ (Personalización) desde la parte superior.
Nota: Si estás usando la versión gratuita, estas configuraciones de personalización no estarán disponibles.
Desde aquí, puedes personalizar cómo se verá tu preset de filtro en la parte frontal de tu sitio web.
Por ejemplo, puedes elegir el color del estilo de la etiqueta, el color del término textual, el tamaño de las muestras de color, el color del área del filtro, y más.
Después de haber hecho tus selecciones, haz clic en el botón ‘Save Options’ (Guardar opciones) y cambia a la pestaña ‘SEO’ desde la parte superior.
Desde aquí, activa el interruptor ‘Enable SEO option’ (Habilitar opción SEO) para activar la configuración.
Puedes agregar etiquetas meta de robots desde el menú desplegable para usarlas en tus páginas filtradas. Esto optimizará el SEO de tu sitio.
También puedes activar el interruptor ‘Agregar "nofollow" a los anclajes de filtro’ para agregar automáticamente el atributo nofollow a todos los anclajes de filtro.
Una vez que esté satisfecho, haga clic en el botón ‘Guardar opciones’ para almacenar la configuración.
Agregue el filtro de atributos personalizados a una página de productos de WooCommerce
Para agregar el filtro de atributos personalizados a una página de tienda de WooCommerce, deberá cambiar a la pestaña ‘Presets de filtro’ en la parte superior.
Desde aquí, copie el shortcode del filtro de atributos personalizados.
A continuación, abra su página de productos 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 esquina superior izquierda para arrastrar y soltar el bloque de Shortcode.
Después de eso, simplemente pegue el shortcode del preset de filtro que copió en el bloque.
Finalmente, haz clic en el botón ‘Publicar’ o ‘Actualizar’ para guardar tus cambios.
Ahora puede visitar su sitio web para ver el filtro de atributos personalizados de WooCommerce en acción.
Consejos adicionales para aumentar las ventas de WooCommerce
Además de agregar filtros de búsqueda, otra forma de aumentar las conversiones en su tienda en línea es mejorar la velocidad de su sitio web.
Una tienda de WooCommerce que carga más rápido puede retener clientes fácilmente y generar más leads.
Para mejorar el tiempo de carga de su tienda, recomendamos cambiarse a SiteGround. Son un proveedor de hosting recomendado por WooCommerce que hace que su sitio web sea súper rápido y viene con características increíbles como Ultrafast PHP, caché de comercio electrónico y más.
Otro consejo es configurar el caché en su tienda de WooCommerce.
Es una técnica que almacena los datos de su sitio web en una ubicación temporal para mejorar el rendimiento. Puede usar cualquiera de los mejores plugins de caché para WooCommerce para mejorar la velocidad.
Aparte de eso, también puedes optimizar las imágenes de tus productos, elegir un tema de WooCommerce que cargue más rápido, usar la última versión de PHP, activar un firewall a nivel de DNS y mucho más para mejorar la experiencia del cliente.
Para obtener instrucciones detalladas, consulta nuestra guía para principiantes sobre cómo acelerar el rendimiento de WooCommerce.
Esperamos que este artículo te haya ayudado a aprender cómo filtrar productos de WooCommerce por atributo y atributo personalizado. También te puede interesar nuestro artículo sobre cómo ofrecer un descuento de envío en WooCommerce y nuestras mejores selecciones de los mejores temas de WooCommerce.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Cuando vi WooCommerce por primera vez, me resultó muy difícil navegar y configurar cualquier cosa. Los filtros de productos eran un requisito que casi todos los que consideraban una tienda en línea tenían. Y no importa qué tipo de productos sean, ya sean ropa o materiales de construcción. Los filtros de productos simplemente se desean para una tienda en línea, y estaba estresado porque realmente no sabía cómo implementarlos en WooCommerce. Gracias a este artículo, aprendí cómo hacerlo, y ahora finalmente tengo la habilidad que todos me pedían. Puedo marcarlo en mi lista de cosas que todavía necesito aprender sobre WooCommerce. Fue un día feliz cuando encontré este sitio web porque vine aquí como principiante y me voy con mucho de lo que he aprendido.