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

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 comment

Recommended Posts

  • 10

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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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 comment
  • 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 comment
  • 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 comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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 comment

Create an account or sign in to comment

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

×
×
  • Create New...