🛒 Ajax cart en WooCommerce: 3 formas desde plugin hasta código personalizado

El botón «Añadir al carrito» en WooCommerce recarga la página por defecto con cada clic. Un comprador elige un producto, hace clic y espera. Un segundo y medio, dos, tres. En el móvil, los cinco. Cada demora así recorta una parte de la audiencia: según el Baymard Institute, la tasa media de abandono de carrito en comercio electrónico ronda el 70%, y un carrito lento es uno de los factores clave.

Un carrito AJAX elimina la recarga. El producto se añade al instante, el contador de la cabecera se actualiza sin que la página parpadee y el comprador se queda exactamente donde estaba. Para una tienda, esto es un camino directo a la conversión: menos fricción, más compras completadas.

Usted puede construir un carrito AJAX en WooCommerce de tres maneras. A continuación, cada una: desde instalar un plugin en un minuto hasta código PHP y JavaScript personalizado.

💡 Resumen rápido:

• Método 1: instalar un plugin gratuito, 2 clics, funciona para productos simples y variables
• Método 2: ajuste integrado de WooCommerce, solo archivos, sin variaciones
• Método 3: PHP + JavaScript en un tema hijo, control total, endpoint moderno wc-ajax

Qué es un carrito AJAX y por qué su tienda lo necesita

Un carrito WooCommerce normal funciona así: el comprador hace clic en «Añadir al carrito» → el navegador envía el formulario → el servidor lo procesa → la página se recarga → el comprador ve el resultado. Una cadena de cuatro pasos, y usted puede perder a una persona en cada uno.

Un carrito AJAX cambia la mecánica. El navegador envía una solicitud asíncrona al servidor, el servidor devuelve JSON con los datos actualizados del carrito y JavaScript actualiza el contador y el minicarrito sobre la marcha. La página no se mueve. El comprador ni siquiera nota que algo ocurrió: el producto ya está en el carrito.

Desde la perspectiva de la tienda, la diferencia es tangible. Un estudio de Google de 2023 mostró que cada paso extra en el embudo de compra reduce la conversión entre un 10 y un 15%. Al eliminar la recarga, usted elimina un paso. Además, la carga del servidor disminuye: en lugar de renderizar una página completa, sirve JSON ligero.

Pero hay un matiz: WooCommerce de fábrica habilita AJAX solo para las páginas de tienda y categoría. En la página de producto individual y para productos variables, la recarga permanece. Esa es exactamente la brecha que vamos a cerrar.

Método 1: plugin Ajax add to cart for WooCommerce

El camino más rápido, el plugin gratuito Ajax Add to Cart for WooCommerce. Se instala en un minuto, no requiere configuración, funciona justo después de activarlo.

El plugin gestiona la adición AJAX para productos simples y variables en cualquier página: producto, archivo, categoría. El minicarrito se actualiza automáticamente. Según WordPress.org, más de 10 000 instalaciones activas, una calificación de 4,7 sobre 5, compatibilidad con WordPress 7.0+ y versiones recientes de WooCommerce. Se actualiza con regularidad: la última versión 2.6.5 salió en junio de 2026.

Instalación:

• Vaya a Administración de WordPress → Plugins → Añadir nuevo
• Busque «Ajax add to cart for WooCommerce»
• Haga clic en «Instalar», luego en «Activar»

Eso es todo. Vaya a cualquier página de producto y haga clic en «Añadir al carrito»: sin recarga, producto añadido. El plugin no requiere ajustes adicionales. Si necesita desactivar AJAX para ciertas páginas, los ajustes del plugin tienen un filtro correspondiente.

Una alternativa, FunnelKit Cart (también gratuito). Además de un carrito AJAX, proporciona un panel lateral deslizante del carrito y ventas adicionales dentro de él. Es un poco más pesado, pero para tiendas enfocadas en el valor medio del pedido, está justificado.

Método 2: ajuste integrado de WooCommerce

