Crear Filtros en tienda online en Divi con Divi Ajax Filter

Crear Filtros en tienda online en Divi con Divi Ajax Filter

¡Hola DivilFans! en este tutorial de Divi les enseñaré a crear Filtros en tienda online en Divi con Divi Ajax Filter de la gente de Divi Engine.

Si estás buscando crear un sistema de filtros avanzados para WooCommerce o ACF y que sean compatibles con Divi, el plugin de Divi Ajax Filter es una de las mejores opciones en la actualidad. Este plugin no solo funciona para productos, sino a través del constructor visual puedes especificar los campos que se filtrarán, entre los que encontramos: productos, portafolio, proyectos, publicaciones del blog y cualquier otro tipo de contenido que quieras.

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Índice

Demo

Crear Filtros en tienda online en Divi con Divi Ajax Filter muestra

Con Divi Ajax Filter podrás filtrar todo tipo de contenidos:

  • Publicaciones del blog
  • Páginas
  • Productos de Woocommerce
  • Proyectos
  • Portafolio
  • o cualquier CPT que tengas creado en tu sitio, incluyendo cursos u otros.
Crear Filtros en tienda online en Divi con Divi Ajax Filter opciones

Además, puedes escoger que elemento quieres filtrar de esos tipos de contenido, entre las opciones tenemos:

  • Categorías
  • Etiquetas
  • Cajas de búsqueda de texto
  • Custom Taxonomys
  • Campos personalizados que hayas creado con ACF
  • Los atributos de productos (Variation Swatches)
  • Precios de producto
  • Calificación de producto

Con este plugin podrás configurar de una manera sencilla y personalizada un sistema de filtros para cualquier tipo de contenido que tengas con Divi.

En este tutorial centramos el ejemplo en la creación de filtros para una tienda online, porque creemos que es una de las funciones donde más podrás aprovechar Divi Ajax Filter Plugin.

Crear Filtros en tienda online en Divi con Divi Ajax Filter categorias

El Gran poder de crear filtros en tu tienda online con Divi

Divi Ajax Filter además te permite personalizar el Loop Archive (el módulo donde aparecer los resultados del filtro) de manera particular. Por ejemplo, para la tienda, te permite editar algunas opciones de visualización de los productos, añadiendo, por ejemplo, el botón de “añadir a carrito”, entre otras opciones de configuración.

¿Piensas que es útil? Si es así, espera a aprender todo lo que ofrecemos en nuestro curso intermedio de Tienda Online con Divi Bodycommerce, plugin que ya trae integrado Divi Ajax Filter. Recuerda que siendo prémium tienes acceso inmediato a este curso, y a todo lo demás que hay disponible en nuestra academia.

Como ves, en nuestro tutorial logramos configurar los filtros para las categorías, etiquetas, filtros de precios, de color, talla, entre otros… De esa manera podemos filtrar los productos en nuestra tienda online de manera avanzada.

Mira aquí las novedades que trae Divi Ajax Filter 2.0:

Artículos relacionados

