Revisión del filtro de productos de WooCommerce: filtros de productos AJAX flexibles

Si tiene una tienda WooCommerce, debe facilitar que los compradores encuentren los productos que les interesa a sus muchas ofertas. Una de las mejores maneras de hacer esto es con los filtros de productos. Por ejemplo, permitiendo a las personas filtrar por precio, color, categoría, etc. Verá este enfoque en casi todas las tiendas de comercio electrónico. Sin embargo, si bien WooCommerce le brinda algunos widgets básicos de filtro, el complemento nativo de WooCommerce carece en gran medida de cualquier tipo de sistema de filtración de productos avanzado. El complemento de filtro de producto Freemium WooCommerce lo cambia. Le brinda una variedad de filtros que sus compradores pueden usar, incluida una opción AJAX que les permite filtrar los productos sin recargar la página. Estos incluyen cuadros de búsqueda, intervalos (por ejemplo, precios), cuadros de selección (por ejemplo, categorías), botones, selectores de atributos, listas de caída, conmutación, filtro de taxonomía personalizado y más.
En nuestras prácticas de revisión WooCommerce Product Filter, lo guiaremos a través de todo lo que este complemento tiene para ofrecer. Revisión del filtro de productos de WooCommerce: características clave

En resumen, el filtro de productos de WooCommerce ofrece a sus compradores. Opciones para filtrar los productos de acuerdo con diferentes criterios, como precios, categorías, etiquetas, atributos (por ejemplo, tamaño o color), revisión, ventas y más. También les permite buscar palabras clave con una función de búsqueda de AJAX en vivo. Puede agregar sus filtros:
En la barra lateral usando widgets dedicados.
En un diseño elemental con una integración elemental dedicada.
En cualquier otro lugar de su sitio utilizando un shortcode.direct en los archivos de plantilla de su base utilizando una función PHP.
Tiene muchas opciones de filtración diferentes:
Precio: una diapositiva min/max
Rango de precios: seleccione entre intervalos de precio predeterminados (que puede personalizar)
Categorías
Etiquetas
Atributos del producto: opciones de introducción de color, diapositivas y más
Autor de productos: hermosa para tiendas con varios proveedores
Productos Recomendados
Productos en venta
El estado de las acciones
Evaluación del producto
Palabra clave: un cuadro de búsqueda para buscar después del texto
Taxonomía personalizada y campos personalizados, incluida la compatibilidad de ACF
Además, cada opción de filtro incluye varios tipos de entrada. Por ejemplo, si usa intervalos de precios predeterminados, puede permitir a los usuarios elegir su intervalo utilizando cuadros de selección o una lista desplegable. Algunas opciones también tienen mucho más que eso. Por ejemplo, dependiendo del filtro, puede usar:
Botones de radio (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
desnatadora
Color
conmutación
El artículo continúa a continuación


Además, en general, obtendrá muchas opciones para controlar la función y el estilo de sus filtros. Por ejemplo, puede mostrar un conjunto de filtros para visitantes a dispositivos móviles y otro para los visitantes en el escritorio. O bien, puede mostrar un conjunto de filtros para productos en una categoría y un conjunto diferente para productos en otra categoría (en cuanto a las etiquetas). Esto le permite asegurarse de que los filtros siempre estén optimizados para el visitante/productos en cuestión. Pasemos a practicar y le mostraré cómo funciona … básicamente con el filtro de productos de WooCommerce, utilizo la versión Premium WooCommerce Product Filter para esta sección. Sin embargo, la interfaz básica es la misma en la versión gratuita. Una vez que instala y activa el complemento, el primer paso es crear su primer “Filtro”. Un filtro es un grupo de opciones y luego desea permitir que los compradores filtren. Podría ser una cosa, como un rango de precios, o podría ser más.
Como se mencionó anteriormente, puede crear más grupos de filtros y mostrar diferentes grupos de filtros en diferentes situaciones. Creando su primer filtro para iniciar, acceda al filtro de productos Woo → Agregar un nuevo filtro. Después de haber dado un nombre, recibirá tres pestañas de configuración para controlar cómo funciona.
El artículo continúa a continuación
En primer lugar, usará el menú desplegable para elegir qué tipo de filtro (s) para agregar. Por el primero, elegiré la variante del intervalo de precios. También puede elegir “precio” para darle a las personas una diapositiva de precio. Si lo desea, puede agregar más filtros. Como lo hace, los verá actualizados automáticamente en una vista previa en vivo de los filtros completados:

Para configurar un filtro individual, puede expandir sus opciones en la lista. Por ejemplo, si extiende el filtro para el rango de precios, obtendrá muchas opciones para controlar sus características y visualización. Por ejemplo, si lo cambia de una lista de cuadros de selección a una lista desplegable, puede ver que la vista previa en vivo se actualiza:

Diferentes filtros le darán diferentes configuraciones. Por ejemplo, si agrega el cuadro de búsqueda por texto, podrá elegir qué contenido buscar. Puede incluir/excluir contenido, extractos, categorías, atributos, SKU, etc.

En general, cada opción de filtro le brinda mucho control para seleccionar la entrada. Puede elegir entre diferentes entradas, como cuadros de selección, botones de radio, menús de caída, etc., según sea necesario. Incluso obtienes algunos únicos. Por ejemplo, para el filtro de evaluación, puede incluir evaluaciones de estrellas en una sola línea (visitantes hacen clic en tantas estrellas) o en varias filas.

El artículo continúa a continuación

Una vez que haya terminado, debe tener una lista de filtros que se ve a continuación. Si desea cambiar el orden de cualquier opción de filtro, solo puede sacarlas y colocarlas en una nueva posición:

Explorar el filtrado de taxonomía personalizada Una de las características más únicas es la capacidad de configurar filtros personalizados basados ​​en taxonomía personalizados o campos personalizados. Obtendrá integraciones creadas para herramientas de contenido personalizadas populares, como campos personalizados avanzados (ACF) y la interfaz de uso para la publicación personalizada (IU CPT). También funcionará con otras taxonomías personalizadas, incluso con las que ha creado manualmente. Por ejemplo, si vende música, puede agregar una taxonomía personalizada para “género”. Luego, puede configurar fácilmente esa taxonomía personalizada como filtro utilizando cualquiera de las diferentes opciones de entrada. Así es como podría verse con los conmutadores: la configuración de la configuración de la opción, puede acceder a la pestaña Opciones para configurar algunas configuraciones para todos sus filtros. Una de las opciones más importantes es si activa o no AJAX. Cuando se activan, los compradores pueden usar filtros sin tener que recargar la página, lo cual es una experiencia realmente fácil de usar. Otra opción importante es dónde mostrar este grupo de filtros y quién debería verlos. Puede activar/desactivar filtros en diferentes contenidos de WooCommerce o en diferentes dispositivos (Mobile Vs Desktop). Esto es útil porque le permite crear experiencias optimizadas mostrando diferentes filtros en diferentes situaciones. También le ayuda a crear una experiencia más fácil para los visitantes móviles. Por ejemplo, puede usar una casilla de verificación para visitantes en el escritorio, pero una entrada más adaptada para dispositivos móviles para visitantes a dispositivos móviles.

En las otras opciones, puede tomar algunas opciones adicionales: Botones: configurar todo sobre los botones de filtro.

Contenido: controle el área de contenido del producto. Por ejemplo, puede agregar un botón “Mostrar más” o reconciliar los productos después de que un comprador aplique un filtro. El complemento también le brinda un código corto para mostrar sus productos, lo cual es útil si desea crear una página de filtro dedicada.


Cargador: personalice/desactive el icono de carga que aparece durante la aplicación de filtros cuando se usa AJAX.

Configuración de la configuración de diseño Eventualmente, puede acceder a la pestaña Diseño para configurar los estilos de filtro. Algunas opciones importantes aquí son:

Usando los estilos construidos del complemento o los estilos de su tema.
Configuración del ancho y la altura.
Agregar CSS o JavaScript personalizado.
Las otras hojas (bloques, títulos y botones) son todas opcionales. Si lo desea, puede activar estilos personalizados para estas áreas para poder anular todas las configuraciones de estilo con sus propias opciones. Así es como se ve si activas estilos personalizados:
Mostrando sus filtros en este momento, ha terminado casi, todo lo que queda por hacer es mostrar los filtros de compradores. Nuevamente, WooCommerce Product Filter le brinda más opciones para hacer esto:
Nativo de Widget WordPress
Elementor de widget
Código corto

Función php

Por ejemplo, si agrega un widget dedicado de filtro de producto WOO, puede elegir qué filtro mostrar con el menú desplegable:
Y luego aquí están los filtros en la barra lateral de la tienda, los configuré para heredar el estilo de mi base:
Los métodos cortos y PHP también son bastante explícitos. Pero echemos un vistazo más profundo a la integración de Elementor, porque sé que muchos de ustedes podrían usar Elementor WooCommerce Builder para diseñar su tienda. Aquí, creo una plantilla de archivo de productos usando Elementor WooCommerce Builder. En primer lugar, creé un diseño de dos columnas en el que incluí archivos de productos de widgets en la columna izquierda para mostrar todos mis productos. Luego puedo agregar el nuevo widget wooofilters a la columna derecha para mostrar los filtros. También puede crear y personalizar los filtros sin salir de la interfaz elemental, que es una hermosa ventaja: en la pestaña de estilo Elementor, también puede acceder a todas las opciones en la interfaz de filtro de producto WooCommerce habitual. La pestaña Advanced Elementor le ofrece todas las opciones en la pestaña Diseño (junto con todas las opciones habituales de Elementor). En general, si usa Elementor, este widget es muy conveniente para incluir filtros de productos en sus precios de diseño para el filtro de productos de filtro de producto de WooCommerce, viene en una versión gratuita en wordpress.org y en una versión premium que agrega más funciones. La versión gratuita incluye la mayoría de las características básicas, mientras que la versión premium le ofrece más opciones para filtrar funciones, como el cuadro de búsqueda y las listas de cuadros de selección (multiselecto) e iconos para filtrar los atributos del producto. Si quieres convertirte en profesional, hay tres planes. Los planes tienen características idénticas, la única diferencia es en cuántos sitios puede usar el complemento:
1 sitio – $ 49
5 sitios- $ 99
Sitios web ilimitados-199 USDG, filtro de productos de WooCommerce En general, consideramos que el filtro de productos de WooCommerce es una forma intuitiva y flexible de agregar filtros de productos a su tienda WooCommerce. Todos los filtros funcionaron cuando los probé y los filtros AJAX se cargaron rápidamente (referencia, mi tienda tiene alrededor de 15 productos). Los filtros también son muy flexibles, con muchas configuraciones para controlar las entradas, la funcionalidad, el estilo y más. Además, me gusta que tenga tantas opciones para mostrar filtros, especialmente la integración elemental, ya que le permite trabajar directamente desde la interfaz elemental. Si desea probarlo, puede obtener la mayoría de las funciones gratuitas. Luego considere la actualización para tener acceso al cuadro de búsqueda y otros filtros avanzados. Obtener la versión Pro Get Get Greate Version