Cómo agregar el más completo Filtro de Productos Woocommerce con un simple plugin

Compartir en:

Regresar a: Todas las Entradas

Uno de los tópicos más repetidos, más buscados, más necesarios, es el de cómo implementar filtros de productos Woocommerce (filtros woocommerce).

A veces resulta un poco difícil encontrar las herramienta adecuadas para implementarlos. Ya que algunas más que facilitarnos las cosas, terminan complicándonoslas más. Ya sea por el pésimo diseño, demasiadas limitaciones de configuración o la dificultad que suponen implementarlas.

Puesto que un filtro de Productos supone elemento tan crucial a nivel de experiencia de usuario, que ya es casi una norma el tenerlo en toda tienda online, hoy te traemos el paso a paso para implementar nuestro filtro de productos, sin morir en el intento.

El plugin YITH Woocommerce Ajax Product Filter nos facilitará la vida

Hay muchos plugins para filtrado de productos. Hoy vamos a analizar uno de los más versátiles y fáciles de implementar. El plugin de YITH Woocommerce Ajax Product Filter. De la conocida marca Yith, cuyos plugins hemos analizados varias veces en nuestro Blog.

Descarga el Plugin para que lo pruebes tú mismo

Puedes descargar éste plugin premium desde la barra lateral de éste artículo (Si lo lees desde escritorio) o en la parte inferior de mismo (Si nos lees desde móviles), también puedes buscar ésta herramienta directamente en la barra de búsqueda de nuestro menú principal.

Recuerda que los botones de descarga se desbloquean cuando eres miembro del Club Guau. Únete a ésta comunidad para tener acceso a cientos de plugins y temas premium y sacar el máximo provecho a nuestros tutoriales.

¿Cuál es el objetivo de hoy?

Hoy armaremos la hermosura que se ve en la imagen de abajo. Crearemos un grupo de filtros woocommerce que se mostrará en la página de tienda. Los cuáles son:

Un control deslizante para filtrar productos según su precio.

Una lista con casillas marcables para filtrar los productos según su categoría.

Una opción para que sólo se muestren los productos en oferta.

Y una sección que muestra los colores por los cuales podemos filtrar los productos.

Cabe mencionar que éstas NO son las únicas opciones de filtrado del plugin. Es sólo las que trabajeremos hoy. Mientras vayamos armando todo, mencionaremos también qué más se puede lograr con éste plugin. Que creánme que es muy potente.

Descarga el Plugin para que lo pruebes tú mismo

Puedes descargar éste plugin premium desde la barra lateral de éste artículo (Si lo lees desde escritorio) o en la parte inferior de mismo (Si nos lees desde móviles), también puedes buscar ésta herramienta directamente en la barra de búsqueda de nuestro menú principal.

Recuerda que los botones de descarga se desbloquean cuando eres miembro del Club Guau. Únete a ésta comunidad para tener acceso a cientos de plugins y temas premium y sacar el máximo provecho a nuestros tutoriales.

Configurando los Filtros woocommerce

Lo primero que vamos a hacer es, como en los anteriores análisis de plugins de Yith que hemos analizado, elegir la pestaña Yith desde el panel de wordpress. Y en éste caso, seleccionar la subpestaña Ajax Product Filter.

¿Filtros woocommerce preestablecidos?

Al ingresar a la página de configuración del plugin, apareceremos por defecto en la pestaña «Filtrar Preestablecidos». ¿Qué son los pre-establecimientos?

Lo que el plugin llama preestablecimientos podemos tomarlo como grupos de filtros. Podemos crear diferentes grupos y utilizarlos para situaciones y páginas diferentes.

Para empezar éste ejercicio vamos a crear uno haciendo click al botón «Añadir pre-establecimiento».

Empecemos a agregar Filtros woocommerce

Y ya hemos agregado uno nuevo. Lo que debemos agregar ahora es el título para éste grupo y obviamente los filtros. Para añadirlos vamos a hacer click al botón «Añadir nuevo Filtro».

¡Nuestro primer Filtro! (filtros woocommerce)

Ahora empezaremos a ver por dentro cómo es por dentro el creador de filtros y las opciones que tiene.

Lo primero es el nombre del filtro. Es importante porque es el nombre que se mostrará antes del filtro en el frontend.

El siguiente punto clave es la opción de «Filtrar por». Desde ésta parte vamos a seleccionar el criterio según el cual se realizará el filtrado. En la imagen de abajo podemos ver las opciones que presenta. Vamos a mencionarlas:

Taxonomía: Nos permite que se filtre por cualquier taxonomía que tengamos creada. Dígase Etiquetas, Categorías, u alguna otra personalizada. Además, ésta opción nos permite seleccionar los atributos que hayamos creado para nuestros productos. Veremos un caso de ésto más adelante.

