How to Get Update Shopping Cart Quantity Right?

Quantity

Virtually every e-commerce shopping cart displays the number of times a given item is in the cart. However, this ostensibly simple quantity metric can lead to some serious conversion roadblocks.

Jump to recommendations

The quantity field

One of the features that are present in almost every shopping cart from Magento to WooCommerce and beyond is the quantity (qty) field. Its function seems quite simple: to show to the number of times a given item is present in the shopping cart. However, judging from the large number of different implementations of this field, there doesn’t seem to be a proper best practice in place yet. This causes many site owners to reinvent the wheel, often with dire consequences.

Try to avoid the term ‘qty’

By the way, while qty is very commonly used as an acronym for quantity, it might confuse some visitors. In particular non-native English speakers might be having trouble understanding what the acronym refers to.

Jamie Appleseed - Co-founder of Baymard Institute

Jamie Appleseed

“While most people do know that ‘QTY.’ is short for ‘Quantity’, you need to consider customers who don’t have English as their mother tongue.

This applies in particular when there is more than enough room to spell out the entire word.”

The infamous ‘Update Cart’ button

The most common implementations that allow visitors to change the quantity of an item are using an Update Cart button of some sort. Other common variations include [-] and [+] buttons or Change links. All of these are adding additional elements to the shopping cart and/or require a visitor to hunt for a way to change a quantity. Given that the shopping cart is already a crowded page on most web shops, site owners are well-advised to keep the number of non-obligatory elements to a minimum.

Field and button closely grouped?

Try to keep your Update Cart in close proximity to your quantity field. After all, visitors can only see a very small portion of the screen in focus at the same time. Whenever they have to look for elements further away, this creates friction, which might just turn them away from your shop.

What does ‘Update cart’ update?

One often overlooked aspect of the Update Cart button is that it often isn’t immediately clear to all visitors what exactly will be updated once they click it. Most frequent shoppers these days will know it will probably only update the quantities, but how can they be sure? In order to create the least amount of friction, a simple rewording to Update Quantities might just do the trick.

The best solution for your shop

Using a data-driven approach

There are several questions you should be asked yourself before deciding how to design your quantity selector. Only by answering questions such as those below, you’ll be able to find out what solution will likely work best for your audience. If you happen to run a large e-commerce website, then you can use the answers below to get new A/B testing ideas.

  • What is the average amount people order per transaction?
  • How many people have changed the amount they want to order in the shopping cart?
  • Does the product page already offer an amount selection field?
  • How technologically savvy are your visitors?
  • What percentage of visitors are using mobile devices to shop on your website?
  • How many times do visitors update the quantity of multiple items at once?
  • Do visitors on mobile devices change the amount of items more or less than on the desktop?
  • What does mouse tracking or user testing show about your quantity field?

Picking the right field type

→ Input field with type=”text”

Currently, this seems to be the most popular way to display the quantity of an item in the shopping cart. In technical terms, this involves having an <input> element, with a type=”text” attribute. This will cause the field to look like a standard input field you would find across websites and checkouts all across the web.

Benefits of this solution

The fact that this is currently the de-facto standard and people know how it works is a major upside for this solution. Furthermore, people don’t normally like change too much, so keeping it as-is might be the best solution for your web shop.

Problems with this solution

The most critical drawback of this solution is the aforementioned Update Cart button. Such a button can either be a link marked Update next to the item, or even a real button that allows shoppers to update all quantities at the same time.

In any case, it creates an extra element on the page that needs to get the visitors’ attention, something you preferably do not want. After all, the Proceed to Checkout button should be the visual rock star of the shopping cart page. A subtle solution for this issue might be to add a small Update link next to each quantity field.

→ Input field with type=”number”

A modern incarnation of the variation above. In this case, once again a <input> element is used, but now it’s given a type=”number” attribute. The number field is a relatively new field type and is a member of the HTML5 input types.

This alternative is supported in most modern browsers, and degrades gracefully to a text field for browsers that don’t support it. The number field type offers some benefits over the regular text type.

