Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

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


D_Schneider
Go to solution Solved by TreyT,

Question

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?

Edited by D_Schneider
Link to post
  • Answers 22
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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: .pr

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; visibi

22 answers to this question

Recommended Posts

  • 9

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>

Edited by TreyT
Initial Revision
Link to post
  • 3

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; }

Edited by eanderson

Template Developer at Squarespace, @esquareda on Twitter.

Link to post
  • 1

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;
}



Link to post
  • 0

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.

Link to post
  • 0

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).

Link to post
  • 0

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.

Link to post
  • 0

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....

Link to post
  • 0

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...

Link to post
  • 0

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?

Link to post
  • 0

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!

Link to post
  • 0
2 hours ago, 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 Design > 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. 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Link to post
  • 0
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/

Private Site
This site is currently private. If you’re the owner or contributor

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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!

Link to post
  • 0

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!

Link to post
  • 0

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;
}

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...