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 34
  • 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

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

Posted Images

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 Digitalbuilding the features that Squarespace didn't include™, including a range of Squarespace extensions.
I value honesty, integrity, transparency and respect.
Links in my posts may refer to SF Digital products or may be affiliate links.

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
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
  • 0
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? 

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

Link to post
  • 0
On 10/31/2020 at 9:20 AM, tuanphan said:

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

You are amazing thank you!

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