Revisión del filtro de productos de WooCommerce: filtros flexibles para su tienda

Si tiene una tienda WooCommerce, su objetivo siempre debe ser lo más fácil posible para sus visitantes. Si tiene muchos productos, una de las mejores maneras de hacerlo es con los filtros de productos. Probablemente haya experimentado estas cosas al comprar en línea: puede filtrar por categoría, precio, tamaño, atributos, etc. Básicamente, los filtros le permiten tomar una gran lista de productos y solo filtrarlo en los elementos que le interesan.
WoCommerce incluye algunos widgets de filtro de productos para ayudarlo a agregar esta función a su tienda, pero son bastante limitados y no puede personalizarlos en su tienda en nuestro filtro de productos WooCommerce, veremos el complemento de WordPress Freemium que permite Usted para configurar su propio sistema de filtración personalizable. Podrá agregar filtros para categorías, etiquetas, atributos, precios, palabras clave, taxonomías/campos personalizados y más. Además, puede crear diferentes grupos de filtros y mostrarlos en diferentes escenarios, de modo que se asegure de que los filtros siempre estén optimizados para ciertos productos/usuarios.
También hay una amabilidad especial para los usuarios de elementos: debido a una integración dedicada, podrá hacer todo esto directamente desde la interfaz elemental, que es muy conveniente si usa Elementor para diseñar su tienda WooCommerce. Sin embargo, no debe usar Elementor. Continúe leyendo para obtener más información sobre lo que ofrece este complemento y ver una visión práctica de cómo funciona. Nota – Inicialmente escribí nuestra primera revisión del filtro de productos de WooCommerce en diciembre de 2020. Sin embargo, reescribimos por completo esta revisión en noviembre de 2021 para tener en cuenta los cambios y actualizaciones del complemento. Filtro de productos de WooCommerce: Lista de características a un nivel alto, WooCommerce El filtro de productos lo ayuda a agregar filtros de productos personalizables a su tienda WooCommerce. Uno de los detalles sobre el complemento que se destaca es cuán flexible es cuando se trata de controlar el comportamiento de sus productos. Para comenzar, puede elegir entre una variedad de diferentes tipos de filtros, incluidos los siguientes:

Buscar por palabras clave
Categorías de Producto
Etiquetas de productos
Taxonomías personalizadas: completamente compatible con la interfaz de usuario de tipo post del complemento
Los atributos del producto
Campos personalizados: completamente compatible con un complemento avanzado de campos personalizados
Precio: un cursor Min/Max Precio
Rango de precios: elija entre intervalos de precios predeterminados (y personalizables).
El autor del producto
Productos en venta
Productos Recomendados
Evaluación del producto
El estado del stock del producto
Para cada filtro, recibirá una gama de opciones diferentes, incluida la posibilidad de elegir entre una gama de diferentes tipos de entrada. Las opciones introductorias exactas dependen del filtro en cuestión, pero la lista total incluye las siguientes opciones: Lista de cuadros de selección (selección múltiple)
Botones de radio (selección única)
Desplegable
Menú múltiple de caída (la caída mostrará todas las opciones, y los compradores pueden usar cuadros de selección para seleccionar múltiples opciones en el menú Drop -down)
colores
Botones
Texto
Cambiar
desnatadora
Para mostrar sus filtros, puede elegir entre cuatro métodos diferentes:
Widget wordpress
Código corto
Función php
Elementor de widget
También puede usar reglas de dirección para mostrar diferentes filtros en ciertos dispositivos (escritorio vs mobil) y en cierto contenido de WooCommerce (por ejemplo, una determinada categoría de productos). Esto le permite personalizar sus filtros para optimizar para el usuario y/o para los productos que un usuario navega.
Finalmente, también obtienes una serie de otras funciones útiles, incluidas las siguientes:
Usted/Compradores pueden conectarse directamente a una determinada configuración de filtro utilizando los parámetros de consulta (que el complemento puede generar automáticamente).
Los filtros pueden heredar el estilo de su base o personalizarlos solos.
Los compradores pueden restablecer fácilmente los filtros.
La integración del complemento para el filtro de producto WooCommerce, además de todas las funciones anteriores, el filtro de productos de WooCommerce se integra con muchos otros complementos que puede usar, incluidos los proveedores de WC (para más proveedores) y su vista rápida de WooCommerce.
WooCommerce Product Filter también tiene una integración profunda con el complemento elemental. Puede configurar los filtros de productos directamente desde la interfaz Elementor y también recibirá widgets elementales dedicados para incluir filtros en sus diseños. Esto puede ser especialmente útil si utiliza el WooCommerce Builder de Elementor Pro para diseñar las plantillas de temas para la tienda y un solo producto. Un ejemplo de un filtro de productos de WooCommerce en acción para darle una idea de los tipos de filtros de productos que puede crear, para ver un ejemplo real de filtro de productos de WooCommerce en el front-end de una tienda. Luego, en la siguiente sección, le mostraré cómo funcionan las cosas en el backend. Si desea ver una versión en vivo de esta demostración para reproducirse con los filtros, haga clic en el botón a continuación y desplácese hacia abajo:
Ir a Demo Frantend
Básicamente con el filtro de productos de WooCommerce ahora, vamos a practicar con el complemento y le mostraré cómo es usar el complemento y configurar filtros en su tienda, pero primero, una nota rápida. Si desea jugar solo con el complemento, el desarrollador aloja un sitio demostrativo totalmente funcional, que le brinda acceso a todas las funciones front-end y back-end. Entonces, si desea experimentar todo esto por usted, puede hacer clic en el botón a continuación:

