How to do a functional + and - for product quantity

Hello,
i would like to design something like this:

If i tap the plus the number goes up and if i tap - the number goes down, but not more than 1

Here is my public share link: LINK
(how to access public share link)

Custom code :). I will help you as soon as I get back to my office. Just please leave a read-only for your website down below

Here is how to find your read-only link:

@Fabian_Gmeindl great question!

I added one to my site here:
https://preview.webflow.com/preview/midwestmuttshop?utm_medium=showcase&utm_source=midwestmuttshop&preview=86b075a9b6790f36ec589ae8d8aaaa02&pageId=5be709f5be33e4a31a1699dd&itemId=5bf992f20913630b0488436c

It requires a little custom code and adding classes to the + and - buttons:

<script>
$('.input-number-increment').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
});

$('.input-number-decrement').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(), 10);
  $input.val(Math.max(val - 1, 1));
})

</script>

They’re each text elements with a specific class applied to achieve that behavior.

Please let me know if you have any questions :man_bowing:

You can see it live and in action here.

8 Likes

I guess I’m too late for the party haha. @Waldo as always doing a great job. Let us know if you need any help :slight_smile:

Thank you so much for the help

It seems like i fucked up something :frowning: . The code is the same as you posted here and i used all the classes, i checked 2 times but i just dont get the mistake Also how do I let 1 be my predefined value for the input field?
https://preview.webflow.com/preview/batu-bali?utm_medium=preview_link&utm_source=designer&utm_content=batu-bali&preview=31b44734d0945f7f88855573cc5212c6&pageId=5cfba36671000a08cb4e6ef6&itemId=5cfba36671000a9c934e6f14&mode=preview

@Waldo I’m also having trouble getting this to work. It seems like maybe your class names in the sample project are different from the code you supplied? Also, looks like you might be using Jquery? I couldn’t find where you put the code on the demo project you supplied so it’s a bit harder to troubleshoot. Assumed you’ve put it in project settings which unfortunately I don’t think we can access :frowning: is there any way you could move the code to be somewhere we can see in the live project? Thanks so much!

Nevermind, just solved it! I hadn’t noticed Waldo has put the .input-number-group class on input-group which allowed the code to work for me :slight_smile:

Hey guys, this was exactly what i was looking for! The code works for but only on the condition that I enter a number and then click the ‘-’ or ‘+’ buttons.

I noticed in @Waldo site and read only, there already is a defined value, but i cant find how to replicate this to see if it solves my problem!

Any help would be great thanks! :vulcan_salute:

1 Like

Hi! Thanks a lot for the tip… I’m not getting it to work:

  • I have created the elements as shown in the example
  • I have created the classes as shown in the example, including the combo class with input-group and input-number-group
  • I have added the script

But when I post and test, the texts don’t act as buttons and obviously I can’t add or subtract values in the quantity box

Any idea what may be failing?

I’ve also followed this step and step as well and the number field only becomes responsive with the plus and minus buttons after inputting a number?

I can’t speak for the suggestions listed above, but if anyone is having trouble you can check out the solution provided by CodeCrumbs (under “Custom Quantity Picker”) which is working great for the project I used it on:

You’ll be able to grab the code necessary without an account, but if you signup for free it provides a short video walkthrough along with the ability to save/favorite various other crumbs on the site :+1:

My issue was because I had more than one product on the page so every solution, including the above, wasn’t working.

To solve I pasted the following into the head

input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -moz-appearance: none; -webkit-appearance: none; appearance:none; margin: 0; } input[type="number"]:hover::-webkit-inner-spin-button, input[type="number"]:hover::-webkit-outer-spin-button { -moz-appearance: none; -webkit-appearance: none; appearance:none; margin:0; }

and the following into the body

Because I’m using Foxycart I had to change the input value to ‘quantity’.

Thanks so much as ever for your work @Waldo!

Question – would this work in the cart also?

I see in Mid West Muts, it is in the product page but not the cart.

Have tried adding to the side cart in this project: https://preview.webflow.com/preview/pyarful?utm_medium=preview_link&utm_source=designer&utm_content=pyarful&preview=fa01113d400a49dfa8ce1e9ecfcc7a24&workflow=preview

With the script code in the ‘Footer’ of custom code settings, but no dice at the moment.

Wonder if you can spot anything I’m doing wrong, or if this would just not work in the cart element?

Thanks a lot!

Thanks a lot, man @Waldo, It’s working :smiley:

Thank you for sharing @Waldo . I followed the steps but it is not working for me yet. Can someone spot my mistake?

https://preview.webflow.com/preview/bureaurose?utm_medium=preview_link&utm_source=designer&utm_content=bureaurose&preview=e2627b112144588a0550d70ff3263c8a&pageId=64232d4429051a207bd59292&itemId=64233064459cd7400cec3644&workflow=preview

Thanks in advance!

I achieved this using interactions only, for a basic implementation. I only needed my toggle to go up to a quantity of 3. For each different quantity, I only needed to show a different price and a different buy button (each button with a unique link).

So what I did was create three of each of the following elements:

  1. Price
  2. Quantity toggle
  3. Button

Each of the items above has a combo class indicating its “number” (ex: toggle 3)

I then used interactions to hide and show each element, as the toggle is clicked, and it works well!

Hello there ! I tried redo what Waldo did but it doesn’t seem to work… The main difference I have with this example is my input field is a dynamic one… And i can’t change that which is very annoying… if anyone knows how to solve this I’d be very grateful !

https://preview.webflow.com/preview/polimair-fr?utm_medium=preview_link&utm_source=designer&utm_content=polimair-fr&preview=3ec6432dea342344d477279781235d86&pageId=65b8f80bb3459d789ce02361&itemId=65cb4905471a80f67c9dad95&locale=en&workflow=preview

https://polimair-fr.webflow.io/product/chaise-beluga