🛒 Ajax-Warenkorb in WooCommerce: 3 Wege vom Plugin bis zum eigenen Code

Der „In den Warenkorb"-Button in WooCommerce lädt standardmäßig bei jedem Klick die Seite neu. Ein Käufer wählt ein Produkt aus, klickt und wartet. Eineinhalb Sekunden, zwei, drei. Auf dem Mobilgerät alle fünf. Jede solche Verzögerung kostet einen Teil der Zielgruppe: Laut dem Baymard Institute liegt die durchschnittliche Warenkorbabbruchrate im E-Commerce bei rund 70%, und ein langsamer Warenkorb ist einer der Hauptfaktoren.

Ein AJAX-Warenkorb eliminiert den Neuladevorgang. Das Produkt wird sofort hinzugefügt, der Zähler im Header aktualisiert sich ohne ein Flackern der Seite, und der Käufer bleibt genau dort, wo er war. Für einen Shop ist das ein direkter Weg zur Conversion: weniger Reibung, mehr abgeschlossene Käufe.

Sie können einen AJAX-Warenkorb in WooCommerce auf drei Arten realisieren. Im Folgenden jede davon: von der Installation eines Plugins in einer Minute bis hin zu individuellem PHP- und JavaScript-Code.

💡 Kurzübersicht:

• Methode 1: Kostenloses Plugin installieren, 2 Klicks, funktioniert für einfache und variable Produkte
• Methode 2: Integrierte WooCommerce-Einstellung, nur Archivseiten, keine Varianten
• Methode 3: PHP + JavaScript in einem Child-Theme, volle Kontrolle, moderner wc-ajax-Endpunkt

Was ein AJAX-Warenkorb ist und warum Ihr Shop ihn braucht

Ein normaler WooCommerce-Warenkorb funktioniert so: Käufer klickt auf „In den Warenkorb" → Browser sendet das Formular ab → Server verarbeitet es → Seite lädt neu → Käufer sieht das Ergebnis. Eine Kette von vier Schritten, und Sie können bei jedem einzelnen eine Person verlieren.

Ein AJAX-Warenkorb ändert die Mechanik. Der Browser sendet eine asynchrone Anfrage an den Server, der Server antwortet mit JSON, das die aktualisierten Warenkorbdaten enthält, und JavaScript aktualisiert den Zähler und den Mini-Warenkorb im laufenden Betrieb. Die Seite bleibt unverändert. Der Käufer bemerkt nicht einmal, dass etwas passiert ist: Das Produkt ist bereits im Warenkorb.

Aus Sicht des Shops ist der Unterschied spürbar. Eine Google-Studie aus dem Jahr 2023 zeigte, dass jeder zusätzliche Schritt im Kaufprozess die Conversion um 10-15% reduziert. Indem Sie den Neuladevorgang entfernen, entfernen Sie einen Schritt. Zudem sinkt die Serverlast: Statt einer vollständigen Seite wird nur noch schlankes JSON ausgeliefert.

Es gibt jedoch eine Nuance: WooCommerce aktiviert AJAX von Haus aus nur für Shop- und Kategorieseiten. Auf der Einzelproduktseite und bei variablen Produkten bleibt der Neuladevorgang bestehen. Genau diese Lücke schließen wir.

Methode 1: Ajax Add to Cart for WooCommerce Plugin

Der schnellste Weg, das kostenlose Plugin Ajax Add to Cart for WooCommerce. Es ist in einer Minute installiert, benötigt keine Konfiguration und funktioniert direkt nach der Aktivierung.

Das Plugin übernimmt das AJAX-Hinzufügen für einfache und variable Produkte auf jeder Seite: Produkt, Archiv, Kategorie. Der Mini-Warenkorb aktualisiert sich automatisch. Laut WordPress.org: 10.000+ aktive Installationen, eine Bewertung von 4,7 von 5, Kompatibilität mit WordPress 7.0+ und aktuellen WooCommerce-Versionen. Regelmäßig aktualisiert: Das letzte Release 2.6.5 erschien im Juni 2026.

