Quantity boxes versions for ecommerce

Question

So I'm making an eCommerce template and now I reach the point where I need to make a card product for sites that need quantity selection (not bulk or volume).

I did 2 basic options, one with and one without "-" and "+" buttons so the card won't get any higher which it's a problem for mobile due to real state.

The problem with the full version is that: A) too close to the "add to cart" button and B) Height

The problem with the slim version is that: A) No mouse capability to make a choice

I did a little research here but every question/answer is very old.

Answer 1

Option 2 is better in every way...

• It looks nicer
• It allows for multiple item lines (with only 1 checkout button at bottom)
• It works better for desktop users who want to click with mouse
• It works better for mobile users who don't want an annoying keyboard to popup
• It keeps the "checkout" button out of the way, to avoid miss-clicks

People know how to scroll on a mobile, you don't need to fit everything on the screen at the detriment of design and usability.