Cómo crear barras laterales filtradas para sus páginas de división de WooCommerce

Si alguna vez ha intentado agregar barras laterales de WooCommerce a las páginas que creó con los generadores de páginas, probablemente notó que los filtros no aparecen en sus páginas. No importa qué constructor de páginas use, simplemente no se mostrarán los filtros. . La razón es que estos widgets no son compatibles con los constructores de páginas. En este artículo, analizaremos una manera fácil de crear barras laterales de WooCommerce filtradas para las páginas hechas con Divi Builder o cualquier otro constructor de páginas. Barras laterales estándar de WooCommerce

WooCommerce incluye más widgets de filtro.
Filtrar los productos por atributo
Filtrar los productos por precio
Filtrar los productos después de la evaluación
Estos widgets funcionan excelentes en temas ordinarios de WordPress, pero no se muestran en páginas hechas con páginas. Temas de WordPress

Los widgets de filtro funcionan bien en las páginas hechas con temas ordinarios de WordPress. Los veinte diecisiete los muestran en la barra lateral sin problemas. Utilizo datos de muestra de WooCommerce que incluyen colores y precios. El filtrado de los productos después del atributo y el precio son prominentes.

Aquí está el Divin que muestra la página predeterminada de la tienda WooCommerce sin usar Divi Builder. Muestra widgets de filtro como cualquier tema normal.
Las páginas de WordPress Builders hechas con los constructores no muestran widgets de filtro WooCommerce. No hay diferencia si la barra lateral se muestra dentro del constructor o como la barra lateral estándar. Aquí hay unos ejemplos.

Esta página fue construida con Beaver Builder. Incluye la barra lateral, pero los filtros no se muestran. Agregué un widget de texto para que pueda ver la barra lateral que se muestra sin los widgets de filtro. Publiqué la página para ver en vivo, pero no hice ninguna diferencia. Fue construido con Elementor. Agregué la barra lateral sobre los productos. Muestra el widget de texto pero no los filtros. También publiqué la página para ver en vivo, pero no hubo diferencia.

Aquí hay una división de constructor que muestra la misma barra lateral. El uso del complemento o la división del constructor igual fue el mismo resultado. Publiqué la página para ver en vivo, pero los filtros aún no se mostraron. Los filtros de WooCommerce se muestran en las barras laterales de Builder Afortunadamente, hay una manera fácil de mostrar un filtro de producto de WooCommerce en la barra lateral, incluso si crea la página del producto con un constructor de páginas. Necesitamos un complemento llamado Filtro de producto WooCommerce. Themify – Filtro de productos de WooCommerce

WooCommerce Product Filter es un complemento gratuito de Themify que funciona de manera diferente a los widgets estándar de filtración de productos de WooCommerce. Cree fácilmente más combinaciones de filtros. Cree el formulario con la ayuda de los formularios de arrastrar y soltar. Contáctalo en un aspecto vertical u horizontal, elija el número de columnas y estilice para que se ajuste a su sitio web. Muestra los resultados de la búsqueda en vivo e incluye muchas opciones. Es intuitivo usar y funciona con todos los constructores de temas.

Creación de un nuevo filtro de productos
Instale el complemento desde WordPress Warehouse. En el menú en el tablero, vaya a los filtros del producto> Filtros de productos> Agregar un nuevo. Obtendrá un modal con todo lo que necesita para crear el filtro. Cruza tu configuración para crear tu código corto. En lugar de tener tres widgets de filtro, este filtro puede crear varios tipos de filtros personalizados para crear cualquier cantidad de widgets. Dale un título que describe el filtro. Elija entre un aspecto vertical u horizontal, si desea mostrar campos vacíos, clasificación de productos, número de producto y productos que ya no están en stock. Elija si mostrar o no la paginación y elegir entre un desfile infinito estándar o cargar más. Inserte el número de productos en la página. Elija si desea activar los grupos de campo, ejecute el resultado, elija entre lógica y / para taxonomentos y si los resultados se muestran en la página actual o en una nueva página. Si elige una nueva página, podrá seleccionar la página de una lista. También puede elegir si el filtro se muestra o no en la nueva página.

Después de haber realizado las selecciones, deberá crear el formulario. Esto determinará cómo aparecerá el filtro en la barra lateral. Tire de cada uno de los elementos de forma deseados en el campo en la parte inferior de la pantalla de creación de código corto.
Cada elemento abre un nuevo conjunto de características. Cada uno es diferente, pero la mayoría tiene opciones similares. Aquí hay un vistazo a la categoría. Dale un título. Puedes ocultar el título si quieres. Elija si mostrar o no el número de productos, la jerarquía de categorías e incluir niños. Muestre el filtro como un cuadro de selección, enlaces, botones de radio, cuadro de caída o selección múltiple. Elija lógica, configure el orden de clasificación y elija el número de columnas. Establezca los colores del texto. También puede elegir qué categorías incluir o excluir. Si elige el color, los iconos abrirán un conjunto de selectores de color, donde puede establecer los colores de cada categoría de producto individualmente. Establezca el color para el fondo y el texto. Puede elegir los colores de los selectores o puede ingresar los códigos hexagonales en los campos.

También puede extraer los campos en el orden que desee. Después de haber creado el filtro, seleccione Salva.

Cierre el modal y verá el filtro agregado a la lista. Ofrece el nombre, el código corto y la lista de campos en el filtro. Puede editar, exportar o eliminar el filtro. Copie el código corto.

Agregue un widget de texto a la barra lateral y péguelo al código corto.


Los filtros ahora se muestran en las páginas de las tiendas creadas con constructores. Aquí está la página con Divi Builder.

Aquí está el filtro que aparece en la página hecha por Beaver Builder en el tema de veintisiete dieciséis.

Aquí está el filtro con Elementor en el tema veintiséis años. Utiliza una apariencia horizontal.

Uso del filtro de productos Temify – WooCommerce con div Div

Div tiene muchos modelos para elegir. En este ejemplo, agregué un módulo de texto en la página de la tienda de muebles y puse el código de filtro corto en el módulo de texto. Podría haber elegido el módulo de barra lateral, pero no importa con este ejemplo. Esta es la apariencia vertical. Encaja maravillosamente en el diseño de diseño.

Configuré los botones para que coincidan con el estilo de estilo. Lamentablemente no pude ajustar el botón de búsqueda.
Aquí está la apariencia horizontal. Este ejemplo continúa utilizando la apariencia de la columna 3/2 que he elegido para el filtro vertical.

Los filtros se abren en el flotador. Es receptivo, por lo que se muestra verticalmente para caber en la columna.

Para esto, coloqué el filtro debajo del módulo de la tienda.

Aquí está el filtro sobre el módulo de la tienda.

Ya sea que use el código corto en un módulo de texto o una barra lateral, puede agregar un estilo utilizando la pestaña de diseño del módulo Divic. Esto significa que puede estilizar el texto de la etiqueta estilizando el texto del módulo. En este ejemplo, establecí el texto en el rojo, aumenté el tamaño y lo hice en mayúsculas. Filtrado de productos de WooCommerce

Para realizar la búsqueda, el usuario hace clic en los botones, marque las casillas y deslice la diapositiva para filtrar lo que está buscando. También puedo ingresar un título. Cuando estoy listo, simplemente hago clic en el botón de búsqueda.

Resultados de la búsqueda

Los resultados mostrarán la forma en que lo configurará en la configuración. Para esto, lo configuré para mostrarlos en la parte inferior de la página. Lleva automáticamente los resultados y proporciona al usuario una función de clasificación.