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.
[/et_pb_text][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» background_color=»#f2f2f2″ custom_padding=»25px|25px|25px|25px|true|true» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ box_shadow_spread=»-12px» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]¿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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-12_59_10-Productos-–-My-Blog.jpg» title_text=»2021-07-12 12_59_10-Productos – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» background_color=»#f2f2f2″ custom_padding=»25px|25px|25px|25px|true|true» border_radii=»on|5px|5px|5px|5px» box_shadow_style=»preset3″ box_shadow_spread=»-12px» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_01_51-Escritorio-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_01_51-Escritorio _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_signup provider=»mailerlite» mailerlite_list=»Guaupress|107802088″ last_name_field=»off» success_message=»¡Gracias por suscribirte!» title=»Suscríbete al Boletín!!» description=»Conoce plugins nuevos suscribiéndote GRATIS a nuestro boletín. Nuestros artículos en tu bandeja de entrada!!
» _builder_version=»4.9.4″ _module_preset=»default» border_radii=»on|4px|4px|4px|4px» global_colors_info=»{}»][/et_pb_signup][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]¿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».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_04_52-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_04_52-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_05_28-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_05_28-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]¡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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_07_04-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_07_04-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_08_40-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_08_40-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_08_57-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_08_57-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/acordeon-de-precio.gif» title_text=»acordeon de precio» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_14_16-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_14_16-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]¿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».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_15_19-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_15_19-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]¿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».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_15_53-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_15_53-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_signup provider=»mailerlite» mailerlite_list=»Guaupress|107802088″ last_name_field=»off» success_message=»¡Gracias por suscribirte!» title=»Suscríbete al Boletín!!» description=»Conoce plugins nuevos suscribiéndote GRATIS a nuestro boletín. Nuestros artículos en tu bandeja de entrada!!
» _builder_version=»4.9.4″ _module_preset=»default» border_radii=»on|4px|4px|4px|4px» global_colors_info=»{}»][/et_pb_signup][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-13-14_21_04-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-13 14_21_04-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_16_38-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_16_38-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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»
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_17_55-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_17_55-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_18_12-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_18_12-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_18_36-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_18_36-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_signup provider=»mailerlite» mailerlite_list=»Guaupress|107802088″ last_name_field=»off» success_message=»¡Gracias por suscribirte!» title=»Suscríbete al Boletín!!» description=»Conoce plugins nuevos suscribiéndote GRATIS a nuestro boletín. Nuestros artículos en tu bandeja de entrada!!
» _builder_version=»4.9.4″ _module_preset=»default» border_radii=»on|4px|4px|4px|4px» global_colors_info=»{}»][/et_pb_signup][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_19_05-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_19_05-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-13-14_51_08-Editar-producto-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-13 14_51_08-Editar producto _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_19_34-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_19_34-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_19_47-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_19_47-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-13_19_59-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 13_19_59-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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».
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-18_27_49-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 18_27_49-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-18_28_07-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 18_28_07-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-13-16_24_48-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-13 16_24_48-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-18_28_32-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 18_28_32-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-18_28_43-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 18_28_43-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]Opciones Adicionales Relacionadas al SEO
Por último, también el plugin nos da la opción de configurar algunos aspectos relacionados al SEO.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-18_28_58-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 18_28_58-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-12-18_29_20-Ajax-Product-Filter-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-12 18_29_20-Ajax Product Filter _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-13-11_23_56-Widgets-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-13 11_23_56-Widgets _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-13-16_45_22-Widgets-_-My-Blog-—-WordPress.jpg» title_text=»2021-07-13 16_45_22-Widgets _ My Blog — WordPress» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]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.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-13-11_28_07-Productos-–-My-Blog.jpg» title_text=»2021-07-13 11_28_07-Productos – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]
El botón de reestablecer filtros sólo aparecerá cuando hayamos seleccionado alguna opción de filtrado.
[/et_pb_text][et_pb_image src=»https://guaupress.com/wp-content/uploads/2021/07/2021-07-13-11_26_43-Productos-–-My-Blog.jpg» title_text=»2021-07-13 11_26_43-Productos – My Blog» _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» border_radii=»on|4px|4px|4px|4px» box_shadow_style=»preset3″ global_colors_info=»{}»][/et_pb_image][et_pb_text _builder_version=»4.9.4″ _module_preset=»default» custom_margin=»35px||35px||true|false» global_colors_info=»{}»]
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!
[/et_pb_text][et_pb_signup provider=»mailerlite» mailerlite_list=»Guaupress|107802088″ last_name_field=»off» success_message=»¡Gracias por suscribirte!» title=»Suscríbete al Boletín!!» description=»Conoce plugins nuevos suscribiéndote GRATIS a nuestro boletín. Nuestros artículos en tu bandeja de entrada!!
» _builder_version=»4.9.4″ _module_preset=»default» border_radii=»on|4px|4px|4px|4px» global_colors_info=»{}»][/et_pb_signup][/et_pb_column][/et_pb_row][/et_pb_section]
2 comentarios en «Cómo agregar el más completo Filtro de Productos Woocommerce con un simple plugin»