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.
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.
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:
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.
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!