Ir al backend de demostración
Con eso en el camino, sigamos y te mostraré cómo funciona. Creando un nuevo grupo de filtros para comenzar con el complemento, querrá crear un nuevo “Filtro”. Cada “filtro” puede contener más filtros, por lo que creo que es mejor pensar en ellos como “filtros”. Los llamaré grupos de filtro para esta revisión para aclarar las cosas, pero solo verá el término “filtrar” cuando trabaje en la interfaz. Una cosa útil sobre el complemento es que puede crear grupos de filtros ilimitados y mostrarlos en diferentes partes de su sitio o para diferentes usuarios. Por ejemplo, puede crear un grupo de filtros para una determinada categoría de producto o crear un grupo de filtro separado para usuarios móviles. Esto le brinda la flexibilidad para optimizar los filtros del producto para cada situación. Agregar nuevos filtros a su grupo de filtros Después de crear un grupo de filtros, puede elegir los filtros individuales que desea incluir en este grupo. Cada grupo de filtro puede incluir tantos o como pocos filtros que desee. Nuevamente puede elegir entre las siguientes opciones:
Precio
El rango de precios
Ordenar por

Categorías de Producto
Etiquetas de productos
Atributo
Campos personalizados (si tiene campos personalizados)
Autor
aconsejable
En venta
El estado de las acciones
EVALUACIÓN
Buscar el texto
Después de agregar un filtro, sucederán dos cosas:
Recibirá configuraciones adicionales para ese filtro.
Verá una vista previa en vivo de su grupo de filtros.
Es bueno tener una vista previa en vivo, porque puede ver cómo funcionará cada filtro. Sin embargo, no se preocupe demasiado por el estilo/diseño real, porque puede personalizarlo más tarde (incluso para que coincida con su tema de WooCommerce). También puede usar el deslizamiento y la ubicación para cambiar el orden de los filtros, si es necesario. Para expandir la configuración de un filtro individual, puede hacer clic en él. Aquí, podrá tomar decisiones clave, como el tipo de campo de introducción, min/max, etiquetas y más. En general, esta área es realmente la “carne” del complemento de filtro de productos de WooCommerce, por lo que pasaré mucho tiempo aquí. Una de las cosas que realmente me nota es cuán flexible es el complemento y cuántas opciones tiene para personalizar los tipos de entrada, comportamiento, lógica y más. La configuración que obtenga para cada filtro será única para ese tipo de filtro, así que veamos algunos ejemplos diferentes … el rango de precios para el intervalo de precios permite a los compradores encontrar todos los productos que tienen precios entre un cierto mínimo /máximo . Una de las cosas que me gustan de este filtro es que tiene mucha flexibilidad para controlar los intervalos de precios. Puede elegir entre tres opciones:

