Search
Close this search box.

WooCommerce shopping cart automatically update when the quantity changes

Click here for the video tutorial for Elementor Pro

By default, there is an „Update Cart“ button in the shopping cart on WooCommerce that allows you to recalculate the total of products ordered.

Bildschirmfoto 2021 11 18 um 13.21.23
WooCommerce Update Cart Button

But if you want to save the customer a click, you can have the total calculated automatically as soon as you change the number (and leave the field). For this purpose, the following JavaScript must be implemented.

Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.

Inhalt laden

You can either integrate the code into your child theme or some themes also offer their own theme options where you can add JavaScript.

So that this code is not loaded unnecessarily on every page, it is recommended to embed it in the functions.php (in the child theme) with an additional query on the shopping cart page. As an example: Here the script is only loaded on the shopping cart page:

Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.

Inhalt laden

This means that the shopping cart now updates automatically every time the product quantity is changed. The „Update Cart“ button is therefore obsolete. This can now be hidden using CSS. Simply address the button [name=’update_cart‘] and hide it with display:none; (is also specified in the first code at the top).


Elementor Pro – Warenkorb automatisch aktualisieren

The PageBuilder Elementor Pro has a new „Cart“ widget since version 3.5 (see this blog post: Edit WooCommerce shopping cart and checkout with Elementor), where you don’t „actually“ need this code, because there is an option „Update Cart Automatically“ (found under „Additional Options“).

Once you enable this option, the „Update Cart“ button will be removed and the cart will update automatically when the number/quantity of products changes.

Bildschirmfoto 2021 11 18 um 13.48.20

BUT… !

In my opinion, this is a great feature that has already been integrated into Elementor Pro by default, but in the current version the automatic update only works for:

  • Click on the arrows in the input field
  • Press the Enter key in the input field

From a usability point of view, I think the update after leaving the input field is missing here. You can insert the script from above, but also quite simply in Elementor.

To do this, simply click on „Elementor“ 👉 „Custom Code“ in the menu. There you can now simply insert the code from above. The CSS information, which hide the button to refresh, you do not need in this case, because that is already done by Elementor.

The Cart Widget is only available in the Pro version of Elementor. Get Elementor Pro here

Schreibe einen Kommentar

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

Weitere Artikel

Icons verleihen deiner Webseite nicht nur einen ästhetischen Touch, sondern sind auch ein wichtiges Element für die Benutzerfreundlichkeit. Viele Tools bieten bereits eine Vielzahl von …

In diesem Artikel zeige ich dir, wie du die Lesezeit eines Artikels in deinem Blog anzeigen lassen kannst.