WooCommerce Warenkorb automatisch bei Änderung der Anzahl aktualisieren

Hier gehts zur Video-Anleitung für Elementor Pro

Standardmäßig ist im Warenkorb bei WooCommerce ein „Update Cart“ Button, mit dem man die Summe der bestellten Produkte neu berechnen lassen kann.

Bildschirmfoto 2021 11 18 um 13.21.23
WooCommerce Update Cart Button

Wenn man dem Kunden nun aber einen Klick ersparen möchte, dann kann man die Summe auch automatisch berechnen lassen, sobald man die Anzahl ändert (und das Feld verlässt). Dazu muss folgender JavaScript eingebaut werden.

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Weitere Informationen

Den Code kann man entweder in seinem Child-Theme integrieren oder manche Themes bieten auch eigene Theme-Options an, wo man JavaScript hinzufügen kann.

Damit dieser Code nicht auf jeder Seite unnötig geladen wird, empfiehlt sich zB. die Einbettung in der functions.php (im Child-Theme) mit einer zusätzlichen Abfrage auf die Warenkorb-Seite.
Als Beispiel: Hier wird das Script nur auf der Seite Warenkorb geladen:

Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Weitere Informationen

Damit aktualisiert der Warenkorb nun bei jeder Änderung der Produktmenge automatisch. Der „Update Cart“ Button ist somit hinfällig. Diesen kann man nun per CSS ausblenden. Dazu einfach den button[name=’update_cart‘] ansprechen und mit display:none; ausblenden (ist auch im ersten Code ganz oben angegeben).


Elementor Pro – Warenkorb automatisch aktualisieren

Der PageBuilder Elementor Pro hat seit Version 3.5 ein neues „Cart“ Widget (siehe diesen Blog-Beitrag: WooCommerce Warenkorb und Checkout mit Elementor bearbeiten), bei welchem man diesen Code „eigentlich“ nicht benötigt, da es hier eine Option „Update Cart Automatically“ (zu finden unter „Additional Options“).

Sobald man diese Option aktiviert, wird der „Update Cart“ Button entfernt und der Warenkorb aktualisiert sich bei Änderung der Anzahl/Menge der Produkte automatisch.

Bildschirmfoto 2021 11 18 um 13.48.20

ABER… !

Meiner Meinung nach ist das eine super Funktion, die bereits standardmäßig in Elementor Pro integriert wurde, jedoch funktioniert das automatische Aktualisieren in der aktuellen Version nur bei:

  • Klick auf die Pfeile im Input Feld
  • Drücken der Enter Taste im Input Feld

Aus Usability-Sicht fehlt hier meiner Meinung nach das Aktualisieren nach Verlassen des Input Feldes. Du kannst das Script von oben, aber auch ganz einfach in Elementor einfügen.

Dazu einfach im Menü auf „Elementor“ 👉 „Custom Code“ klicken. Dort lässt sich nun der Code von oben nun einfach einfügen. Die CSS Angaben, welchen den Button zum Aktualisieren ausblenden, braucht man in dem Fall nicht, da das ja schon von Elementor gemacht wird.

Das Cart Widget ist nur in der Pro Version von Elementor verfügbar. Hol dir hier Elementor Pro!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Weitere Artikel

Die 5 häufigsten Fehler im Online-Business und wie du sie vermeidest

Der Start eines Online-Business ist spannend – die Möglichkeiten scheinen grenzenlos, und die Freiheit, von überall aus zu arbeiten, lockt viele an. Doch so einfach …

Optimiere deinen Webdesign-Workflow mit Vorlagen (für Elementor)

Wenn du laufend Webseiten erstellst, kennst du die Tücken des Designprozesses: Stundenlanges Bauen von Layouts oder das Tüfteln an der perfekten Struktur sind keine Seltenheit. …