Ordenar por: Nos da las opciones de orden de productos, parecido a loque nos viene por defecto en woocommerce.

Rango de Precio: Nos permite establecer Rangos, por ejemplo: de 1 a 5 usd, de 5 a 10 usd, de 10 a 15 usd, etc.

Ésta opción no utilizaremos hoy, pero resulta muy útil en muchas circunstancias.

Deslizante de Precio: Sirve para Filtrar los productos por precio como la opción anterior, pero ésta vez se presenta como un control deslizante. En un rato veremos cómo es eso.

Valoracion: Filtro según la cantidad de estrellas que se han puesto en las valoraciones de productos.

En Inventario/En descuento: Interesante para mostrar sólo los productos que estén en stock o los que estén en oferta. Éste último usaremos más adelante.

Según lo que vimos ue vamos a construir el día de hoy,lo primero que necesitamos es un deslizante de precio. Así que esa será la opción que elegiré para empezar.

Configuraciones propias de ésta Opción

Cómo se dijo, elegimos la opción de Deslizar Precio. Las siguientes configuraciones que aparecen son específicas para ésta opción. Tales cómo «Valor mínimo del deslizante», el valor mínimo que se dejará elegir al cliente. Algo análogo configuramos con «Valor máximo del deslizante».

La opción «Paso del deslizante», nos permite elegir de cuánto en cuánto se moverá el control del deslizante.

Configuraciones generales a todas las opciones

Si bien las primeras configuraciones son propias de la opción de filtrado inicialmente elegida, hay opciones que aparaceren en todas. Este es el caso de la opción de alternador.

Al activarse, nos permite que el filtro se muestre a modo de acordeón. En escritorio quizá no se aprecie mucho, pero es una gran ventaja en móviles dónde el espacio es limitado.

Más abajo podemos elegir si queremos que por defecto el acordeón esté abierto o cerrado. Yo voy a dejarlo como abierto.

Segundo Filtrado: Por Categorías de Productos(filtros woocommerce)

Una vez que hayamos terminado el filtro anterior, vamos a el botón de la parte de inferior que dice «Añadir nuevo filtro», para empezar a construir el siguiente.

En éste queremos que se filtre por categorías de producto. Para ello, en «filtrar por» elegiremos ésta vez «Taxonomía».

La primera configuración exclusiva para ésta opción es la de escoger con qué taxonomía se trabajará. Como puede verse en la imagen de abajo, hay para escoger entre etiquetas, categorías, y los atributos que yo tengo creados para mis productos. En ésta ocasión elegiremos «Categorías del producto».

¿Qué términos te interesan incluir?

Lo genial de éste plugin es que permite escoger exactamente qué términos de la taxonomía quieres mostrar. En éste caso particular, qué categorías serán.

En la opción escoger términos podemos escribir todas las categorías que queramos incluir. Si no recuerdas sus nombres o no las tienes a la mano, puedes hacer click al botón «AÑADIR TODO» para agregar todos los términos automáticamente.

Una vez se muestre todo, puedes ir eliminando los que no desees utilizar. En mi caso, voy a eliminar la categoría que viene por dfecto en wordpress, que es » Sin Categorizar».

 ¿Cómo se mostrará éste filtro?

La opción de Taxonomías muestra los términos de una determinada taxonomía para que el usuario elija. A través de la opción «Tipo de Filtro» podemos elegir cómo se mostrarán esas opciones. Por ejemplo:

Con Casilla de verificación se mostrarán casillas que el isiario podrá marcar.

Con Radio, es de manera similar. Pero no permite selección múltiple.

Con Seleccionar, se mostrarán las opciones en una lista despegable.

Con texto, se mostrará como un texto simple con enlace.

Muestras de color, es una opción interesante que nos permite asignar a cada opción un color para mostrar. Evidentemente va perfecto para atributos relacionados al color. Utilizaremos ésta opción más adelante.

Etiqueta/Imagen, nos permite asignar una imagen a cada opción. Se puede usar pro ejemplo para mostrar logos de marcas. 

Para éste ejemplo utilizaré «Casilla de verificación».

Personalizando los términos para los filtros woocommerce

Dependiendo de lo que hayamos elegido, se mostrará de modo distinto la parte de «términos personalizados». 

Desde ésta seción podemos editar algunas características a mostrar de cada término. Por ejemplo, en éste caso que hemos elegido «casilla de verificación»; nos permite solamente definir la «Información emergente», que es el mensaje que sale al pasar el ratón por cada opción.

Opciones Adicionales

Algunas configuraciones adicionales que podemos encontrar son:

Mostrar como alternador, que ya vimos.

«Ordenar por» y «Tipo de orden», que se refiere a cómo se ordenarán los términos elegidos.