Installation:

• Gehen Sie zu WordPress-Admin → Plugins → Installieren
• Suchen Sie nach „Ajax add to cart for WooCommerce"
• Klicken Sie auf „Installieren", dann auf „Aktivieren"

Das war's. Gehen Sie zu einer beliebigen Produktseite und klicken Sie auf „In den Warenkorb": kein Neuladen, Produkt hinzugefügt. Das Plugin benötigt keine weiteren Einstellungen. Wenn Sie AJAX für bestimmte Seiten deaktivieren müssen, bieten die Plugin-Einstellungen einen entsprechenden Filter.

Eine Alternative, FunnelKit Cart (ebenfalls kostenlos). Es bietet neben einem AJAX-Warenkorb ein ausfahrbares Warenkorb-Seitenpanel und Upsells darin. Es ist etwas schwergewichtiger, aber für Shops, die auf den durchschnittlichen Bestellwert fokussiert sind, ist das gerechtfertigt.

Methode 2: Integrierte WooCommerce-Einstellung

WooCommerce beherrscht einen AJAX-Warenkorb von Haus aus, jedoch mit zwei Einschränkungen. Er funktioniert nur auf Archivseiten (Shop, Kategorien, Schlagwörter) und unterstützt keine variablen Produkte. Für die Einzelproduktseite bleibt der Neuladevorgang bestehen.

Wenn Ihr Shop nur einfache Produkte verkauft und Käufer diese von der Shop-Übersicht aus in den Warenkorb legen, ist das ausreichend. Aktiviert mit einer einzigen Checkbox:

• Admin → WooCommerce → Einstellungen → Produkte → Allgemein
• Im Block „Verhalten beim Hinzufügen zum Warenkorb" aktivieren Sie „AJAX-Schaltflächen zum Warenkorb auf Archivseiten hinzufügen"
• Speichern

Fertig. Auf der Shop-Seite und den Kategorieseiten funktioniert der „In den Warenkorb"-Button nun ohne Neuladen. Besuchen Sie jedoch eine Einzelproduktseite, ist es immer noch dasselbe: ein vollständiger Neuladezyklus. Für die meisten Shops ist das nicht genug, gehen wir also zur dritten Methode über.

Methode 3: PHP und JavaScript in einem Child-Theme

Volle Kontrolle über den AJAX-Warenkorb erhalten Sie mit individuellem Code. Sie entscheiden, auf welchen Seiten AJAX funktioniert, wie Fehler behandelt werden und was der Käufer nach dem Hinzufügen eines Produkts sieht.

Wir schreiben einen Handler für den modernen wc-ajax-Endpunkt; dieser harmoniert gut mit Caching-Plugins (WP Rocket, LiteSpeed Cache schließen ?wc-ajax= standardmäßig vom Cache aus), anders als das alte admin-ajax.php, das sich auf gecachten Seiten oft unvorhersehbar verhält.

3.1 Child-Theme

Der Code kommt in ein Child-Theme: Das ist die Absicherung gegen den Verlust von Änderungen bei einem Update des Parent-Themes. Falls Sie noch kein Child-Theme haben, erstellen Sie eines oder nutzen Sie ein Plugin wie Code Snippets; es erlaubt Ihnen, PHP-Code hinzuzufügen, ohne Theme-Dateien zu bearbeiten.

Warum ein Child-Theme zwingend erforderlich ist: Beim nächsten Update des Parent-Themes werden alle Ihre Bearbeitungen in functions.php und JS-Dateien überschrieben. Ein Child-Theme lebt separat und wird von Updates nicht berührt.

3.2 JavaScript einbinden

In der functions.php des Child-Themes registrieren und lokalisieren wir das Skript:

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

Aufschlüsselung. wp_register_script registriert unsere zukünftige JS-Datei mit Abhängigkeiten von jQuery und dem eingebauten wc-add-to-cart. wp_localize_script übergibt zwei Schlüsselparameter an JavaScript: die URL des wc-ajax-Endpunkts und einen Nonce-Schlüssel für den CSRF-Schutz. Ein Nonce ist eine kryptografische Signatur, die der Server bei der Verarbeitung der Anfrage überprüft: Ohne sie könnte jede externe Seite Ihren Warenkorb manipulieren.

3.3 JavaScript-Handler

Erstellen Sie einen js-Ordner im Stammverzeichnis des Child-Themes und darin eine Datei ajax-add-to-cart.js:

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

Der entscheidende Unterschied zu veralteten Anleitungen: Wir verwenden sdAjaxCart.wc_ajax_url (den wc-ajax-Endpunkt) anstelle von wc_add_to_cart_params.ajax_url (das alte admin-ajax.php). wc-ajax wird von Caching-Plugins automatisch ausgeschlossen und benötigt keinen separaten wp_ajax_nopriv_-Hook; WooCommerce selbst behandelt eingeloggte und nicht eingeloggte Benutzer.

3.4 PHP-Handler

Fügen Sie Folgendes direkt nach dem ersten Block in die functions.php des Child-Themes ein:

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

Der Handler erledigt drei Dinge. Er prüft das Nonce: Wenn die Anfrage von einer externen Seite kam, gibt er sofort einen 403 zurück. Er fügt das Produkt über WC()->cart->add_to_cart() zum Warenkorb hinzu, die Standard-WooCommerce-Methode, die Bestand, Varianten und Validierung selbstständig handhabt. Er ruft WC_AJAX::get_refreshed_fragments() auf; diese Methode liefert aktualisierte HTML-Fragmente des Mini-Warenkorbs zurück, die unser JavaScript aufgreift.

Der Hook wc_ajax_sd_ajax_add_to_cart ist ein wc-ajax-Endpunkt, den WooCommerce unter Umgehung der meisten Caching-Plugins verarbeitet. Kein wp_ajax_ / wp_ajax_nopriv_ nötig: wc-ajax weiß selbst, ob der Benutzer eingeloggt ist oder nicht.

Häufige Fehler bei der Implementierung eines AJAX-Warenkorbs

Ein AJAX-Warenkorb geht auf vorhersehbare Weise kaputt; fast immer sind drei Dinge schuld. Hier ist, was Sie zuerst prüfen sollten.

Konflikt mit Caching-Plugins. Wenn der Mini-Warenkorb sich nicht oder verzögert aktualisiert, hat das Cache-Plugin die AJAX-Antwort gecacht. Lösung: Verwenden Sie den wc-ajax-Endpunkt (er wird automatisch vom Cache ausgeschlossen) und stellen Sie sicher, dass WP Rocket / LiteSpeed Cache das Inline-JS des Warenkorbs nicht minifizieren. Suchen Sie in den Cache-Einstellungen die Direktive „JavaScript verzögern" und fügen Sie /wc-ajax= zu den Ausschlüssen hinzu.

Das Theme unterstützt keine WooCommerce-Fragmente. Manche Themes passen den Mini-Warenkorb so an, dass die standardmäßigen WooCommerce-Selektoren nicht mehr funktionieren. Symptom: AJAX läuft, das Produkt ist im Warenkorb, aber der Header-Zähler aktualisiert sich nicht. Beheben Sie das, indem Sie die Selektoren über den Filter woocommerce_add_to_cart_fragments ersetzen.

Button-Layout auf Mobilgeräten. Auf Touch-Geräten feuert das click-Event anders als auf dem Desktop, manchmal mit 300 ms Verzögerung oder einem doppelten Auslösen. Wenn ein Produkt auf dem Mobilgerät doppelt hinzugefügt wird, verpacken Sie den Handler in eine Prüfung auf das Flag $button.hasClass('disabled'), wie im obigen Code.

