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

Si alguna vez ha intentado agregar barras laterales filtradas de WooCommerce a las páginas que ha creado con los 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 de WooCommerce filtradas 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 calificación

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

Temas de WordPress

Los widgets filtrables funcionan bien en las páginas creadas con temas regulares de WordPress. El 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 generador 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. He agregado un widget de texto para que pueda ver que la barra lateral se muestra sin los widgets de filtro. Publiqué la página para ver 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 ver en vivo pero no hubo diferencia.

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

Mostrar filtros de WooCommerce en las barras laterales del constructor

Afortunadamente, hay 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 WooCommerce Product Filter .

Themify – Filtro de productos de WooCommerce

WooCommerce Product Filter es un complemento gratuito de Themify que funciona de manera diferente a los widgets de filtro de productos estándar de WooCommerce. Cree fácilmente múltiples combinaciones de filtros. Cree el formulario con el generador de formularios de arrastrar y soltar. Configúralo en un diseño vertical u horizontal, elige el número de columnas y dale estilo para que coincida con tu 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.

Creación de un nuevo filtro de productos

Instale el complemento desde el 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. Vaya a través de la configuración para crear su shortcode. En lugar de tener tres widgets de filtro, este filtro puede crear múltiples tipos de filtros personalizados para crear cualquier cantidad de widgets.

Dale 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, conteos de productos y productos que están agotados. Elija si mostrar o no la paginación y elija entre desplazamiento estándar, infinito o cargar más.

Introduzca 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 AND u OR para las taxonomías , y si los resultados se muestran en la página actual o en una página nueva. 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 hecho sus selecciones, deberá crear el formulario. Esto determinará cómo aparecerá el filtro dentro de la barra lateral. Arrastre cada uno de los elementos de 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 Categoría.

Ponle un título. Puedes ocultar el título si quieres. Elija si mostrar o no los recuentos de productos, la jerarquía de categorías e incluir niños. Muestre el filtro como una casilla de verificación, enlaces, botones de radio, 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. Establezca los colores del texto. También puede elegir qué categorías incluir o excluir.

Si elige el color, los íconos abrirán un conjunto de selectores de color donde puede configurar 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 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. Copie el código abreviado.

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

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 el Divi Builder.

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

Aquí está el filtro con Elementor en el tema Twenty Seventeen . Este utiliza un diseño horizontal.

Uso de Themify – Filtro de productos 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 la tienda de muebles y coloqué el código abreviado del filtro dentro del módulo de texto. Podría haber elegido el módulo de la barra lateral, pero en realidad no importa con este ejemplo.

Este es el diseño vertical. Se adapta muy bien al diseño del diseño.

Configuré los botones para que coincidieran 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 3/2 columnas que elegí para el filtro vertical.

Los filtros se abren al pasar el mouse. Es receptivo, por lo que se muestra verticalmente para caber dentro de 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 abreviado 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 diseñar el texto de la etiqueta al diseñar el texto del módulo. En este ejemplo, configuré el texto en rojo, aumenté el tamaño y lo puse 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 hacen clic en el botón de búsqueda.

Resultados de la búsqueda

Los resultados se mostrarán de la forma en que lo configuró en la configuración. Para este, lo configuré para mostrarlos 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 la tienda de muebles. He abierto 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 de WooCommerce. Puede crear tantos filtros como desee y colocarlos en cualquier página que desee. Incluso puedes diseñarlos con las funciones de estilo de Divi. Dado que es un código corto, puede usarlos dentro de las 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 shortcode 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 diseñar el 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. ¿Has probado el complemento Themify – WooCommerce Product Filter con páginas de tiendas creadas con Divi Builder? Cuéntanos tu experiencia en los comentarios.

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