Jump to content

Changing quantity options on store

Go to solution Solved by paul2009,

Recommended Posts

  • 1 month later...

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?

Link to comment
  • Solution
8 hours ago, fuzzyp said:

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

The Quantity input on Product Detail Pages can be modified with the following JavaScript. You'll need to add this to the Code Injection Footer panel.

<!-- Change all quantity inputs to allow only multiples of 5 -------------------------------->
<!-- Copyright Soundfocus Digital [sf.digital] ---------------------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish.----------------------------------->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const sfsfQuantityInputDiv = document.querySelector('.product-quantity-input');
    if (sfsfQuantityInputDiv) {
      const sfQuantityInput = sfsfQuantityInputDiv.querySelector('input[type="number"]');
      if (sfQuantityInput && sfQuantityInput.step === '1') {

        // Set the default value to 5
        sfQuantityInput.value = '5';

        // Change the step to 5
        sfQuantityInput.step = '5';

        // Set the min to 5 and the max to 300
        sfQuantityInput.min = '5';
        sfQuantityInput.max = '300';
        
      }
    }
  });
</script>

Bear in mind that the cart can't hold more than 500 items, so if a user adds 300 of one item, there's only a remaining capacity of 200 items.

Note: Like all the code posted on this forum, this is a simplified example, provided without warranty. For a supported solution from a professional developer, I recommend booking a Squarespace Expert.

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

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 1 month later...

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>
 

Edited by CatalinaTrujillo
Link to comment
  • 3 weeks later...
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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 2 weeks later...
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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.