Wer kennt es nicht: Man ändert im Warenkorb die Menge eines Produkts, vergisst aber auf den Button „Warenkorb aktualisieren“ zu klicken. Die Seite zeigt weiter den alten Preis und man fragt sich kurz: „Was soll das?“ – bis man’s merkt. UX-Killer.
Wenn du WooCommerce zusammen mit dem Bricks Builder nutzt, kannst du dieses Problem elegant lösen – mit ein paar Zeilen jQuery. Der Warenkorb aktualisiert sich dann ganz automatisch, sobald die Menge geändert wird. Ganz ohne Button-Klick. Und das Beste: Es fühlt sich für die Besucher deiner Seite einfach „richtig“ an.
Der Code: Wenig Zeilen, große Wirkung
Was macht dieser Code eigentlich genau?
Lass uns das Schritt für Schritt durchgehen:
1. Warten, bis jQuery bereit ist
jQuery(function ($) {
...
});Damit stellen wir sicher, dass unser Code erst dann ausgeführt wird, wenn die Seite vollständig geladen ist. $ wird hier übrigens als Alias für jQuery genutzt – ein typischer Trick, um Konflikte mit anderen Bibliotheken zu vermeiden.
2. Event-Handler auf Mengenfelder setzen
$(".woocommerce-cart-form").on("change", "input.qty", function () {
...
});Dieser Teil lauscht auf jede Änderung im Mengenfeld (input.qty) innerhalb des Warenkorbs. Wird etwas geändert, wird ein Timer gesetzt. Dadurch verhindern wir, dass der Update-Button bei jedem Tastendruck sofort ausgelöst wird – das wäre ineffizient und nervig.
3. Debounce mit Timeout
if (timeout !== undefined) {
clearTimeout(timeout);
}
timeout = setTimeout(function () {
$("[name='update_cart']").trigger("click");
}, 750);Das ist ein klassisches „Debouncing“-Verfahren. Es sorgt dafür, dass der Klick auf „Warenkorb aktualisieren“ erst 750 Millisekunden nach der letzten Eingabe ausgelöst wird. So hat der User Zeit, die gewünschte Menge einzugeben – ohne dass der Warenkorb sofort jedes Mal neu geladen wird.
4. Unterstützung für AJAX-Aktualisierungen
$(document.body).on('updated_cart_totals', function () {
registerUpdateCartEvent();
});WooCommerce lädt manchmal Teile des Warenkorbs dynamisch neu (z. B. bei Gutscheinen). Dieser Teil sorgt dafür, dass unser Event-Handler auch danach noch funktioniert. Ein Must-have, wenn du keine Bugs riskieren willst.
Wo kommt der Code hin?
In einem Bricks-Projekt kannst du den Code bequem in die „Custom Code“-Sektion einfügen oder in einem kleinen Plugin/Child-Theme unterbringen. Wichtig ist: jQuery muss verfügbar sein (was in WooCommerce-Themes meistens standardmäßig der Fall ist).
Bonus-Tipp: Barrierefreiheit nicht vergessen
Ein automatisch aktualisierender Warenkorb klingt super, kann aber für Screenreader oder Nutzer mit motorischen Einschränkungen problematisch sein – z. B. wenn die Seite sich plötzlich aktualisiert, ohne dass es angekündigt wird. Achte also darauf, dass du klare visuelle und textuelle Rückmeldungen gibst, falls du barrierefreie Standards einhalten möchtest. Genau da kommen auch wir ins Spiel – bei purin.at bieten wir professionelle Unterstützung für barrierefreie WordPress- und WooCommerce-Projekte.
Fazit: Weniger Frust, bessere UX – mit wenig Aufwand
Der kleine jQuery-Snippet sorgt für eine deutlich rundere User Experience im WooCommerce-Warenkorb – besonders in Kombination mit dem Bricks Builder. Wer Wert auf schlanke Prozesse, Automatisierung und weniger Support-Anfragen legt, sollte dieses Feature nicht unterschätzen. Und hey: No Backup, no Mitleid – und kein automatischer Warenkorb? Dann halt viele genervte Kunden.