WooCommerce puede hacer un carrito AJAX de fábrica, pero con dos limitaciones. Funciona solo en páginas de archivo (tienda, categorías, etiquetas) y no admite productos variables. Para la página de producto individual, la recarga permanece.

Si su tienda vende solo productos simples y los compradores los añaden al carrito desde el escaparate, esto es suficiente. Se habilita con una sola casilla:

• Administración → WooCommerce → Ajustes → Productos → General
• En el bloque «Comportamiento de añadir al carrito», marque «Habilitar botones de añadir al carrito con AJAX en los archivos»
• Guarde

Hecho. En la página de tienda y en las páginas de categoría, el botón «Añadir al carrito» ahora funciona sin recarga. Pero visite una página de producto individual y sigue igual: un ciclo completo de recarga. Para la mayoría de las tiendas, esto no es suficiente, así que pasemos al tercer método.

Método 3: PHP y JavaScript en un tema hijo

El control total sobre el carrito AJAX viene con código personalizado. Usted decide en qué páginas funciona AJAX, cómo se gestionan los errores y qué ve el comprador después de añadir un producto.

Escribiremos un manejador sobre el endpoint moderno wc-ajax; se lleva bien con los plugins de caché (WP Rocket, LiteSpeed Cache excluyen ?wc-ajax= de la caché por defecto), a diferencia del viejo admin-ajax.php, que a menudo se comporta de forma impredecible en sitios con caché.

3.1 Tema hijo

El código irá en un tema hijo: esto es un seguro contra la pérdida de cambios cuando el tema padre se actualice. Si aún no tiene un tema hijo, cree uno o use un plugin como Code Snippets; le permite añadir código PHP sin editar archivos del tema.

Por qué un tema hijo es obligatorio: la próxima vez que el tema padre se actualice, todas sus ediciones en functions.php y archivos JS se sobrescribirán. Un tema hijo vive por separado y no es tocado por las actualizaciones.

3.2 Encolar JavaScript

En el functions.php del tema hijo, registramos y localizamos el script:

1
function sd_ajax_add_to_cart_script() {
2
    if (is_admin()) {
3
        return;
4
    }
5
 
6
    wp_register_script(
7
        'sd-ajax-add-to-cart',
8
        get_stylesheet_directory_uri() . '/js/ajax-add-to-cart.js',
9
        array('jquery', 'wc-add-to-cart'),
10
        '1.0',
11
        true
12
    );
13
    wp_enqueue_script('sd-ajax-add-to-cart');
14
 
15
    wp_localize_script('sd-ajax-add-to-cart', 'sdAjaxCart', array(
16
        'wc_ajax_url' => WC_AJAX::get_endpoint('sd_ajax_add_to_cart'),
17
        'nonce'       => wp_create_nonce('sd_ajax_cart_nonce'),
18
    ));
19
}
20
add_action('wp_enqueue_scripts', 'sd_ajax_add_to_cart_script');

Desglose. wp_register_script registra nuestro futuro archivo JS con dependencias de jQuery y el wc-add-to-cart integrado. wp_localize_script pasa dos parámetros clave a JavaScript: la URL del endpoint wc-ajax y una clave nonce para protección CSRF. Un nonce es una firma criptográfica que el servidor verificará al procesar la solicitud: sin ella, cualquier sitio externo podría manipular su carrito.

3.3 Manejador JavaScript

Cree una carpeta js en la raíz del tema hijo y un archivo ajax-add-to-cart.js dentro de ella:

