Cómo crear barras laterales filtradas para sus páginas Divi WooCommerce

Si alguna vez ha intentado agregar barras laterales filtradas de WooCommerce a páginas que ha creado con creadores de páginas, probablemente haya notado que los filtros no aparecen en sus páginas. No importa qué creador de páginas esté utilizando, los filtros simplemente no se mostrarán.

La razón es que esos widgets no son compatibles con los creadores de páginas. En este artículo, veremos una manera fácil de crear barras laterales filtradas de WooCommerce para páginas creadas con Divi Builder o cualquier otro creador de páginas.

Barras laterales estándar de WooCommerce

WooCommerce incluye varios widgets filtrables.

• Filtrar productos por atributo
• Filtrar productos por precio
• Filtrar productos por clasificación

Estos widgets funcionan muy bien en temas normales de WordPress, pero no se muestran en páginas creadas con creadores de páginas.

Temas de WordPress

Los widgets filtrables funcionan bien dentro de las páginas creadas con temas normales de WordPress. The Twenty Seventeen los muestra en la barra lateral sin problemas. Estoy usando los datos de muestra de WooCommerce que incluyen colores y precios. Destacan los productos de filtro por atributo y por precio.

Aquí está Divi mostrando la página de la tienda predeterminada de WooCommerce sin usar Divi Builder. Muestra los widgets de filtro como cualquier tema normal.

Constructores de WordPress

Las páginas creadas con constructores no muestran los widgets de filtro de WooCommerce. No importa si la barra lateral se muestra dentro del constructor o como la barra lateral estándar. Aquí están algunos 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 que la barra lateral se muestra sin los widgets de filtro. Publiqué la página para verla en vivo, pero no hizo ninguna diferencia.

Este 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 verla en vivo pero no hubo diferencia.

Aquí está el Divi Builder que muestra la misma barra lateral. El uso del complemento o tema Divi Builder tuvo el mismo resultado. Publiqué la página para verla en vivo, pero los filtros aún no se mostraban.

Mostrar filtros de WooCommerce en las barras laterales del constructor

Afortunadamente, existe una manera fácil de mostrar un filtro de producto de WooCommerce en la barra lateral, incluso si está creando la página del producto con un creador de páginas. Necesitamos un complemento llamado Filtro de producto WooCommerce.

Themify - Filtro de producto de WooCommerce

WooCommerce Product Filter es un complemento gratuito de Themify que funciona de manera diferente a los widgets estándar de filtro de productos WooCommerce. Cree fácilmente múltiples combinaciones de filtros. Cree el formulario con el generador de formularios de arrastrar y soltar. Configúrelo en vertical u horizontal, elija la cantidad de columnas y ajústelo para que coincida con su sitio web. Muestra resultados de búsqueda en vivo e incluye muchas opciones. Es intuitivo de usar y funciona con todos los creadores de temas.

Crear un filtro de producto nuevo

Instale el complemento del depósito de WordPress. En el menú Panel, vaya a Filtros de productos > Filtros de productos > Agregar nuevo . Obtendrá un modal con todo lo que necesita para crear el filtro. Revise la configuración para crear su código corto. En lugar de tener tres widgets de filtro, este filtro puede crear varios tipos de filtros personalizados para crear cualquier número de widgets.

Ponle un título que describa el filtro. Elija entre un diseño vertical u horizontal, ya sea para mostrar campos vacíos, clasificación de productos, recuentos de productos y productos agotados. Elija si desea mostrar o no la paginación y elija entre estándar, desplazamiento infinito o cargar más.

Ingrese el número de productos por página. Elija si desea que los grupos de campos se puedan alternar, para desplazarse hasta el resultado, elija entre la lógica Y u O para las taxonomías 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.

Una vez que haya realizado sus selecciones, deberá crear el formulario. Esto determinará cómo aparecerá el filtro dentro de la barra lateral. Arrastre cada uno de los elementos del formulario que desee al campo en la parte inferior de la pantalla de creación de shortcode.

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.

