Bespoke number input for Webflow Add To Cart

Bespoke number input for Webflow Add To Cart

I wanted to use adjacent add and subtract buttons to increase the number of items that could be put in a shopping basket.

The default UI experience on Webflow uses the standard number input field to increase or decrease the number of items to add to the shopping basket.

I wanted a more contemporary look of plus and minus buttons on each side of my input field.

The first step was to get rid of the default little arrows on a standard HTML number input form. So I found this little piece of CSS on W3schools to help me do that:

<style>

/* Hides the arrows in standard number input field */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { 
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

</style>

Add an Embed block just above the input field and include the above CSS or add it to the custom code in the page’s /body setting area.

The next thing was to add a flex row, wrapping two new link blocks with CSS names set as ‘inc’ and ‘dec’. Inside the new link blocks add text or image or icons that will show as the plus and minus buttons. Set the CSS names for these items as ‘plusminus’.

I styled the flex row so that each of the fields lined up neatly alongside each other and removed some of the input borders on the left and right to get it looking right.

Now for the magic; I followed this Webflow forum post and used the linked Webflow preview by Noah Raskin to delve into the working code…\

screenshot of coding area in Webflow
Go into the product page custom code area and add the code below to the ‘Before tag’ field

Go into the product page custom code area and add the code below to the ‘Before </body> tag’ field

<script>
const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const inputField = document.getElementById('CHANGE THIS TO THE ID OF YOUR OWN QUANTITY FIELD');if (minusButton !== null) {
  minusButton.addEventListener('click', event => {
    event.preventDefault();
   const currentValue = Number(inputField.value) || 1;
   if (currentValue > 1) {
     inputField.value = currentValue - 1;
   }
    });
  plusButton.addEventListener('click', event => {
   event.preventDefault();
 const currentValue = Number(inputField.value) || 1;
 inputField.value = currentValue + 1;
  });
};
</script><script>
$(document).ready(function(){
  $(".cart-quantity:contains(1)").css("background-color", "#fff");
});
</script>

The only item that will need a unique name is the ‘const inputField = document.getElementById’ this needs to be changed to the ID of the Quantity field in your product page:

Here’s the final outcome showing a flex row for the quantity field with plus and minus buttons either side and the standard up and down buttons on the number input field hidden.

Screenshot of e-commerce product page
«
»