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

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

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

Share this post


Link to post

19 answers to this question

Recommended Posts

  • 7

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

Share this post


Link to post
  • 1

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.

Share this post


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



Share this post


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.

Share this post


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

Share this post


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.

Share this post


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

Share this post


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

Share this post


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?

Share this post


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!

Share this post


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. 


World-class Squarespace Developer and Squarespace Circle Leader with a strong reputation on the Squarespace Forum.
I'm trusted by hundreds of Squarespace users worldwide, including designers, freelancers, business owners and big agencies.

I can tackle anything from small tweaks to full websites and I'm available for short and long bookings (min. 1 hour).
Book via my website giving as much notice as possible. Note that I'm currently booked until the end of May 2020.
Prebuilt Squarespace Extensions for Squarespace 7.0 and 7.1: Enquiry Form ExtensionDate Picker Extension and Age Verification Extension 
Custom Squarespace Extensions: Tell me about the functionality you need

**NEW** Our popular Wishlist extension is now Squarespace 7.1 compatible.

Share this post


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

COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


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