Cómo crear tabla comparativa para productos de Woocommerce con Divi

Profesor: Jefferson M.

Publicación: 2 julio 2020

Contenido Premium

Desbloquea este contenido suscribiéndote o accediendo con tu cuenta.

En este vídeo tutorial premium aprenderás a crear una tabla comparativa para productos de Woocommerce con Divi y enlazar la misma a los productos de la tienda para añadir a carrito. Es una table algo laboriosa pero bastante funcional y para la que no necesitamos ningún tipo de plugin.

Además recuerda que puedes descargar el layout completo de la table desde los recursos que se encuentran en la parte inferior de esté post o desde la zona de layouts de la intranet.

Objetivo:

Seguramente te ha pasado que quieres establecer una comparación de las características de varios productos en una tabla dentro de Divi, pues bien, en este tutorial te vamos a enseñar como crear esta tabla sin ningún tipo de plugin y totalmente personalizada con el Divi Builder.

Resultado:

Una vez que apliques el tutorial lograrás crear una tabla comparativa, con los botones de producto integrados en la misma, y con los detalles necesarios para poder integrarla con Woocommerce. Dentro del tutorial no colocamos los precios, los colocamos fuera de cámara, pero lo que hicimos fue agregar un módulo de texto nada más.

Además de esto hicimos una adaptación dentro del tutorial, donde aplicamos pequeños cachos de código para hacer que se vieran 2 columnas en la vista de móvil y con eso lográramos un efecto interesante, además de que sea legible la table en móvil tambien

Con el tutorial obtendrás un resultado como éste:

Recuerda que si quieres aprender a customizar o personalizar la página de producto con el theme builder tenemos un tutorial donde te enseñamos a hacerlo, así como también otro que te permite personalizar la página de categorías y de resultados de búsqueda de tu tienda online con Woocommerce.

Y finalmente recuerda que tenemos este curso de Divi, donde te enseñamos a detalle a manera el tema, y tambien éste curso de crear una tienda online con Divi y Woocommerce, donde te enseñamos paso a paso a crear una tienda con un diseño impactante con Divi y Woo.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido premium.

Recursos, snippets y descargas

Aquí podrás descargar los recursos que usamos en el tutorial: plugins, código, snippets, layouts, .json, etc. Para ver los recursos debes acceder con tu cuenta de suscriptor.

¿Te ha funcionado este contenido? ¡Dale amor!

0

8 Comentarios

  1. Avatar

    Como poder hacer funcionar esta pagina, me imagino que cada producto debe tener un botón comparar y al pincharlo se agregue automáticamente, pero como queda enlazado automáticamente y el botón comparar para cada producto, como lo hago parecer?

    Responder
  2. Avatar

    Hola no logro conseguir esta plantilla pueda ser funcional con el plugin, que me indicas, la idea es remplazar la plantilla anticuada que trae el plugin

    Responder
    • Jefferson M.

      Vale, sería bueno que dejes lo que necesitas como una idea de tema para tutorial premium, así podemos investigarlo más a fondo y poder ayudarte con un tutorial premium de como lograrlo. Puedes dejarlo en el área de ideas de la intranet.

      Responder
  3. Avatar

    ok muchas gracias

    Responder

Enviar un comentario

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

¡Valóranos!

¿Te han gustado nuestros tutoriales y cursos? por favor, déjanos una valoración de 5 estrellas en truspilot, nos ayudará mucho su calificación ¡Gracias!

Shares