Coloque el complemento para generar intervalos automáticamente en función de sus productos. Puede elegir el paso deseado y dejar que el complemento haga su magia.
Establezca el intervalo manual solo.
Agregue campos de entrada para la interfaz para que los compradores puedan introducir sus propios intervalos personalizados. Aparecerá como un rango de precios “personalizado” además de los intervalos predeterminados.
En lugar de mostrar el rango superior/inferior, también tiene la opción de agregar un valor sobre/por debajo de los límites de los filtros de intervalo. Aquí hay un ejemplo de cómo se ve: atribuye que uno de los tipos de filtros más flexibles es el filtro de atributos, porque le permite agregar filtros para cualquier atributo del producto, por ejemplo, color, tamaño, etc. En primer lugar, seleccionará el atributo por el cual desea dejar que las personas se filtren. Luego puede elegir entre una amplia gama de tipos de entrada que incluyen:

Lista de cuadros de selección (selección múltiple)
Botones de radio (selección única)
Desplegable
Menú múltiple de caída

colores


Botones
Texto
Cambiar
desnatadora
Por ejemplo, suponga que filtra según el atributo de color, lo que hago para este ejemplo. En lugar de mostrar solo texto para cada color, puede mostrar muestras de color reales para que las personas las elijan. Si elige esto, se abrirán una serie de nuevas configuraciones para controlar el icono, los colores y más:
Incluso puede elegir más colores para el fondo, lo que le permite crear un efecto como este:
También tiene a su disposición una serie de otras opciones, como:
Uso de etiquetas personalizadas
Muestra el número de cada atributo
Agregar solo atributos específicos como opciones

Cambiar la lógica de clasificación

En general, generalmente es muy flexible, lo que lo convierte en un buen ejemplo de la flexibilidad que ofrece el filtro de productos de WooCommerce. Categorías de productos El filtro de categorías de productos es otro buen ejemplo del filtro de productos de WooCommerce cuando se trata de tipos de entrada. Para este filtro, puede elegir entre seis formas diferentes de mostrar las opciones de filtro en la interfaz de su tienda: Radio Burns (selección única)

Menú de primavera (selección única)
Menú múltiple de caída
Lista de cuadros de selección (selección múltiple)
Botones
Texto
También recibirá muchas otras opciones como …
Mostrar categorías jerárquicas
Incluyendo categorías secundarias en el filtro cuando un comprador selecciona una categoría de padres
Se muestran imágenes
…mucho más
Busque después del texto al final, para mirar la búsqueda después del filtro de texto, porque esta es otra opción única. Este filtro agrega un cuadro de búsqueda que los compradores pueden usar para filtrar los productos después de una palabra clave. Lo bueno aquí es que puede elegir exactamente qué información puede comprar compradores, incluidos …
Título
Contenido
extracto
Categorías
Etiquetas
atributo

