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

Inicio / Blog / Divi Woocommerce / Crear botón “Añadir a carrito” en tienda de Divi

Autor: Jefferson M

Publicación: 09 Feb, 2023

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:

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

Este sería el resultado:

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

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.

Tutoriales similares que te pueden interesar:

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 👇

1 Comentario

  1. Noelia

    Hola! Informqación super útil. Muchas gracias por compartir. Ahora una duda que me surge a ver si me puedes ayudar, sería posible alinear los botones para que no queden descolocado cuando el título no tiene los mismos caracteres??

    Muchas gracias de antemano

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

12 + 12 =


Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi