Con el widget Filtros de productos, los compradores pueden filtrar sus búsquedas de productos según atributos como Precio, Clasificación, Color y Categoría.

Aprendamos cómo puede utilizar los widgets de filtros de productos en su WooCommerce sitio:

Cómo agregar filtros de productos en su sitio web Elementor WooCommerce #

Aprenda cómo agregar elementos a su sitio web Elementor WooCommerce y personalizar el diseño y el estilo del filtro de productos. Este proceso consta de sólo 4 pasos.

Paso 1: habilite el widget de filtros de productos #

Para habilitar el widget Filtros de productos,

• Ir a ShopEngine > Widgets > Filtros de productos
• Encender Filtros de productos en la sección General
• Ahorrar cambios

Nota: También puede activar los filtros de productos con una configuración global que enciende todos los widgets de ShopEngine al mismo tiempo.

Paso 2: agregar filtros de producto #

Antes de poder agregar el widget, primero debe crear la plantilla de tienda/archivo de ShopEngine. Consulte la documentación en cómo crear una plantilla de tienda.

Para agregar filtros de productos:

• Ir a ShopEngine > Plantillas > Plantilla de archivo
• Haga clic en Editar con Elementor

• Buscar para filtros de productos en la opción de búsqueda de elementos
• Arrastrar y soltar el widget 
• Haga clic en Actualizar para guardar los cambios.

Paso 3: Personalice la configuración de contenido de los filtros de productos #

Ir a Contenido > Filtros para personalizar las siguientes configuraciones:

• Filtro de precios: Haga clic en la opción de edición para cambiar el título, el rango de precios, el precio mínimo, el precio máximo y el tipo de punto. El tipo de punto son los puntos finales de la línea de precios.
• Filtro de calificación: Puede cambiar el título del filtro de calificación.
• Filtro de color: Aquí puede cambiar el nombre del filtro. También puede activar/desactivar la opción Mostrar puntos de color.
• Filtro de categoría:  Puede personalizar el título, las categorías de productos y el pedido por. Mostrar jerarquía. También puedes ocultar categorías vacías desde aquí.
• Filtro de imagen: Puedes cambiar y personalizar el título. Luego, los usuarios pueden filtrar los productos según las imágenes del producto.
• Filtro de etiquetas: Puede cambiar el título y los usuarios pueden filtrar productos según las etiquetas.
• Filtro de envío: Los usuarios pueden elegir este filtro para filtrar los productos según el método de envío.
• Filtro de acciones: Este filtro permite a los usuarios filtrar los productos según la cantidad de existencias.
• Filtro en oferta: Si los usuarios lo desean, pueden filtrar los productos en función de la venta. Entonces, si su tienda ofrece alguna oferta, los clientes podrán encontrarla fácilmente.

Ir a Contenido > Diseño para personalizar las siguientes configuraciones:

• Habilitar el botón de alternancia del contenedor: Aquí puede activar la opción del botón de alternancia para que todo el widget pueda ocultarse debajo de un botón de alternancia. También puede configurar la alineación, configurar si desea mostrar el ícono, cargar un ícono, elegir la posición del ícono y también el ancho del contenedor.
• Columnas (por fila): Elija cuántos archivadores desea por columna.
• Relleno de columna: Ajuste el relleno izquierdo, derecho, superior e inferior de la columna.

Ir a Contenido > Atributos para personalizar las siguientes configuraciones:

• Habilitar atributos: Si desea mostrar atributos, configure MOSTRAR; de lo contrario, OCULTAR.
• Estilos: Elija Predeterminado o Círculo como estilo de atributos.
• Lista de atributos: Puede agregar nuevos elementos y editar los detalles aquí.

Paso 4: Configuración de estilo de los filtros de productos #

Ir a Estilo pestaña para personalizar las siguientes configuraciones de estilo:

• Estilos comunes: Expanda esta opción para cambiar el título, la tipografía, la tipografía del cuerpo, el color del título, el color de la etiqueta del filtro, la familia de fuentes global, el relleno del título en la parte inferior, el margen inferior del elemento, el estilo de la casilla de verificación, el icono de la casilla de verificación, la biblioteca de iconos, el color del borde de la casilla de verificación, el color del icono marcado, el fondo marcado , Margen derecho, Tamaño del icono de la casilla de verificación, Tamaño de la casilla de verificación, Posición vertical y Radio del borde.
• Botón y contenedor de alternancia de filtro: Para trabajar en esta opción, en primer lugar, tienes que encender el ¿Habilitar el botón de alternancia de contenedor? opción de la sección Contenido como hemos descrito antes. Para entenderlo claramente, vea la imagen a continuación. Ahora puede editar esta opción en la sección Estilo y cambiar el color del texto y el fondo tanto para la vista normal como para la vista flotante. Además, hay opciones para cambiar el tipo de borde, el ancho, el color, el relleno, el margen, el color de fondo del contenedor, el tipo de borde, el relleno del contenedor (px) y la sombra del cuadro del contenedor.

• Filtro de precios/control deslizante de rango: Expanda esta opción para cambiar el color del control deslizante, el color del control deslizante activo, el color del texto del rango de precios, el color inferior del margen de reinicio, el texto y el color de fondo para la vista normal y flotante.
• Filtro de calificación: Aquí puede elegir el ícono de calificación, el color del ícono activo, el espacio entre la calificación y el tamaño de las estrellas.
• Filtro de categoría: Ajuste el relleno superior, derecho, inferior e izquierdo alrededor de la subcategoría.

Después de realizar todos los cambios, haga clic en Actualizar ahorrar. Ahora los filtros de productos deberían estar visibles en el escaparate con toda la personalización y el estilo.

Aquí está el avance del widget de filtros de producto

El widget de filtro de productos de ShopEngine tiene diferentes funciones que facilitan el proceso de búsqueda de productos del cliente. Y la documentación debería ser útil en su estudio e instalación del widget.