Jump to content

Hiding Add to Cart Button on Certain Products

Go to solution Solved by paul2009,

Recommended Posts

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!

Link to comment
  • 9 months later...

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • Solution
On 5/21/2020 at 8:05 PM, akb33 said:

I only want it to remove the [add to cart] button on certain products (say, products that are tagged "in-store" or that have 0 inventory). Is this possible?

 

The reason why the code above isn't working, is because it is now outdated. It relies on categories being included in the Product Details section of the page, but they are no longer included on Squarespace 7.1 (since Product Collections 2.0 were introduced). 

As you've already added a 'no-cart' tag to the product, you can use this instead. Simply change .category-no-cart to .tag-no-cart in the code, and the button should be hidden. See below.

.tag-no-cart .sqs-add-to-cart-button, .tag-no-cart .product-quantity-input {
  display: none !important;
}

  If this helps you, please click "Like" below  ⬇️

hide-add-to-cart-using-tag-7-1.thumb.gif.b87c3056ba64fdf889ad3311b798adfc.gif

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 2 months later...

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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 9 months later...

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 year later...

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

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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?image.thumb.png.81d1f1fb1ffd90e6535d6944ee647f75.png

Link to comment
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  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 6 months later...
Posted (edited)

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

Screenshot 2024-05-13 132018.png

Edited by kysklar
additional info
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.