Removing quantity button

Store Design
, , ,

Topic summary

A store owner selling one-of-a-kind products needs to remove quantity selectors from both product and cart pages since customers can only purchase one item at a time.

Solutions provided:

Product Page:

  • Navigate to Online Store > Themes > Customize > Products > Default product
  • Hide or remove the “Quantity selector” block under Product information
  • Alternatively, add CSS code to base.css file:
.product-form__input { display: none; }
.quantity-popover { display: none; }

Cart Page:

  • Add CSS to Custom CSS in Theme settings:
.quantity-popover-container { display: none !important; }
th.cart-items__heading--quantity { display: none; }
dt.cart-item__quantity { display: none; }

Multiple community members offered similar CSS-based solutions, with one providing visual screenshots demonstrating the theme customization approach. All solutions involve either theme customization settings or adding custom CSS code to hide quantity elements.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

Can anyone help me to remove the quantity buttom on the product page and cart page. I sell one of a kind products

miyucollective.com

IMG_3957.jpeg
IMG_3957.jpeg2360×1640 244 KB

IMG_3956.jpeg
IMG_3956.jpeg2360×1640 123 KB

2

@Nienke_pr

th.cart-items__heading--wide.cart-items__heading--quantity.small-hide.caption-with-letter-spacing, td.cart-item__quantity {
    display: none;
}

for cart page add code in base.css

3

@Nienke_pr for product page follow

tg.PNG
tg.PNG1575×932 181 KB

4

Hi @Nienke_pr

You can remove quantity on product from Online Store > Themes > Customize > Products > Default product, hide or remove Quantity selector block under Product information

Screenshot 2024-08-02 at 09.38.43.png
Screenshot 2024-08-02 at 09.38.43.png1562×813 147 KB

And please add code to Custom CSS in your Online Store > Themes > Customize > Theme settings to remove quantity on the cart page

.quantity-popover-container { display: none !important; }
5

Hello @Nienke_pr ,

You can try this code; it will be helpful to you.

Go to the Online Store->Theme->Edit code->Assets->base.css>add this code at the bottom of the file.

.product-form__input {
    display: none;
}
quantity-popover {
    display: none;
}