Si utilizas Divi y Woocommerce, te habrás dado cuenta que cuando visualizamos un bloque de productos realizados con el módulo tienda de Divi o las páginas de categorías, no aparece el botón de añadir al carrito.
Vamos a ver en este post cómo podemos añadir el botón de añadir al carrito de Woocommerce con Divi
QUIERO DIVI
Cómo poner el botón de añadir al carrito en Divi en categorías y home
En la plantilla Divi tanto cuando se visualizan las categorías como cuando se utiliza el módulo tienda para Woocommerce no aparece el botón de “añadir al carrito” (add to cart) bajo los productos.
En una tienda woocommerce realizada con Divi al poner el ratón sobre los productos aparece una capa superpuesta y la opción de hacer clic para ir al producto, pero no un botón de añadir al carrito.
Seguramente te estará haciendo dos preguntas:
a.- ¿cómo se añade el botón de añadir al carrito a las categorías de woocommerce con Divi y al módulo tienda de divi?
b.- ¿el plugin que hemos estado viendo en el apartado anterior afectará al diseño de este botón de “añadir al carrito” que queremos añadir a Divi?
La respuesta a la segunda pregunta es “SI”. Es decir, que al personalizar el plugin Woo Button Text que hemos estado viendo en el apartado anterior modificaremos el diseño y contenido del botón de “añadir al carrito” que mostremos en el módulo tienda de Divi y en las categorías de Woocommerce
Para responder a la primera pregunta y conseguir que se muestre bajo cada producto un botón de “añadir al carrito” con la plantilla Divi, tanto en las categorías de Woocommerce como en el módulo tienda tendremos que añadir el siguiente código al archivo functions.php
Lo suyo es trabajar con un archivo functions.php en el tema hijo de Divi para no tener que volver a hacer cambios cada vez que se actualice la plantilla. Pero si no dispones de tema hijo, puedes poner el código al final del archivo functions.php de Divi.
Otra opción aún mejor para no tener que usar tema hijo ni modificar ningún archivo de la plantilla, es utilizar el plugin snippet code. Aquí tienes un post en el que hablo sobre su uso, para poder añadir código al archivo functions.php de una manera muy fácil: Cómo añadir código fácil al archivo functions.php de wordpress
// register add to cart action
function dac_add_cart_button () {
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );
}
add_action( 'after_setup_theme', 'dac_add_cart_button' );
Incluir botón de añadir al carrito con Divi y Woocommerce
Si aún no tienes Divi, desde aquí puedes Comprar Divi con descuento
Acciones del botón de añadir al carrito en Divi
Verás que cuando se hace clic sobre el botón de añadir al carrito situado bajo un producto con la plantilla Divi y Woocommerce pueden suceder dos cosas:
a.- si el producto tiene atributos: si el producto tiene atributos, como el visitante no ha seleccionado los valores que quiere el botón le llevará a la página de producto para que seleccione valores de atributos y así poder comprar.
b.- si el producto no tiene atributos: si el producto no tiene atributos, al hacer clic en el botón el producto se añadirá directamente al carrito y nos aparecerá un enlace por si queremos acceder al carrito.
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Hola Joaquin! Gracias por tan valiosa información.
Una consulta, de que forma podría colocar un icono de carrito?
Hola Carolina,
Mira este post: icono añadir al carrito
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, Curso alta e indexación web en google, cursos Analytics ecommerce, SEO general, SEO tiendas online, Curso copywriting, plantillas wordpress como flatsome, Divi, Astra pro, , etc. etc.
Hola,
Se puede añadir un input de cantidad del producto a añadir al carrito?
Gracias de antemano
Hola Sara,
Es posible, pero no conozco el código para hacerlo. También es posible que exista algún plugin para ello, o un plugin general para woocommerce o un plugin específico para Divi (los puedes ver en el market de elegant themes). Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, Curso alta e indexación web en google, cursos Analytics ecommerce, SEO general, SEO tiendas online, plantillas wordpress como flatsome, Divi, Astra pro, , etc. etc.