By default, there is an “Update Cart” button in the shopping cart on WooCommerce that allows you to recalculate the total of products ordered.
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:
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.
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