1
jQuery(function ($) {
2
    $('form.cart').on('submit', function (e) {
3
        var $form = $(this);
4
        var $button = $form.find('.single_add_to_cart_button');
5
 
6
        if (!$button.length || $button.hasClass('disabled')) {
7
            return;
8
        }
9
 
10
        e.preventDefault();
11
 
12
        var data = {
13
            product_id: $form.find('input[name=product_id]').val() || $button.val(),
14
            quantity: $form.find('input[name=quantity]').val() || 1,
15
            variation_id: $form.find('input[name=variation_id]').val() || 0,
16
        };
17
 
18
        $button.removeClass('added').addClass('loading');
19
 
20
        $.ajax({
21
            type: 'POST',
22
            url: sdAjaxCart.wc_ajax_url,
23
            data: $.param(data) + '&nonce=' + sdAjaxCart.nonce,
24
            success: function (response) {
25
                if (response && response.error) {
26
                    window.location = response.product_url;
27
                    return;
28
                }
29
                $(document.body).trigger('added_to_cart', [
30
                    response.fragments,
31
                    response.cart_hash,
32
                    $button,
33
                ]);
34
            },
35
            complete: function () {
36
                $button.addClass('added').removeClass('loading');
37
            },
38
        });
39
    });
40
});

La diferencia clave respecto a tutoriales obsoletos: usamos sdAjaxCart.wc_ajax_url (el endpoint wc-ajax) en lugar de wc_add_to_cart_params.ajax_url (el viejo admin-ajax.php). wc-ajax es excluido automáticamente por los plugins de caché y no requiere un hook wp_ajax_nopriv_ separado; el propio WooCommerce gestiona usuarios autenticados y no autenticados.

3.4 Manejador PHP

Añada lo siguiente al functions.php del tema hijo justo después del primer bloque:

1
function sd_ajax_add_to_cart_handler() {
2
    if (!wp_verify_nonce($_POST['nonce'], 'sd_ajax_cart_nonce')) {
3
        wp_send_json_error(array('message' => 'Security error'), 403);
4
    }
5
 
6
    $product_id = apply_filters(
7
        'sd_ajax_add_to_cart_product_id',
8
        absint($_POST['product_id'])
9
    );
10
    $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
11
    $variation_id = absint($_POST['variation_id']);
12
 
13
    $passed = apply_filters(
14
        'sd_ajax_add_to_cart_validation',
15
        true,
16
        $product_id,
17
        $quantity
18
    );
19
 
20
    $product_status = get_post_status($product_id);
21
 
22
    if ($passed && 'publish' === $product_status
23
        && WC()->cart->add_to_cart($product_id, $quantity, $variation_id)
24
    ) {
25
        do_action('sd_ajax_added_to_cart', $product_id);
26
 
27
        if ('yes' === get_option('woocommerce_cart_redirect_after_add')) {
28
            wc_add_to_cart_message(array($product_id => $quantity), true);
29
        }
30
 
31
        WC_AJAX::get_refreshed_fragments();
32
    } else {
33
        wp_send_json(array(
34
            'error'       => true,
35
            'product_url' => apply_filters(
36
                'sd_ajax_cart_redirect_after_error',
37
                get_permalink($product_id),
38
                $product_id
39
            ),
40
        ));
41
    }
42
 
43
    wp_die();
44
}
45
add_action('wc_ajax_sd_ajax_add_to_cart', 'sd_ajax_add_to_cart_handler');

El manejador hace tres cosas. Verifica el nonce: si la solicitud vino de un sitio externo, devuelve inmediatamente un 403. Añade el producto al carrito mediante WC()->cart->add_to_cart(), el método estándar de WooCommerce que gestiona stock, variaciones y validación por sí mismo. Llama a WC_AJAX::get_refreshed_fragments(); este método devuelve fragmentos HTML actualizados del minicarrito, que nuestro JavaScript recogerá.

El hook wc_ajax_sd_ajax_add_to_cart es un endpoint wc-ajax que WooCommerce procesa evitando la mayoría de los plugins de caché. No se necesita wp_ajax_ / wp_ajax_nopriv_: wc-ajax sabe por sí mismo si el usuario ha iniciado sesión o no.

Errores comunes al implementar un carrito AJAX

Un carrito AJAX se rompe de forma predecible; casi siempre, tres cosas tienen la culpa. Esto es lo que debe revisar primero.

