I am doing customisation on PDP page as per my client requirement, For my requirement i am using the grouped product, also added a option to increase/decrease each product quantity count, when increase or decrease a product quantity need to change the "addtocart" button based on the quantity and the each item price.

Example: One group product has 3 mapped product, each simple product price is $200, so when i added one quantity on each the item, then the "addtocart" button text need to change "Add 3 items to Basket($600.00), if i decrease so need to change the addtocart button text.

Kindly check the attached screen and share your idea. enter image description here

1 Answer 1


It seems you need three things to achieve this

  1. I hope you added the Increment/Decrement button by overriding Magento_GroupedProduct::product/view/type/grouped.phtml in which please add data-item-price="<?= /* @noEscape */ ($_item->getFinalPrice()) ?>" line in QTY Input as shown below.enter image description here
  2. Pass the currency Symbol while initiating JS. (References How to get current Currency and symbol in PHTML File? or Get current currency symbol in Magento2)enter image description here
  3. In the increment decrement method in JS, at last line of each method, call one custom method such as self.updateItemsAndPrice();. In that custom method, add below codeenter image description here
updateItemsAndPrice: function () {
                    let self = this;
                    let totalSelectedItemsCount = 0;
                    let totalSelectedItemPrice = 0;
                    $('.input-text-qty').each(function () {
                        let qty = $(this).val();
                        if (qty > 0) {
                            totalSelectedItemPrice += (qty * parseInt($(this).attr('data-item-price')));
                    if (totalSelectedItemsCount > 0) {
                        $('#product-addtocart-button > span').text("Add " + totalSelectedItemsCount + " item(s) to Basket (" + self.options.currency_symbol + totalSelectedItemPrice + ")");
                    } else {
                        $('#product-addtocart-button > span').text("Add to Cart");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.