How do you get the Change Quantity in the Shopping Cart right?

Almost every e-commerce shopping cart shows the number of times a particular item is in the cart. However, this seemingly simple value can lead to some serious conversion blockers.

The quantity field

One of the options that is present in almost every shopping cart from Magento to WooCommerce and beyond is the quantity field. The function seems simple: show the number of times a certain item is present in the shopping cart. However, looking at the large number of different implementations of this field, there does not seem to be a good best practice for this yet. This can cause many website owners to reinvent the wheel, often with undesirable consequences.

Avoid using the term 'qty'

In English, the term 'quantity' is often abbreviated to qty, which can confuse visitors. Especially for visitors who do not have English as their first language, there may be confusion about what this abbreviation stands for.

Jamie Appleseed - Co-founder of Baymard Institute

"Although most people know that 'QTY.' is an abbreviation for the term 'Quantity', you should also consider visitors whose first language is not English.

This is especially true when there is more than enough space to display the full word."

The infamous 'Update' button

The most common implementation that allows visitors to adjust the quantity of an item is a Change button ('Update Cart'). Other well-known variations include a [-] and a [+] button or a 'refresh' icon. All of these options require adding additional elements to the cart and/or requiring visitors to figure out how to change the number of items. Especially considering the shopping cart is already one of the busiest pages on many web shops, it seems like good advice to site owners to reduce the number of non-required elements to a minimum.

Try placing your Edit button near your 'Quantity' field. After all, visitors can only see a very small area of the screen clearly. If they have to search for elements outside their field of vision, this creates friction, which can make them decide to close the webshop.

What does 'Update' update?

One aspect of the Change button that is often overlooked is that it is not entirely clear to many visitors what happens when they click on it. Frequent shoppers these days will know that it's probably just the quantity changing, but how can they know for sure? For example, to ensure the smallest possible amount of friction, rewriting the button to Change Quantity could help.

The best solution for your webshop

Use a data-driven approach

There are several questions you should ask yourself before deciding what to make your number selection look like. Only by answering questions like these can you find out which solution is likely to work best for your audience.

→ Input field using type="text"

Currently, this seems to be the most popular way to display the quantity of an item in the cart. In technical terms this includes an input element with a type="text" attribute. This will ensure that your field looks like a standard input field that you find on websites and checkouts on the internet.

Benefits of this solution

The fact that this is currently the standard solution and many people know how it works is an important plus for this solution. People usually don't like change, so leaving things as they are can be the best solution for your webshop.

Problems with this solution

The most significant drawback of this solution is the aforementioned Change button. Such a button can be a link next to the item or even a real button that allows visitors to adjust all quantities at once.

In any case, it provides yet another extra element that will have to attract the attention of visitors, something that you preferably do not want. After all, the Checkout button should be the visual rock star of the shopping cart page. Another subtle solution to this problem is to put a small Update link next to each quantity field.

→ Input field using type="number"

A modern variant of the one above. In this case an input element is again used, but this time with a type="number" attribute. The number field is a relatively new type of field and is part of the set of HTML5 input types. This alternative is supported by most modern browsers and falls back to a text field for browsers that do not support it. The number field type offers every advantage over the regular text field.

Benefits of this solution

It gives visitors a way to increase value without the need for additional JavaScript. Additionally, it allows you to associate a minimum and maximum value to the field, which limits the number of items a visitor can select. On many browsers it also appears to block non-numeric values, which can help with input validation.

Problems with this solution

This field type allows non-numeric values on some browsers and does not display a numeric keypad on mobile devices. If you are interested in these capabilities, you can explore the type="count" field type or learn about other mobile input types.

→ Dropdown select field

Instead of using an input element, this solution sets an element. Especially for less experienced mobile users, it can be challenging to select the correct value using the spinner. User testing can be used to see whether the target group is able to do this.

Benefits of this solution

First, visitors can only choose from the values presented to them. This will also help with field validation. In addition, the established set of values will allow you to set a maximum quantity per item that may even be linked to your inventory database. In addition to this, mobile users will be presented with the standard spinner that will allow them to easily choose the quantity they want. Finally, the element offers additional JavaScript actions that can be linked to selecting a number. By connecting a Change JavaScript function to an onChange event of the selection field, you may be able to omit an overly present Changes button. Keep in mind that visitors who have disabled their JavaScript should still see a button to adjust their shopping cart.

Problems with this solution

The most prominent issue is related to the mobile usability of the select element. Especially for less experienced mobile users, it can be challenging to select the correct value using the spinner. User testing can be used to see whether the target group is able to do this.

→ Buttons with [-] and [+]

These solutions use buttons or links placed around an inout field. This solution is being used more and more often and for good reasons.

Benefits of this solution

One of the biggest advantages of this solution is that it offers visitors the option to manually enter quantities as well as click/tap. This makes it an excellent option for both desktop and mobile devices. In addition, it is both intuitive ("I want more items") and based on the assumption that most visitors will not adjust the quantity anyway or will do so with small increases or decreases.

Problems with this solution

If you want the prices in the shopping cart to also change when the visitor clicks on [-] or [+], you need to use JavaScript for this. As with the solution above, please note that the shopping cart will still work for visitors who have disabled it. Additional elements are again added to the shopping cart. However, given their proximity to the element in the intuitive way they work, they won't be as noticeable as the Change button that has been mentioned many times before.

→ Static amount

If your research shows that visitors rarely change the quantities in a shopping cart, why would you offer this solution anyway? After all, you can also let them select the number of items on the product page. Therefore, a global Change link would allow them to change options such as size or color and quantity at the same time.

Benefits of this solution

By removing the option to adjust quantities, distractions in the shopping cart will be kept to a minimum. This will ensure that visitors have to spend as little mental energy as possible on the actions they need to take in the shopping cart, such as checking which items have been ordered or clicking the Checkout button.

Problems with this solution

As indicated earlier, visitors often do not like change. If they have become accustomed to being able to adjust the quantities in the shopping cart, and your website does not offer this option, this could cause them to leave the website. In addition, it could ensure that visitors who have to return to the product page never return to the shopping cart.

Recommendations

As the detailed analysis above shows, all options have their own advantages and disadvantages. However, it is my opinion that the dropdown selection field is the best choice for most websites.

The reason for this is that it offers an uncustomized experience on mobile devices, it offers a simple selection, and it is familiar to most users. Other benefits include the ability for additional data validation, the lack of need for a Change button and the ability to link quantities to stock make this the best choice. This even when the mentioned limitations are taken into consideration.