Changing quantity options on store

Hi I would like to know how I can make the quantity of the product to be display on increments of 10 (10-20-30-40...) instead of ones (1-2-3-4-5-6...)

I would like to change my quantity box on my store to only allow multiples of 5 to be selected, starting at 5.

5, 10, 15, 20 .... until 300

Is it possible to create the quantity box into a dropdown? Or allow when you click the increase quantity button it jumps by multiples of 5?

Hello @CatalinaTrujillo have you found anything on this topic so far? I have the same problem…

Hi, Yes... 

I am going to try to explain it... English is not my first language.

You have to add a Code Injection in the Footer section and a Tag to the product you want to apply the Code Injection.

They sent me the code before and I had to adjusted to my needs.

I going to share the one Code Injection I am using right now. You need to change the blue words depending of what you need.

If you wan to take a look to my website and see how it works, look the Bubble candles. 

http://www.catalinadreamcorner.com

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const sfCartBtnInner = document.querySelector('.collection-type-products .tag-by-five .sqs-add-to-cart-button-inner');
    if (sfCartBtnInner) {
      sfCartBtnInner.innerText = "Add 5 Candles to Cart";
      sfQtyValue = document.querySelector('.product-quantity-input input[aria-label="Quantity"]');      
      sfQtyValue.addEventListener('input', function (e) {
        var sfCandles = this.value * 5;
        if (sfCandles == 1) {
          sfCartBtnInner.innerText="Add " + sfCandles + " Candles to Cart";
        }
        else {
          sfCartBtnInner.innerText="Add " + sfCandles + " Candles to Cart";
        } 
      });
    }
  });
</script>
 

Thanks Paul2009. Is it possible to do this to only certain products rather than all products?

1 hour ago, cbascle said:

Is it possible to do this to only certain products rather than all products?

Yes.

If you tag those products (add a 'tag' when editing the product using the product editor), you should be able to prefix the querySelector value with the tag class. For example, instead of '.product-quantity-input' it might be '.tag-fives .product-quantity-input'.

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 I was just searching for this same solution and your code works beautifully! I was wondering if you know of a way to display the quantity selector as a dropdown rather than a box with arrows? 

2 hours ago, LetterAndInk said:

I was wondering if you know of a way to display the quantity selector as a dropdown rather than a box with arrows? 

To be honest, it's not something that I'd personally recommend because of the increased page load time for minimal benefit (and the fragility). However, if you have an edge case that makes it worthwhile on your site then it would be possible with some JavaScript (JS). The JS would need to add the select element (the dropdown) to the page, hide the original input control and then pass the value from the select to the input whenever the value changes.

Did this help? Please give feedback by clicking an icon below  ⬇️