Sku
Meta campos
También puede agregar finalización automática (aunque solo funciona sobre la base del título, categorías o etiquetas de un producto):
Configuración de otras opciones Después de haber agregado todos los filtros, puede acceder a la pestaña Opciones para controlar un comportamiento importante para su grupo de filtros en su conjunto. Estas son algunas de las opciones que puede hacer:
Filtros AJAX: si activa AJAX, los usuarios pueden buscar/filtrar sin recargar la página. Si lo deshabilita, los usuarios deberán recargar la página para aplicar sus filtros. Dirección del contenido: puede mostrar su grupo de filtros en todas las páginas de WooCommerce o ciertas páginas, categorías, etiquetas, etc. Por ejemplo, puede crear un grupo de filtros especiales para una determinada categoría de productos.
Dirección en el dispositivo: puede mostrar su grupo de filtro a todos los visitantes o solo usuarios en un escritorio o dispositivo móvil. Por ejemplo, puede mostrar diferentes filtros y/o tipos de introducción a los visitantes en su computadora y aquellos en dispositivos móviles.
Hay otros sub-filoses con configuraciones importantes. Por ejemplo, en la pestaña Botones, puede elegir si se aplica automáticamente filtros como un usuario selecciona o espere a que los usuarios hagan clic en el botón. El control del proyecto eventualmente, la pestaña de diseño le permite controlar el estilo/diseño de sus filtros, así como la distancia (es decir, ancho y altura). Para la mayoría de las tiendas, probablemente solo querrá marcar la casilla Usar estilos de temas. Esto hará que el complemento coincida automáticamente con los filtros con el diseño del tema:
Sin embargo, si desea más control, también tiene la oportunidad de usar sus propios estilos personalizados y/o agregar CSS y JavaScript. Si desea usar estilos personalizados, puede configurar la mayoría de ellos por interfaz:
Mostrando los filtros en su tienda para controlar dónde mostrar los filtros en su tienda, tenga algunas opciones:
Widget WordPress (agrégalo accediendo → widgets)

Código corto
Función php
Widget Elementor (agrégalo a través de la interfaz Elementor) Por ejemplo, cuando agrega el widget, puede seleccionar el grupo de filtros deseado usando un menú desplegable:
Una cosa para recordar es que puede agregar más grupos de filtros y cada uno se mostrará de acuerdo con su dirección de dirección. Por ejemplo, si tiene un grupo de filtros dirigidos a la categoría A y otro grupo de filtros que se dirigen a la categoría B, puede agregar ambos filtros, pero solo verá el filtro relevante para cada categoría. Explorando la configuración del complemento Aunque interactuará en gran medida con el complemento al crear filtros, también hay un área de configuración pequeña que incluye algunas opciones útiles, como la capacidad de generar HTML en función de los estándares WCAG para mejorar la accesibilidad:

Los precios para el filtro de productos de productos de WooCommerce WooCommerce Filtro de productos vienen tanto en una versión gratuita en wordpress.org como en una versión premium con múltiples características. Aquí hay una comparación parcial de características entre versiones gratuitas y premium:

Si necesita la versión premium, hay tres planes de precios. Todas las licencias pagadas desbloquean todas las funciones; La única diferencia es el número de sitios que puede activar el complemento:

Un sitio – $ 49
Cinco sitios- $ 99
Sitios ilimitados: $ 199
Creo que el precio es lo suficientemente estándar para una extensión de WooCommerce y ofrece un buen valor para la funcionalidad que obtiene. Pensamientos finales sobre el filtro de productos de WooCommerce En general, me impresionó la profundidad de la funcionalidad ofrecida por WooCommerce Product Filter. Además de darle muchos tipos diferentes de filtros en general, tiene muchas opciones para controlar cómo funciona cada filtro. Por ejemplo, elegir entre diferentes tipos de entrada, control de comportamiento y más. También es agradable apoyar la creación de filtros basados ​​en atributos, campos personalizados y taxonomías personalizadas. Esto puede permitirle crear algunos conjuntos de filtros realmente útiles, que son únicos para los productos que vende. Finalmente, creo que es muy útil poder mostrar diferentes grupos de filtros en diferentes partes de su tienda o para usuarios en diferentes dispositivos, ya que esto le permite asegurarse de proporcionar una experiencia de filtración óptima. Si desea probarlo, puede probarlo con la versión gratuita en WordPress.org. Luego, si le gusta lo que ve, considere la transición a la versión premium para desbloquear las funciones y tipos de filtros más avanzados. También puede probar una demostración completa de la versión premium haciendo clic aquí. El sitio web principal
Página de WordPress.org
¿Tiene alguna pregunta sobre el filtro de productos de WooCommerce? ¡Pregunte en la sección de comentarios!