⁉️🤔 Häufig gestellte Fragen

Funktioniert der AJAX-Warenkorb mit variablen Produkten?

Ja. Sowohl das Ajax Add to Cart for WooCommerce Plugin als auch der individuelle Code aus Methode 3 behandeln variable Produkte korrekt. Die Variante wird über variation_id im Request-Body übergeben, und WooCommerce setzt den korrekten Preis und die Attribute ein. Einzige Bedingung: Alle erforderlichen Variationsattribute müssen vor dem Klick auf den Button ausgewählt sein.

Muss ich den Cache nach der Aktivierung des AJAX-Warenkorbs leeren?

Unbedingt. Leeren Sie den Site-Cache (Caching-Plugin → Alles löschen), den CDN-Cache, falls verwendet, und den Browser-Cache. AJAX-Antworten können bereits bei der allerersten Anfrage gecacht werden, und der Mini-Warenkorb hört auf, sich zu aktualisieren. Gehen Sie auf einer Produktivseite nach der AJAX-Aktivierung einen vollständigen Zyklus durch: Produkt hinzufügen → Zähler prüfen → Warenkorb öffnen → sicherstellen, dass das Produkt vorhanden ist.

Kann ich das alte admin-ajax.php anstelle von wc-ajax verwenden?

Technisch ja, aber Sie sollten es nicht. admin-ajax.php benötigt zwei Hooks (wp_ajax_ für eingeloggte Benutzer und wp_ajax_nopriv_ für Gäste), und Caching-Plugins blockieren oder cachen diesen Endpunkt oft. wc-ajax ist der moderne WooCommerce-Standard; er ist zuverlässiger und einfacher zu konfigurieren. Wenn Sie Code aus einer alten Anleitung portieren, die admin-ajax.php verwendet, ersetzen Sie ihn durch wc-ajax.

Was tun, wenn der Warenkorbzähler nach einem AJAX-Add nicht aktualisiert wird?

Höchstwahrscheinlich verwendet das Theme ein nicht standardmäßiges Mini-Warenkorb-Markup. WooCommerce aktualisiert Fragmente über Selektoren, die durch den Filter woocommerce_add_to_cart_fragments registriert werden. Prüfen Sie die functions.php des Themes auf diesen Filter und vergleichen Sie die Selektoren mit dem tatsächlichen Mini-Warenkorb-Markup im Browser-Inspektor. Wenn die Selektoren nicht übereinstimmen, korrigieren Sie sie im Filter, und der Zähler wird funktionieren.

Zusammenfassung

Ein AJAX-Warenkorb ist keine Dekoration; er ist ein direkter Conversion-Hebel. Eine Minute für die Installation eines Plugins oder eine Stunde für individuellen Code zahlt sich durch geringere Warenkorbabbrüche und mehr abgeschlossene Käufe aus. Wählen Sie die Methode, die zu Ihren Anforderungen passt:

• Keine Zeit und Sie brauchen sofort Ergebnisse: Installieren Sie Ajax Add to Cart for WooCommerce, aktivieren Sie es und testen Sie Ihren Shop.
• Sie verkaufen nur einfache Produkte von der Shop-Übersicht aus: Aktivieren Sie die integrierte WooCommerce-Einstellung.
• Sie benötigen volle Kontrolle und Zuverlässigkeit auf einer gecachten Seite: Gehen Sie mit Methode 3 unter Verwendung des wc-ajax-Endpunkts und Nonce-Prüfung vor.

Wenn Ihr Shop auf einem Block-Theme läuft oder WooCommerce Blocks für die Produktseite verwendet, prüfen Sie die Kompatibilität: Blöcke rendern den „In den Warenkorb"-Button via React, und standardmäßige jQuery-Handler greifen möglicherweise nicht. In solchen Fällen ist ein Plugin zuverlässiger.