Cómo añadir el botón de añadir al carrito a DIVI en home y páginas de categorías

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

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.