Add arrow buttons to woocommerce quantity input elements

quantity-arrows.css

div.quantity {
  position: relative;
  margin: 0 0 1rem;
}
div.quantity div.arrows {
  padding: 1px 0;
  position: absolute;
  display: flex;
  flex-direction: column;
  right: 0;
  height: 100%;
  justify-content: space-between;
  border-left: 1px solid rgba(51, 51, 51, 0.25);
}
div.quantity div.arrows > i {
  padding: 0 5px;
  color: rgba(51, 51, 51, 0.75);
  cursor: pointer;
}
div.quantity div.arrows > i:focus, div.quantity div.arrows > i:active {
  color: #333333;
}
div.quantity div.arrows .arrow-divider {
  height: 1px;
  background: rgba(51, 51, 51, 0.25);
}
div.quantity input[type=number] {
  margin: 0;
  padding-right: 24px;
  padding-left: 0;
  text-align: center;
}
div.quantity input[type=number]::-webkit-inner-spin-button, div.quantity input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

quantity-arrows.js

// Uses fontawesome for the rendering of the arrows

window.onload = (function(){
    inputs = document.querySelectorAll('.quantity > input[type=number]');

    inputs.forEach(function(value) {
        arrows = createArrows();
        value.parentNode.insertBefore(arrows, value);
    });
});

function createArrows() {
    arrowPlus = document.createElement("i");
    arrowPlus.className = 'fa fa-caret-up';
    arrowPlus.addEventListener('click', function(e) {
        input = e.target.parentNode.parentNode.querySelector('input[type=number]');
        newValue = parseInt(input.value)+1;
        input.value = newValue;
    });

    arrowMin = document.createElement("i");
    arrowMin.className = 'fa fa-caret-down';
    arrowMin.addEventListener('click', function(e) {
        input = e.target.parentNode.parentNode.querySelector('input[type=number]');
        newValue = parseInt(input.value)-1;
        if (newValue !== 0) {
            input.value = newValue;
        }
    });

    divider = document.createElement('span');
    divider.className = 'arrow-divider';

    arrows = document.createElement("div");
    arrows.className = 'arrows';
    arrows.appendChild(arrowPlus);
    arrows.appendChild(divider);
    arrows.appendChild(arrowMin);

    return arrows;
}

Question, for some reason it does change the qty number but doesn't update the cart. Do you know how to do this? I have been trying to figure it out, but just can't swing it.

Question, for some reason it does change the qty number but doesn't update the cart. Do you know how to do this? I have been trying to figure it out, but just can't swing it.

The way I've done this before is by triggering a click event on Woocommerce's update_cart button. You would want add a line after the input.value = newValue; part like below:

let updateCartButton = document.querySelector('[name="update_cart"]');
updateCartButton.removeAttribute('disabled');
updateCartButton.click();