En este videotutorial prémium 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 tabla 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 tabla desde los recursos que se encuentran en la parte inferior de este 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 tabla en móvil también
Con el tutorial obtendrás un resultado como este:
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 también este 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 prémium.
Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐
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?
En este caso lo ideal Carlos es que edites la página de producto con el Theme Builder, puedes ver como hacerlo en éste tutorial: https://uxdivi.com/tutorial-premium/crear-una-pagina-de-producto-con-el-theme-builder-de-divi
Y dentro de esa página colocas está tabla. No funciona con botón “comparar” sino directamente editando los datos del producto tal como lo hacemos en el tutorial.
y existira un plugin para comparar y ocupar esta plantilla
¡Claro! Existe un plugin de comparador de productos de Woocommerce que puedes probar. Echale in vistazo aquí: https://es.wordpress.org/plugins/products-compare-for-woocommerce/
muchas gracias 🙂
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
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.
ok muchas gracias