Crear botón “Añadir a carrito” en tienda de Divi

En este tutorial práctico te mostraremos como agregar un pequeño snippet a tu sitio para crear el botón “Añadir a carrito” a tu tienda online hecha con Divi. Un problema que al día de hoy sigue siendo bárbaro es que cuando hacemos una tienda con Divi por defecto, no se ve un botón directo con el cual los usuarios puedan añadir un producto a carrito desde la tienda.

Esto es un problema, porque haces que el usuario deba entrar a cada producto para poder añadirlo al carrito, agregando un paso más al proceso de compra, y por ende, desmejorando la experiencia de una compra rápida.

Esto es lo que viene por defecto:

Este sería el resultado:

Afortunadamente, esto lo podemos resolver fácilmente agregando algunos códigos dentro de nuestro sitio. Si quieres ver los pasos por completo, checa nuestro video acá arriba completo. También puedes seguir los pasos acá, desde acá 👇

Índice

Agregando botón “Añadir a carrito” en tienda de Divi

Para agregar un botón de “Añadir a carrito” en Divi debemos implementar un pequeño snippet que activará esta funcionalidad. Podemos hacerlo desde nuestro Child Theme en caso de que tengamos uno. En caso de que no, podemos recurrir al plugin code snippet para insertar el código, en este caso, así fue como lo hicimos.

Una vez que tengas el plugin code Snippet instalado y activado, crea un nuevo snippet de código y en él insertar el siguiente fragmento:

// Botón "Añadir a carrito" en grid de productos en Divi
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Guarda y activa el código para todo el sitio.

Con ello, lograrás que el botón de añadir a carrito ya quede activo para tu tienda online con WooCommerce y Divi. Por defecto, el botón tomará los estilos que vienen por defecto en tu tema Divi, pero es algo que puedes personalizar con facilidad desde el personalizador de temas de Divi.

Personalizar el botón “Añadir a carrito” en Divi

Puedes personalizar los estilos del botón de “Añadir a carrito” recién creado en Divi. Puedes hacerlo a través de CSS modificando los estilos directamente de WooCommerce, sin embargo, una forma más sencilla de hacerlo es modificando los estilos de los botones globales del tema Divi desde el personalizador de temas de WordPress. Los pasos son sencillos:

• Ve a apariencia > personalizador de temas
• Dentro del personalizador de temas busca la opción de “Botones”
• Una vez allí, modifica los estilos de los botones globales tanto normales como en estado “hover”
• ¡Y listo! Los estilos se aplicarán a todos los botones del sitio, incluyendo los que acabamos de incluir en el módulo de tienda de Divi.

Agregando funciones adicionales (opcional)

Como opción adicional, podemos hacer que el botón “Añadir a carrito” en Divi cambie el estado de su texto una vez que añadamos un producto al carrito. Esto agregará una interactividad adicional que hará que el usuario se sitúe correctamente en el proceso de compra cada vez que añada un producto a carrito.

Para esto, debemos agregar un Script adicional en la cabecera del Head de nuestro sitio. Debemos ir a Divi > Integración > agregar código al Head y agregar el siguiente código:

<!-- Cambiar el texto añadido a carrito -->
<script>
jQuery(function() { 
	jQuery(document).on(
		'click', 
		'.et_pb_shop .ajax_add_to_cart', 
		function() {
			jQuery(this).text('Agregado a carrito');
		}
	);
});
</script>

Para personalizar el texto, solo debes cambiar el texto “Agregado a carrito” de la línea 8 por el texto que tú desees y con ello funcionará.

Con esta personalización agregaremos una interacción interesante al proceso de compra con Divi, que sumado a interacciones de personalización de carrito y demás, lograrán que haya una experiencia de compra apropiada en una tienda online hecha con Divi.

Conclusiones

Como ves, crea un botón de “Añadir a carrito” no es nada difícil, debemos agregar unas pequeñas líneas de código, y con ello tendremos la funcionalidad deseada. Ya luego, lo importante es personalizar dicho botón e incrementar la forma en como interactuamos con el botón.

¿Te ha gustado el tutorial? No olvides compartirlo acá en las redes sociales 👇