Benefits of this solution

It provides visitors a way to increase the value, without any further Javascript being required. Also, it lets you set a minimum and maximum value on the field, which would limit the number of items a visitor can select. On many browsers, it also appears to be blocking most non-numeric input, which would help with the validation of the input.

Problems with this solution

This field type does allow for entry of non-numeric values and doesn’t show the numeric keypad on mobile devices. If you are interested in those features, you might want to check out the type=”tel” input type or learn about other mobile input types.

→ Dropdown select field

Instead of using an <input> element, this solution utilizes the <select> element to get the job done. This element can be used to offer visitors a limited range of options and allows for additional actions upon selecting a choice.

Benefits of this solution

Firstly, visitors can only select from the values that are provided to them. This will help with the validation of the field. Also, the fixed set of options will allow you to set a maximum value per item, potentially even linked to your inventory database. Furthermore, mobile users will be presented with a native spinner that allows them to easily select the amount that they want. Lastly, the element offers additional Javascript actions to be linked to the selecting of an amount. So, by linking an Update Cart Javascript function to the onChange event of the select field, you can potentially omit a prominent Update Cart button. Do keep in mind, though, that visitors that have their Javascript disabled will need to see a button in order to update their carts, though.

Problems with this solution

The most prominent drawback relates to the mobile usability of a <select> element. Especially less-experienced mobile users might struggle a bit to select and submit the amount value through the spinner. User testing can be used to find out if your target audience is able to do so well.

→ Buttons with [-] and [+]

This solution uses either buttons or links surrounding an <input> field. This solution in gaining in popularity, and for good reasons.

Benefits of this solution

One of the major benefits this solution offers is that it allows visitors both to do free text entry of numbers and a click/tap as well. This makes it a great variation for desktop and mobile devices alike. Also, it is both intuitive (“I want more items”) and based on the paradigm that most visitors either won’t change the amount anyway or by small increments.

Problems with this solution

If you want the prices in the cart to change when a visitor clicks [-] or [+], you should use Javascript for this. Just like the solution above, take care to keep the cart working for visitors that have this disabled as well. Furthermore, once again, extra elements are added to the shopping cart. However, given their proximity to the element and intuitive nature of functioning, they don’t need to stand out as much as the Update Cart button mentioned several times earlier.

→ Static amount

If research shows visitors are rarely changing their amounts in the cart anyway, why offer the feature in the first place? After all, you can let them select the amount of items that they want on the product page as well. Therefore, an Edit link might let them change both options like size/color and amount as well.

Benefits of this solution

By removing the option to change the amount altogether, there is a minimal level of visual clutter in the cart. This will lead to visitors having to spend less mental energy performing the actions that they want to in the cart, such as reviewing their items or clicking on the button Proceed to Checkout.

Problems with this solution

As stated before, people don’t like change. If they got used to being able to change their amounts in the shopping cart, and your website doesn’t offer the possibility to do so, this might cause them to leave. Also, even if they are willing, making visitors leave the flow and send them back to the product page might cause them to never return to the cart again.

Recommendations

As the thorough analysis above shows, all the options have their own upsides and downsides. However, if I feel like the select dropdown is currently the best choice for most websites.

The reason for this is that it offers a native experience on mobile devices, it allows for easy data entry, and should be familiar to most users. Other upsides include additional data validations, the lack of need for an Update Cart button, and the possibility to limit numbers based on inventory make this the best choice. Even considering the limitations that were mentioned earlier this makes the dropdown the best choice in my opinion.


Dutch translation: Hoe Krijg je Wijzig Winkelwagen Aantal Goed?


Theo van der Zee

Author: Theo van der Zee

He is the founder of ConversionReview. He has been building and optimizing websites for 15+ years now, and doing so with great success.

On top of his digital skills, Theo is also a trained psychologist and frequent speaker at events around the world.

With UserFeedback you can

Find Out What Your Users Want

UserFeedback logo
  • Decrease your bounce rates
  • Improve user experience
  • Get lower ad costs
Learn more