Botón ‘Añadir al carrito’ en tienda Divi (con snippet)

En este tutorial práctico te mostramos cómo agregar el botón «Añadir al carrito» a tu tienda online hecha con Divi. Un problema recurrente es que cuando construyes una tienda con Divi, por defecto no aparece un botón directo para que los usuarios puedan añadir un producto al carrito desde la vista de catálogo.

Esto es un problema porque obliga al usuario a entrar a cada producto para poder añadirlo al carrito, agregando un paso extra al proceso de compra y dificultando la compra rápida.

Ver DEMO

Agregando el botón «Añadir al carrito» en tienda de Divi

Para agregar el botón de «Añadir al carrito» en Divi debemos implementar un pequeño snippet que activará esta funcionalidad. Podemos hacerlo desde el Child Theme en caso de que tengamos uno. En caso contrario, usamos el plugin Code Snippets para insertar el código:

Una vez que tengas el plugin Code Snippets instalado y activado, crea un nuevo snippet y agrega el siguiente fragmento:

// Botón "Añadir al 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, el botón de añadir al carrito quedará activo para tu tienda online con WooCommerce y Divi. Por defecto, el botón tomará los estilos globales de tu tema Divi, que puedes personalizar desde el personalizador de temas.

Personalizar el botón «Añadir al carrito» en Divi

Puedes personalizar los estilos del botón desde el personalizador de temas de WordPress. Los pasos son sencillos:

• Ve a Apariencia > Personalizar.
• Dentro del personalizador busca la opción de «Botones».
• Modifica los estilos de los botones globales tanto en estado normal como en «hover».

Los estilos se aplicarán a todos los botones del sitio, incluyendo el recién activado en el módulo de tienda de Divi. Si quieres que solo el botón de «Añadir al carrito» tenga un estilo diferente, usa el CSS personalizado en la siguiente sección.

Estilos avanzados con CSS

Para dar un diseño específico solo al botón de añadir al carrito en el módulo de tienda de Divi, agrega este CSS en Apariencia > Personalizar > CSS adicional o en la sección de CSS de integración de Divi:

/* Botón añadir al carrito en la tienda de Divi */
.et_pb_shop .button.add_to_cart_button {
    background-color: #4a90d9;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease;
}

.et_pb_shop .button.add_to_cart_button:hover {
    background-color: #2c6fad;
    color: #ffffff;
}

Sustituye los colores por los de tu marca para que el botón quede integrado con el diseño general de tu tienda.

Manejo de productos variables en Divi

Un matiz importante: el snippet anterior activa el botón para productos simples. Los productos variables (con opciones de talla, color, etc.) no pueden añadirse directamente al carrito desde el catálogo sin elegir antes la variación. En lugar de «Añadir al carrito», muestran el botón «Seleccionar opciones» que lleva a la página del producto.

Esto es el comportamiento correcto de WooCommerce y no tiene solución directa sin plugins adicionales. Si en tu tienda tienes muchos productos variables, considera usar el plugin WooCommerce Show Single Variations o similar para exponer las variaciones directamente en el catálogo y permitir añadirlas desde allí.

Agregando funciones adicionales (opcional)

Como opción adicional, podemos hacer que el botón «Añadir al carrito» cambie el texto una vez que se añada un producto. Esto agrega una interactividad que confirma visualmente al usuario que el producto fue añadido. Agrega este script en Divi > Integración > agregar código al Head:

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

Para personalizar el texto, cambia «Agregado al carrito» por el texto que desees. Combinado con el mini carrito de WooCommerce en el menú de Divi, lograrás una experiencia de compra muy completa.

Integrar el botón con el mini carrito y el contador de items

Activar el botón en la tienda de Divi es solo el primer paso. Para que la experiencia de compra sea completa, conviene combinarlo con un mini carrito visible en el menú, que muestre en tiempo real cuántos productos tiene el usuario en el carrito sin que tenga que salir de la página de tienda.

Divi no incluye un mini carrito nativo en el menú, pero hay varias formas de agregarlo:

• Con un shortcode de WooCommerce: [woocommerce_cart_link] muestra un ícono de carrito con el contador de items y el total. Puedes pegarlo en cualquier módulo de texto o código de Divi dentro del header.
• Con el módulo de menú de Divi + widget de carrito: en el Theme Builder, puedes incluir el widget «Mini carrito de WooCommerce» en el header para mostrar un dropdown con los items añadidos.
• Con un plugin dedicado: plugins como «WooCommerce Menu Cart» permiten agregar el mini carrito al menú de WordPress con varias opciones de diseño, sin necesidad de código.

La combinación del botón «Añadir al carrito» en el módulo de tienda de Divi + un mini carrito reactivo en el header crea un flujo de compra fluido similar al que ofrecen plataformas como Shopify. Tus clientes pueden agregar varios productos sin perder de vista lo que llevan acumulado.

¿Quieres ver cómo se ve este resultado en un sitio real? Revisa el demo en vivo de este tutorial y también echa un vistazo a nuestra guía de resultados de búsqueda de productos personalizados en Divi, un complemento ideal para la experiencia de tienda.

Solución de problemas frecuentes

• El botón no aparece después de agregar el snippet: verifica que el snippet esté activo y aplicado a «Todo el sitio». Si usaste el functions.php del tema, confirma que el código esté dentro del cierre ?> correcto.
• El botón aparece pero no añade el producto al carrito: activa la opción «Habilitar AJAX para botones de añadir al carrito en archivos» en WooCommerce > Configuración > Productos > General.
• El botón tiene estilos incorrectos o rotos: revisa si otro plugin o CSS del tema está sobreescribiendo los estilos. Usa la herramienta de inspección del navegador (F12) para identificar el conflicto.
• El botón se duplica en la página: el hook woocommerce_after_shop_loop_item ya lo usa WooCommerce internamente. Si ves duplicación, quizás el tema o un plugin ya lo está registrando. Elimina el snippet y verifica si el botón ya existe por otro medio.

Preguntas frecuentes

¿Este snippet funciona con Divi 5?

Sí. El snippet opera a nivel de PHP y hooks de WooCommerce, independientemente de la versión del constructor visual de Divi. El hook woocommerce_after_shop_loop_item es parte de WooCommerce y no cambia con las actualizaciones de Divi.

¿Puedo añadir el botón solo en ciertas páginas o categorías?

Sí, con una condición dentro del snippet. Por ejemplo, para activarlo solo en la página de tienda principal puedes usar if ( ! is_shop() ) return; al inicio de la función, o is_product_category() para categorías específicas.

¿El botón funciona con plugins de scroll infinito?

Depende del plugin. Algunos plugins de scroll infinito para la tienda en Divi cargan los nuevos productos vía AJAX, lo que requiere que el script del botón también se inicialice en esos elementos cargados dinámicamente. Si el botón no aparece en los productos cargados por scroll infinito, agrega un listener al evento que el plugin dispara al cargar nuevos elementos.

Conclusiones

Como ves, agregar el botón «Añadir al carrito» en Divi no es nada difícil: con unas pocas líneas de código tienes la funcionalidad deseada. Lo importante es personalizar el botón para que se integre bien con el diseño de tu tienda e incrementar las interacciones que guían al usuario correctamente a través del proceso de compra.