Comentarios

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  1. Me llama la atención que el botón de añadir al carro o seleccionar opciones, lo centres en la plantilla y luego al visualizar en la tienda te lo justifique a la izquierda, es un error del plugin? se puede corregir?

  2. Hola, mucho gusto, una pregunta, es posible hacer un orden de las categorías de forma personalizada? y que no sea en orden alfabético? actualmente estoy usando el plugin con un cliente, y aunque va de maravillas, el cliente quiere organizar las categorías de una manera personalizada, que no tiene nada que ver con su orden alfabético. Saludos.

  3. Hola Jefferson. Impecable tutorial, sin embargo quede con varias dudas.

    Puedes revisar el link https://carruselazul.cl/categoria-producto/accesorios/ en el filtro de precios no se me visualiza la barra para seleccionar un rango de precios, solo me deja colocar el precio escribiéndolo. Lo otro que me esta sucediendo es que al seleccionar cualquier filtro no toma ninguna opción, es decir no cargan los filtros.

    Cabe destacar que estoy utilizando el Theme Divi desde la descarga de tu curso de Divi Básico y el plugin también lo instale con la descarga de este tutorial.

    Saludos y gracias por compartir esas clases con tus alumnos!!

    1. Que tal Diego, no te preocupes, estamos para ayudar.
      Sobre la primera duda, revisa bien la parte del tutorial donde explicamos que para el filtro de precios debes escoger que este sea un tipo de campo “numérico” esto lo ves en las opciones del filtro específicamente de precios.
      Sobre la segunda duda, esto te está sucediendo porque estás usando el módulo de “productos” de Divi nativo, y no es este el que debes usar, sino el módulo de “archive loop” de Ajax filter, tal como el que usamos en el tutorial. Puedes verificarlo a detalles y te darás cuenta de la diferencia.
      Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐

  4. Hola Jefferson, siempre agradecido por la ayuda que nos das a los que emprendemos en este rubro.
    Tengo una consulta, usando el Divi Ajax Filter en la tienda ¿cuál sería la mejor manera de incluir un buscador que se pueda usar en toda la web?
    Saludos.

  5. Solo que busque en productos, utilizando el diseño de la tienda que está con Divi Ajax Filter.
    Lo hago con divi builder utilizando el Theme Builder “Resultados de la búsqueda” y el buscador por defecto pero no lo detecta en el resultado.

  6. Gracias Jefferson por el tutorial, muy claro todo. Te molesto con una consulta relacionada al plugin, he visto (creo que también realizado por este complemento) que los resultados de los filtros (los productos) tienen una estilo especial, me refiero a que son tipo columnas con fondo blanco, un pequeño borde y una sobra que les brinda un efecto de relieve o profundidad. Es posible poder configurar esto cuando incorporas el modulo de .Archivo Loop?
    Te dejo el link donde vi ese efecto:
    https://ovdemos.com/woocommerce/tienda/

    PD: Además de este plugin de la empresa divi engine, tenes algun curso sobre el resto de los productos de compañia?

    1. Que tal David, un gran saludo. En efecto, con este plugin si se puede crear ese tipo de estilos en los productos. Lo logras realizando un diseño personalizado desde la biblioteca, y luego trayendo ese diseño a través del Archive Loop de Ajax Filter. En este tutorial no lo explicamos pero en nuestro curso de Divi Bodycommerce si: https://uxdivi.com/cursos/curso-intermedio-de-tienda-online-con-divi-bodycommerce

      Si, y sobre cursos de los productos de Divi Engine actualmente tenemos este tutorial, el curso antes mencionado, y el curso de Directorio con Divi Machine que puedes encontrar acá: https://uxdivi.com/cursos/curso-de-directorio-de-bienes-raices-con-divi
      Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐

      1. Gracias, ultima consulta, en el caso de suscribirme como parte del material para descargar están los plugins (ajax filter, bodycommerce)?
        Saludos, David

  7. Saludos Jeff, gracias infinitas por tu contenido.

    Tengo un par de dudas. Como puedo colocarle el signo de $ al filtro por precio? y por ultimo, la misma barra de precios el precio mayor se ve cortado por ejemplo “14.990” solo se alcanza a ver “14.99” no se ven los dígitos siguiente porque salen cortados.

    Gracias por todo.

  8. Hola Jeff, lo veo muy interesante y lo estoy tratando de aplicar en una pagina en concreto que tengo en el generador de temas para unos productos especificos, pero no se como decirle que es para esa pagina en concreto , espero haberme explicado . muchas gracias, saludos.

    1. Que tal Roberto, lo ideal sería que esos productos les crees o una categoría o una etiqueta particular, y que luego crees el layout con el filtro aplicado solo para esa categoría o etiqueta.
      Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐

      1. si me di cuenta de ello con el manejo lo hice en la biblioteca con el modulo tienda asigne una categoría y después cogí el layout de esta con el plugin ahora estoy con la configuración del diseño pero creo que me funcionara, muchas gracias jeff. saludos

¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas más frecuentes que los usuarios hacen sobre Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
10
días
10
horas
10
minutos
10
segundos
¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
10
días
10
hrs
10
min
10
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
10
días
10
horas
10
minutos
10
segundos
25% OFF BLACK FRIDAY SALE!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!