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.

 

Aprende más sobre el módulo tienda de Divi en este post

 

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' );

 

 

poner botón de add to cart con divi y woocommerce

Incluir botón de añadir al carrito con Divi y Woocommerce

 

Aprende a realizar diferentes diseños con el módulo tienda de Divi en este post

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.

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO PRESTASHOP (56 Clases)
2.- CURSO WOOCOMMERCE (39 Clases)
3.- CURSO SEO TIENDAS ONLINE (12 Clases)
4.- CURSO PLANTILLA WAREHOUSE (26 Clases)
5.- CURSO PLANTILLA FLATSOME (36 Clases)
6.- MC: GOOGLE ANALYTICS PARA ECOMMERCE
7.- CURSO SUSCRIPTORES PRESTASHOP (7 Clases)
8.- CURSO BLOG PRESTASHOP (12 Clases)
9.- CURSO WORDPRESS (44 Clases)
10.- CURSO DIVI (33 Clases)
11.- CURSO ANALYTICS (10 Clases)
12.- CURSO IMÁGENES WEB (15 Clases)
13.- CURSO SEO GENERAL (19 Clases)
14.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

You have Successfully Subscribe