Conflicto con plugins de caché. Si el minicarrito no se actualiza o lo hace con retraso, el plugin de caché almacenó en caché la respuesta AJAX. Solución: use el endpoint wc-ajax (se excluye de la caché automáticamente) y asegúrese de que WP Rocket / LiteSpeed Cache no estén minificando el JS en línea del carrito. En los ajustes de caché, busque la directiva «Retrasar JavaScript» y añada /wc-ajax= a las exclusiones.

El tema no admite fragmentos de WooCommerce. Algunos temas personalizan el minicarrito de modo que los selectores estándar de WooCommerce dejan de funcionar. Síntoma: AJAX se ejecuta, el producto está en el carrito, pero el contador de la cabecera no se actualiza. Se soluciona reemplazando los selectores mediante el filtro woocommerce_add_to_cart_fragments.

Comportamiento del botón en móvil. En dispositivos táctiles, el evento click se dispara de forma diferente que en escritorio, a veces con un retraso de 300 ms o un doble disparo. Si un producto se añade dos veces en móvil, envuelva el manejador en una comprobación de la bandera $button.hasClass('disabled'), como en el código anterior.

⁉️🤔 Preguntas frecuentes

¿El carrito AJAX funciona con productos variables?

Sí. Tanto el plugin Ajax Add to Cart for WooCommerce como el código personalizado del método 3 gestionan correctamente los productos variables. La variación se pasa mediante variation_id en el cuerpo de la solicitud, y WooCommerce sustituirá el precio y los atributos correctos. La única condición: todos los atributos de variación obligatorios deben estar seleccionados antes de hacer clic en el botón.

¿Necesito limpiar la caché después de habilitar el carrito AJAX?

Absolutamente. Limpie la caché del sitio (plugin de caché → purgar todo), la caché de la CDN si se usa y la caché del navegador. Las respuestas AJAX pueden almacenarse en caché en la primera solicitud, y el minicarrito dejará de actualizarse. En un sitio en producción después de habilitar AJAX, realice un ciclo completo: añada un producto → verifique el contador → abra el carrito → asegúrese de que el producto está allí.

¿Puedo usar el viejo admin-ajax.php en lugar de wc-ajax?

Técnicamente, sí, pero no debería. admin-ajax.php requiere dos hooks (wp_ajax_ para usuarios autenticados y wp_ajax_nopriv_ para invitados), y los plugins de caché a menudo bloquean o almacenan en caché este endpoint. wc-ajax es el estándar moderno de WooCommerce; es más fiable y más simple de configurar. Si está migrando código de un tutorial antiguo que usa admin-ajax.php, sustitúyalo por wc-ajax.

¿Qué pasa si el contador del carrito no se actualiza después de una adición AJAX?

Lo más probable es que el tema use un marcado de minicarrito no estándar. WooCommerce actualiza fragmentos mediante selectores registrados por el filtro woocommerce_add_to_cart_fragments. Revise el functions.php del tema en busca de este filtro y compare los selectores con el marcado real del minicarrito en el inspector del navegador. Si los selectores no coinciden, corríjalos en el filtro y el contador funcionará.

Resumen

Un carrito AJAX no es decoración; es una palanca directa de conversión. Un minuto para instalar un plugin o una hora para código personalizado se amortiza mediante un menor abandono de carrito y más compras completadas. Elija el método que se ajuste a sus necesidades:

• No tiene tiempo y necesita resultados ya: instale Ajax Add to Cart for WooCommerce, actívelo y vaya a probar su tienda.
• Vende solo productos simples desde el escaparate: habilite el ajuste integrado de WooCommerce.
• Necesita control total y fiabilidad en un sitio con caché: opte por el método 3 usando el endpoint wc-ajax y verificación nonce.

Si su tienda funciona con un tema de bloques o usa WooCommerce Blocks para la página de producto, verifique la compatibilidad: los bloques renderizan el botón «Añadir al carrito» mediante React, y los manejadores jQuery estándar pueden no engancharse. En tales casos, un plugin es más fiable.