Ponle un título. Puede ocultar el título si lo desea. Elija si desea mostrar o no los recuentos de productos, la jerarquía de categorías e incluir elementos secundarios. Muestre el filtro como una casilla de verificación, vínculos, botones de opción, cuadro desplegable o selección múltiple. Elija la lógica, establezca el orden de clasificación y elija el diseño con el número de columnas. Establece 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 configurar los colores de cada categoría de producto de forma individual. Establezca el color del fondo y el texto. Puede elegir los colores de los selectores o ingresar los códigos hexadecimales dentro de los campos.

También puede arrastrar y soltar los campos en el orden que desee. Una vez que haya creado el filtro, seleccione Guardar .

Cierre el modal y verá su filtro agregado a la lista. Proporciona el nombre, el código abreviado y la lista de campos dentro del filtro. Puede editar, exportar o eliminar el filtro. Copia el shortcode.

Agregue un widget de texto a su barra lateral y pegue el código corto.

Los filtros ahora se muestran dentro de las páginas de la tienda que se crean con los constructores. Aquí está la página con Divi Builder.

Aquí está el filtro que se muestra en la página hecha Beaver Builder en el tema Twenty Sixteen.

Aquí está el filtro con Elementor en el tema Twenty Seventeen. Éste usa un diseño horizontal.

Uso de Themify - Filtro de producto WooCommerce con diseños Divi

Divi tiene muchos diseños de tiendas para elegir. En este ejemplo, agregué un módulo de texto a la página Tienda de muebles y coloqué el código corto del filtro dentro del módulo de texto. Podría haber elegido el módulo de la barra lateral, pero realmente no importa con este ejemplo.

Este es el diseño vertical. Encaja muy bien en el diseño del diseño.

Configuré los botones para que coincidan con el estilo del diseño. Desafortunadamente, no pude ajustar el botón de búsqueda.

Aquí está el diseño horizontal. Este ejemplo todavía usa el diseño de columna 3/2 que elegí para el filtro vertical.

Los filtros se abren al pasar el mouse. Responde, por lo que se muestra verticalmente para ajustarse a la columna.

Para este, 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 dentro de un módulo de texto o dentro de una barra lateral, puede agregar algo de estilo usando la pestaña Diseño del módulo Divi. Esto significa que puede aplicar estilo al texto de la etiqueta aplicando estilo al texto del módulo. En este ejemplo, puse el texto en rojo, aumenté el tamaño y lo hice todo en mayúsculas.

Filtrado de productos de WooCommerce

Para realizar la búsqueda, el usuario hace clic en los botones, marca las casillas y desliza el control deslizante para filtrar lo que está buscando. También pueden ingresar un título. Cuando estén listos, simplemente hagan clic en el botón de búsqueda.

Resultados de la búsqueda

Los resultados luego mostrarán la forma en que lo configuró en la configuración. Para este, lo configuré para que los muestre en la parte inferior de la página. Se desplaza automáticamente a los resultados y proporciona al usuario una función de clasificación.

Si lo configura para que se abra en una nueva página, colocará los resultados en la parte inferior de esa página. En este ejemplo, creé una página usando el encabezado de la página Tienda de muebles. Abrí la función de clasificación para mostrar las opciones de clasificación.

Pensamientos finales

Ese es nuestro vistazo a cómo crear barras laterales de WooCommerce filtradas para la página creada con Divi Builder. El complemento es intuitivo y agrega muchas funciones de filtrado a los productos WooCommerce. Puede crear tantos filtros como desee y colocarlos en cualquier página que desee. Incluso puede diseñarlos con las características de estilo de Divi. Dado que es un código abreviado, puede usarlos dentro de barras laterales o módulos.

Me gustaría tener más control sobre cómo se muestran los resultados. Por ejemplo, sería útil colocar un código corto donde aparecerá el resultado. Esto permitiría colocar los resultados en cualquier lugar de la página en lugar de en la parte inferior. Esto permitiría pies de página personalizados, un área de resultados dentro de una página, etc. También me gustaría tener algunas opciones de estilo más. Principalmente, quiero darle estilo al botón de búsqueda.

Themify - WooCommerce Product Filter es una excelente opción si desea un complemento gratuito para agregar un filtro de producto a sus páginas de Divi Builder.

Queremos escuchar de ti. ¿Ha probado el complemento Themify - WooCommerce Product Filter con páginas de tienda creadas con Divi Builder? Cuéntanos tu experiencia en los comentarios.

Imagen destacada a través de Max Griboedov / shutterstock.com