Drupal 9: How to add quantity widget to add to cart form on product display pages

Drupal 9 'Add to cart' form displaying the quantity textfield widget

After spending hours and banging my head against a brick wall, I found it!

I found the setting in Drupal 9 with Commerce Core that would allow me to display a quantity text box alongside the Add to Cart button on my product display pages.

To save you the time I spent trying to work it out, and so that I remember how to do it next time, I've put together this helpful little step by step guide.

Add the quantity field widget to your Add to cart form
1. Firstly you want to navigate to /admin/commerce/config/order-item-types/default/edit/form-display

The 'order item type' manage form display screen in Drupal 9

2. Secondly - and this bit is important as I had previously kept missing this step and is the reason I couldn't add the quantity widget successfully - click on the Add to Cart link towards the top of the page, like this:

Find the Drupal 9 'Add to cart' settings link

 

Ensure the Quantity field is enabled by dragging it up from the disabled section. I placed my quantity field just under 'Puchased entity'.

3. Set the widget of Quantity field to Number field.

4. Click Save and Voila!