«Mostrar recuento de artículos» para mostrar la cantidad de productos en cada opción. Ésto se mostrará al final del término. Así: Categoría1 (25).

Mostrar Jerarquía es para elegir cómo se trabajará con las subcategorías dentro de las categorías.

Por último, «Permitir selección múltiple», hace lo que su nombre dice. ésta opción es importante. Por ejemplo, en el caso de que tengas productos que pertenecen a varias categorías  a la vez.

Tercer Filtrado: Mostrar sólo Ofertas

Otra opción muy interante que le resultará muy útil a los clientes es poder filtrar sólo los productos de la tienda que están en oferta. Para ello, añadiremos un nuevo filtro.

Le añadiré el título, y en Filtrar por elegiré, «En Inventario/En descuento».

Más abajo, nos permite escoger por separado exactamente qué deseamos mostrar. En mi caso, desactivarén la opción de «En Inventario» para sólo dejar activo «En descuento»

Opciones adicionales Generales

Luego, vemos algunas opciones que ya hemos descrito antes.

Lo que elegiré yo será: Activar el alternador. Y desactivaré mostrar el recuento. Lo demás lo dejaré como está.

No olvidar siempre, al terminar de trabajar con cada filtro, hacer click al botón «GUARDAR FILTRO». 

Cuarto Filtro: Mostremos Colores (filtros woocommerce)

Como se dijo líneas arriba, en la opción de taxonomías, se puede escoger también atributos. En éste caso, voy a escoger el atributo «color del producto» que previamente configuré en cada artículo.

Como ya se vió en procedimientos anteriores, hacemos click en el botón AÑADIR TODO para que se agreguen todos los términos que hayamos utilizado.

Recordemos que los términos de los atributos se añaden desde la pestaña de «Atributos» en la configuración de cada producto. Ésta es una característica que viene por defecto en Woocommerce.

En el tipo de Filtro, ésta vez escogeremos «Muestras de color». Al elegirlo, se nos abrirán las opciones para definir el número de columnas de colores y en «términos personalizados», podremos elegir la información emergente que ya vimos antes; y la un color para cada opción.

Al hacer click en cada color se nos abrirá una paleta de colores para definir el que necesitemos. 

Como se ve en la imagen de abajo, hice coincidir cada color con su respectivo término.

Más abajo, nos aparecen algunas opciones generales adicionales. Las cuales ya detallamos cuando configuramos el filtrado por categorías. En éste caso, solo activaré la opción de «mostrar como alternar».

Con éste último fitro ya hemos configurado todo tal lo queríamos al inicio. No olvidar, al terminar, darle a «SAVE PRESET» para guardar cambios.

Algunos Ajustes Generales Interesantes

Desde ésta pestaña podemos configurar algunas cosas que harán que el filtrado se adapte a tus necesidades específicas.

Cabe mencionar que muchas de ellas están perfectas en su modo «Por defecto».

Agregando Botón de Restablecer

Quizá una de las configuraciones más importantes de ésta sección sea la de «Mostrar Botón restablecer» con el cual activamos el botón para resetear los filtros woocommerce.

Más abajo, podremos elegir dónde se mostrará dicho botón. Yo elegiré la ubicación más habitual, la cual es «Tras los filtros». Osea, después de los filtros woocommerce.

Personalizando los Estilos de filtros woocommerce

Desde la pestaña «personalización» podremos configurar todos los estilos que involucran los elementos del filtro,(filtros woocommerce);Colores de las letras, etc. De una manera muy visual.

Opciones Adicionales Relacionadas al SEO

Por último, también el plugin nos da la opción de configurar algunos aspectos relacionados al SEO.

Ahora, ¿Cómo mostramos los filtros woocommerce?

Hasta ahora ya hemos creado cuatro filtros woocommerce distintos dentro de un grupo de filtros. Pero, si han ido a su página de productos se habrán dado cuenta que aún no se muestra nada. Entonces, ¿Cómo se añaden?

Si regresamos a la primera pestaña donde configurábamos los prestablecimientos (Que recordemos era su forma de decir: grupos de filtros), podemos ver cada uno genera automáticamente un shortcode.

Para agregar el filtro dónde queramos, bastaría con copiar y pegar su shortcode. Y listo.

Éste sería el primer método para añadir los filtros woocommerce a una página.

Agregando filtros woocommerce mediante widget

El método que utilizaremos nosotros será mediante un widget que trate el plugin. El cual añadiremos a la barra lateral. 

Para ello, nos vamos  ala sección de apariencia>widgets, dentro del panel de WordPress. Y buscamos el de nombre: Yith AJAX Pre-establecimientos, y lo añadiremos a la barra lateral que se encuentre en la página de tienda.

