How can I hide the 'Quantity Select' field on a product page?

Hello,

I have been trying to remove the 'Quantity Select' field from my store for days now and I can not get rid of it. I have injected the code that has been posted on Squarespace:

and it works great on everything apart from the 'Quantity'. I simply cannot figure out hot to get rid of it. Has anyone figured this out yet?

Looks like you have the wrong class on the quantity - it's -input not -select.

<style>
 .sqs-add-to-cart-button-wrapper,
 .product-price,
 .product-quantity-input {
   display:none;
   visibility:hidden;
 }
</style>

Better yet, it's easier if you just hide the wrapper that holds the button and quantity like this:

.product-add-to-cart,
.product-price { visibility: none; display: none; }

Hi, Thanks for your suggestion. I tried the addition of '!important', and still nothing. The 'add to cart', 'price' everything else I can get rid of at will, but the 'quantity select' simply will not budge. I would very much appreciate any additional suggestions.

@D_Schneider I've corrected my answer, realized you were calling the wrong class for the quantity.

Awesome!!I knew I had to be missing something obvious. Thanks a million it worked perfectly.

fantastic. thanks for this information - now I see all the options!

Has something changed recently (does the page header code injection code need to be updated)? I used the code suggested above to hide the quantity on a product page successfully -- when I placed two products from that page on different site pages, the quantity didn't appear (as desired). This morning I'm adding another product from that same product page to another site page, and the product is displaying the quantity (not desired).

In trying to resolve my issue (above), I created a new product on the page, inserted it into my site page, and the quantity didn't appear, as desired. It looks like products on the page that I created before I added the page header code injection will still show the quantity....word to the wise.

I thought I had resolved my issue by creating a new product on the page that had the page header code injection to hide the quantity. Am appealing to @TreyT -- your page header code injection was so helpful, initially! Products I create on the same product page are now displaying the quantity -- it's no longer hidden (although it's hidden on a couple of the products on the same page, so the behavior is inconsistent). I'm stumped....

Can you link to the page where you are having this issue?

Thank you -- I've figured out a workaround, by changing the Checkout Settings to hide the Quantity for service products:

SERVICE PRODUCTS QUANTITYShow the Quantity field for service products anywhere they appear, allowing customers to buy more than one.

I have some folks testing the product on this page: https://www.serfa.org/2019-official-showcase-app

The quantity is only hidden because I unchecked the box for the Service Products Quantity. When I check it, it shows up again, even though the code injection you provided is applied to that product's page...

The page you linked to doesn't have anything entered for the code injection. The code would need to be added to each page you need the quantity to be hidden on. Can you add the code to the code injection on the page you linked, and enable the quantity on service products to confirm if you still have the same problem?

That worked, thanks so much! I thought the code injection had to live on the Product Page that I created the product on, not that it had to be added to any page that the product appeared on. Thanks again so much!

You bet! Glad it worked out!

Building on the answers above, here's how I was able to disable the Quantity Input field for only a certain product of mine.

#item-5cf80e81e8cc64000165751d .product-quantity-input {
display:none !important;
}

I've tried all the codes listed above to remove the Quantity field but none work!

Quite bizarrely; when you visit the page the quantity field displays then when you refresh they disappear.

Does anyone know how I can remove the quantity field completely?

Link to page can be found here: https://www.level-executive.com/cv-support

On 2/16/2020 at 5:59 PM, SStanford said:

I've tried all the codes listed above to remove the Quantity field but none work!

@SStanford The answer by TreyT, voted best answer, is correct. Use the first solution he provided, and add it to Custom CSS. Do not add it to the Code Injection area as this is not read when the page is loaded after visiting another page - unless you hit refresh. This is due to Ajax on newer templates like yours. 

Hey there. The simple code from Trey T is working in my Custom CSS editor for all products, but I want to target a single product on an index page with many other products. 
Does any body have a suggestion? Can I target the particular index page, or would I try to seek out this particular product block's ID?

https://apricot-elephant-5wex.squarespace.com/food-experiences/

15 hours ago, debazer914 said:

Hey there. The simple code from Trey T is working in my Custom CSS editor for all products, but I want to target a single product on an index page with many other products. 
Does any body have a suggestion? Can I target the particular index page, or would I try to seek out this particular product block's ID?

https://apricot-elephant-5wex.squarespace.com/food-experiences/

I can't see what Trey responded to that removes all commerce related items. I'm looking to remove/hide SITE WIDE

• Add to Cart
• Price (on each product page and the Shop main page/gallery/collection whatever you want to call it)
• Quantity
• Variable (Color in this case)

The code I can see for quantity works great.

.product-quantity-input
{
 display:none !important;
}

Thanks!

I can't see what Trey responded to that removes all commerce related items. I'm looking to remove/hide SITE WIDE

• Add to Cart
• Price (on each product page and the Shop main page/gallery/collection whatever you want to call it)
• Quantity
• Variable (Color in this case)

The code I can see for quantity works great.

.product-quantity-input
{
 display:none !important;
}

Thanks!

Hey, I seem to have stumbled on it!

.product-quantity-input
{
 display:none !important;
}

.product-price { visibility: none; display: none; }
.sqs-add-to-cart-button-wrapper {
    display: none !important;
}

On 3/14/2017 at 6:37 PM, TreyT said:

It looks like the answer offered hides the Add to Cart, and the Price as well. If you only want to hide the Quantity input field but keep all the rest, you can add this to the custom CSS editor:

.product-quantity-input {
 display:none !important;
}

 

 

This will affect products site wide, so if you need this for only a specific product page, you can add this in style tags via the page header code injection:

 <style>
.product-quantity-input {
     display:none !important;
   }
</style>

 

 

Do you maybe know how to inject a Shopify Button into the product page? 

On 10/30/2020 at 5:25 AM, MIL said:

Do you maybe know how to inject a Shopify Button into the product page? 

Edit Product > Additional Info > Add Code Block > Paste your Shopify Code

If you want to move it to any position in Description, please describe in detail, we can help easier