Hiding Add to Cart Button on Certain Products

Site URL: https://www.asiawest.net/

Hi! I have some products listed on my site that are not available for online purchase, and I would like to get rid of the Add to Cart button on these product's pages. Somebody suggested this code:

.sqs-add-to-cart-button {
  display: none !important;
}

However, this removes the Add to Cart button on every product page, and I only want it to remove the button on certain products (say, products that are tagged "in-store" or that have 0 inventory). Is this possible?

Thank you!

Add category: no-cart, then add this to Home > Design > Custom CSS

.category-no-cart .sqs-add-to-cart-button {
  display: none !important;
}

Hi there,

I added the no-cart category to product but the button still shows but it didn't work.. any ideas?

Much appreciated!


Thanks

@fred

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

19 hours ago, creedon said:

@fred

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Much appreciated..

https://squareone.squarespace.com/

Password: zoro

@fred

I can see a tag called "no-cart" has been added to that product but no category with that name. Edit that product and double-check that you have added that category.

Let us know how it goes.

Thanks for the reply, the "no-cart " was always in category (per my previous screenshot). I since added the No-cart tag testing something else..  sorry about the confusion.
 

Here's another screenshot.. showing both.

paul2009's solutions works like a charm!

Thank You!

Fred

Hello, 

I also tried to add 'no-cart' category and the code:

.category-no-cart .sqs-add-to-cart-button {
  display: none !important;
}

 but no luck. Any thoughts on having 'GIRLS' as a non-buyable product listed on the BOOK NOW page?

www.thepappyshow.co.uk

2 hours ago, Hebon said:

Hello, 

I also tried to add 'no-cart' category and the code:

.category-no-cart .sqs-add-to-cart-button {
  display: none !important;
}

 but no luck. Any thoughts on having 'GIRLS' as a non-buyable product listed on the BOOK NOW page?

www.thepappyshow.co.uk

Add to Design > Custom CSS

/* Girls-hide add to cart */
body#item-60aded5b7a384613d66dc440 .sqs-add-to-cart-button-wrapper {
    display: none !important;
}

Hello @tuanphan

I wondered if you might be able to help me with the same thing. I followed the directions above using the tag no-cart but it still isn't working for me.

I just need it hidden on this one page:

https://www.samavesayoga.com/short-course-enroll/p/community-inclusivity-trauma-informed-yoga

Thank you so much

@ecweb2

It appears you added the tags to your product but you have not installed the CSS that actually does the hiding.

There are several different ways being discussed in this thread so I can't help further as I don't know which one you tried to follow.

And to add to the confusion I have my own variation on this technique! 🙂

My code is a bit more generalized and flexible in that it handles the two most common things folks want to hide. The add to cart button and quantity.

@creedon

You way works! Thank you so much!

Hello, to add to this, is there a way to add coding to hide the cart for a specific category of items? I have a product page for fabric, but i'd like to make the sample options on the bottom the only products capable of being added to cart. Hypothetically I could make the fabric itself a category, and the samples on each page it's own category. So if there was a way to filter out the cart for one category and not the other on the same page, that would be ideal. Hoping that makes sense.

http://www.megbraffdesigns.com/fabrics/bamboo-garden-fabric

14 hours ago, Abbybricks said:

is there a way to add coding to hide the cart for a specific category of items?

On v7.1 Squarespace doesn't expose product categories in the product detail pages.

This means it is not easily possible to create the effect you want.

My current version is Avenue 7.0

Is there a way to add a custom product class as a CSS or something of the like to disable the cart for a certain product?

Or is it passible to hide 1 cart and show another on the same page?

2 hours ago, Abbybricks said:

My current version is Avenue 7.0

Add the following to Store Settings > Advanced > Page Header Code Injection for the product page. Please see per-page code injection.

<style>

  .collection-type-products .category-fabric .sqs-add-to-cart-button-wrapper {
  
  	display : none;
  	
  	}
	
  </style>

This is for v7.0 using the Avenue template.

Let us know how it goes.

That did hide the cart for the Fabric, but it also hid the cart for the Sample product on the same page 😞 Is it because I have the sample product posted in the "additional info" section of the Fabric product? I guess if I add any "hidecart" function to this page, even though the Samples product is a different category (samples), it will be affected because the main product is the Fabric itself. Is there a way to add a content block under the main product (the Fabric), but not in the footer, that won't be affected by the main product on the page?

6 minutes ago, Abbybricks said:

That did hide the cart for the Fabric, but it also hid the cart for the Sample product on the same page

You'll need to make the selector a little more specific to hide the button in the product details section only:

.collection-type-products .category-fabric #productDetails .sqs-add-to-cart-button-wrapper 

Did this help? Please give feedback by clicking an icon below  ⬇️

That worked! Thank you so much!!!!

@tuanphan @paul2009 I would like to hide the quantity and add to cart button for all individual product pages. It seems the previous person managing this page was able to hide quantity and add to cart from the home page but not able to enable it on individual product/service pages.

I have tried adding the general .sqs-add-to-cart-button display none to the CSS but that did not do anything. Additionally i tried to add no-cart as a category to this page to test, then using the below code. I was not able to get it working. Is there any way you can assist?

Note:

.category-no-cart .sqs-add-to-cart-button {
  display: none !important;
}

@kysklar You can use this new CSS code

/* hide add to cart */
  div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}
/* hide quantity */
div.product-quantity-input {
    display: none !important;
}