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