WooCommerce - Allow customer to change default add-to-card quantity

51 Views Asked by At

I'm administrating a webshop where you can buy food for functions. On the website i'm missing the feature that the customer can pre enter the amount of guests they want food for. And then when the customer add products to the card from that point on, it's the defined amount. I'm using Woocommerce in Wordpress. Is there and easy solution to this or an existing plugin for Wordpress?

1

There are 1 best solutions below

0
KejserGraa On

I have solved the problem myself. If any ever find themself with the same issue. Then here is the answer. Found a solution using js and then css for the input field.

I have also implemented in the js that the min. amount allowed is 8 and with the css, the input field will be collered red if the amount i below 8.

var numberOfEnvelopes = localStorage.getItem('numberOfEnvelopes');
    if(numberOfEnvelopes != null) {
        changeQuantityWoo();
        document.querySelector('input[name="envelopes"]').value = localStorage.getItem('numberOfEnvelopes');
    } else {
  localStorage.setItem('numberOfEnvelopes', 8);
 }
    document.querySelector('input[name="envelopes"]').addEventListener("input", function() {
         console.log(this.value);
        // Save to localstorage.
  if(this.value >= 8 ) {
   localStorage.setItem('numberOfEnvelopes', this.value);
         changeQuantityWoo();
  }
    });
    // change woocommerce add to cart buttons
    function changeQuantityWoo() {
        let btns = document.querySelectorAll('a[data-quantity]');
        btns.forEach( function(event) {
            event.dataset.quantity = localStorage.getItem('numberOfEnvelopes');
        });
    }
/*Qty field*/
input[name="envelopes"]:invalid {
 color: red;
 border-color: red;
}