Como puede verse en la imagend e abajo, también hay un widget para agregar el botón de restablecer filtro. Nosotros no lo agregaremos porque ya activamos un botón de restablecimiento desde los ajustes generales.

Por fin, veámos cómo nos quedó

Ahora si podemos ir a nuestra página de tienda para poder ver cómo se ve nuestro grupo de filtros.

Un aspecto sumamente profesional.

 

El botón de reestablecer filtros sólo aparecerá cuando hayamos seleccionado alguna opción de filtrado.

 

Como puede verse logramos el objetivo esperado. Nos hemos explayado un poco en algunas características extra, pero han podido notar que en la práctica, crear un grupo de filtros woocommerce con éste plugin es sumamente sencillo.

Ya saben, si desean filtrar por una característica específica de su producto, pueden crear los atributos respectivos y tal como lo hicimos con color, crear un filtrado en base a ello. Ésto hace a éste plugin una herramienta muy potente, adaptable a las necesidades de cualquier rubro.

Gracias Guaumigos por seguirme hasta aquí. No olviden suscribirse al boletín para recibir nuevos artículos gratuitos de nuestro Blog. Y en caso quieran desbloquear la descarga de la herramienta utilizada hoy, junto a cientos de temas y plugins premium, pueden unirse al club Guau desde Aquí.

Nos vemos (si se puede decir así) en el próximo artículo! 

0 comentarios

Trackbacks/Pingbacks

  1. Mejora el buscador de productos para Woocommerce con opciones avanzadas Ajax - GuauPress - […] como veíamos en el artículo anterior: Cómo agregar filtros a Woocommerce, una de las consultas más recurrentes es sobre qué…
  2. Añadir Selector de Color, Imagen y Etiqueta en las Variaciones de Producto en Woocommerce - GuauPress - […] con artículos centrados en Woocommerce. Después de explicar el artículo de Cómo agregar Filtros de productos a Woocommerce  y…

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Descarga TODO

Desbloquea los Botones de Descarga directa de todas las herramientas de la web, con una de nuestras membresías:

Membresías

Obtén Acceso Ilimitado a todos los enlaces de descarga directa uniéndote al:


CLUB GUAU

Síguenos!

Sigue la FanPage Oficial de Guaupress:


Ver Blog

Mira todas las entradas que tenemos, desde la página de Blog


Más Entradas del Blog

The fresh Casinos on the internet

ArticlesEstablish Your Local casino MembershipPa On-line casino BonusesCan i Get A welcome Incentive To possess Play on My personal Android os? Cellular casinos will likely be reached by beginning the newest gambling establishment on the mobile device. While some...

Beste Online Kasino Qua Handyrechnung Bezahlen

ContentCasino Zahlungsmethoden Für jedes Natel EinzahlungenWirklich so Darf Man In Einem Angeschlossen Spielbank Unter einsatz von Mobilfunktelefon BezahlenGibt Es Diese Zahlung Qua Telefonrechnung In Alpenrepublik Ferner Das Confoederatio helvetica?Ended up being Ist...

Totally free No-deposit Local casino Bonus Rules

PostsTournaments, Bonuses, and CampaignsTotally free Game You to definitely Shell out Champions As opposed to In initial depositTotally free Mobile Harbors Online When your account is made and affirmed, the minute shell out casino land of heroes casino no deposit...

Us Invited No-deposit Casino Bonuses To possess Get 2024

ContentDifferent kinds of No-deposit ExtraAre Fee Procedures Entitled to No deposit Incentives?Better Casino Coupon codes To possess GamesNo-deposit Gambling establishment Added bonus 2024 As the a note, playthrough requirements have to be met inside the allotted...

Как получить выигрыш в онлайн-казино, Pokerdom официальный сайт автоматы для онлайн-видеопокера, реальные деньги

СтатьиБонусные раундыМножителиRTPРассыпание дизайновДжекпоты Онлайн-слоты в казино с реальным доходом могут представлять собой электронно-цифровую разновидность старомодных игровых автоматов. Они используются для ряда других запросов о возможностях, например,...

Лучший способ Игорное игровые автоматы играть бесплатно пробки заведение Игровые автоматы Рутина

СтатьиСлоты станут новейшим видом игры в онлайн-казино.Они автоматические с ГСЧ.Они доступны с сотовыми телефонами.Что они выплачивают более высокие джекпоты всю ночь Игровые автоматы интернет-казино в последнее время существенно подешевели, и это всегда сказывается....

Mr Bet Spielbank Review 2023

ContentFruchtwein Popular Payment Methods At Mr BetTagesordnungspunkt BonusesExquisite Live Drogenhändler Table Available As part of Mr BetWhat In Addition To Anticipate From Mr Bet Netz Spielbank Promotions?Loyalty And Bekannte persönlichkeit Programs Tora Mr Bet...