Skip to main content

Hide the Quantity Selector for Specific Products

Prevent quantity changes for select products by hiding the quantity selector using CSS.

Updated over 2 weeks ago

⚠️ Important notice

This customization only works with Version 1 of the Upcart cart modules. If you recently upgraded your cart to Version 2, these customizations may not work. You will need to use the new selectors provided for Version 2 in the migration guide.

If your customizations are not working as expected, you can also revert your cart back to Version 1 instead of using Version 2.

We are currently working on new customization templates for Version 2 of the modules, and they will be available soon.

Overview

This customization hides the quantity input (including the plus and minus buttons) for specific product variants in the cart. This ensures those products can only be purchased in fixed quantities.

This is helpful for free gifts, subscription boxes, or limited-edition items.

This method uses Shopify variant IDs (not product IDs), so you can target specific variants directly.


Step 1: Find the variant ID

  1. In Shopify Admin, go to Products

  2. Click the product you want to modify

  3. In the Variants section, select the variant you want to lock

  4. Look at the URL in your browser β€” the variant ID appears after /variants/

Example URL:

https://admin.shopify.com/store/your-store/products/1234567890/variants/36485954240671

In this example, the variant ID is:

36485954240671

Step 2: Add custom CSS

  1. Go to Upcart > Cart Editor > Settings > Custom CSS

  2. Paste the following code into the input area, replacing the example variant ID with your own:

.upcart-product-item[id*='36485954240671'] [class*="styles_QuantityField__"] {   display: none !important; }

Important notes

  • Make sure there is exactly one space between the selectors:
    ​.upcart-product-item[id*='...'] and [class*="styles_QuantityField__"]

  • Repeat the rule for each variant you want to target by using its unique ID

Example for multiple variants:

.upcart-product-item[id*='36485954240671'] [class*="styles_QuantityField__"], .upcart-product-item[id*='49133203521846'] [class*="styles_QuantityField__"] {   display: none !important; }

Result

  • Customers still see the product in their cart

  • The quantity cannot be adjusted

  • The product remains locked to the quantity added initially (for example, 1 unit for a free gift)

Use this for:

  • Free gifts

  • Promotional samples

  • One-per-customer product rules


Still need help?

For more complex rules, we recommend working with a Shopify Expert. They can help with HTML, CSS, and JavaScript customizations inside your cart drawer.

Did this answer your question?