Jump to content

Looking to remove or disable the add to cart button on the product page

Go to solution Solved by tuanphan,

Recommended Posts

Hey I am trying to remove or disable the Add to Cart button on my product pages. I don’t want people purchasing through the Cart but I would like the convenience of being able to add and remove items through the product page. I tried using a custom css code but it doesn’t seem like it did anything. Wondering what others have done. 
thanks 

Link to comment
On 12/17/2019 at 6:53 PM, tuanphan said:

Difficult to help without site url. Can you share link to product page on your site? @Ns94

 

Also this is the code I tried to use:

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

Edited by Ns94
Link to comment
  • Solution
5 hours ago, Ns94 said:

https://guppy-dory-xd76.squarespace.com/config/pages/5df40391b29aca197b88fd9c

Here is the link password = site

Also this is the code I tried to use:

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

/config/ is url for web owner. Please remove it when sharing link in the next time.

Add to Home > Design > Custom CSS

 

.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
  • 11 months later...
  • 1 month later...
On 1/20/2021 at 5:50 PM, LindaS said:

Is it possible to hide the Add to cart button on selected products? Or all products in one shop folder, but not all products in the entire online store? 🤔

Yes. Possible. Can you share link to a product? We can help easier

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
  • 2 weeks later...
23 hours ago, ievareinholde said:

@tuanphan, could You please help me, too? I need to remove Add To Cart button un 4 selected products on my page. How to do it ?

If you share link to a product, we can help easier

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

You could check out this piece of CSS 

https://sf.digital/squarespace-solutions/how-can-i-make-some-prices-poa-on-squarespace-71

If you want to hide the 'add to cart' button on individual products amend the code so that the description after the .tag- is something like hidecart and then tag whatever product you want to remove  'add to cart' with 'hidecart'. You can change this wording to whatever you like but always keep the .tag- part.

For example:

/* Hide the add-to-cart button */
.tag-hidecart .ProductItem-summary .ProductItem-details {
  .sqs-add-to-cart-button-wrapper, .product-quantity-input {
  display: none;
  }
}

Hopefully my amendment should work. Thanks to SF Digital for the original code.

Link to comment
5 ore fa, PhilB ha detto:

Potresti osare un'occhiata a questo pezzo di CSS 

https://sf.digital/squarespace-solutions/how-can-i-make-some-prices-poa-on-squarespace-71

Se desideri nascondere il pulsante "aggiungi al carrello" sui singoli prodotti, modifica il codice in modo che la descrizione dopo il. Tag sia qualcosa come hidecart e quindi contrassegna qualsiasi prodotto che desideri rimuovere "aggiungi al carrello" con "hidecart". Puoi cambiare questa dicitura come preferisci, ma mantieni sempre la parte .tag.

Per esempio:

/ * Nascondi il pulsante aggiungi al carrello * /
.tag-hidecart .ProductItem-summary .ProductItem-details {
  .sqs-add-to-cart-button-wrapper, .product-quantity-input {
  display: none;
  }
}

Spero che il mio emendamento funzioni. Grazie a SF Digital per il codice originale.

I can't ... I paste the code but nothing

Link to comment
8 hours ago, Pacenz98 said:

I can't ... I paste the code but nothing

Hi, it should work. I am using the same code but I've used the .tag-onhold on mine instead of .tag-hidecart, as I use it for products that are on hold. Be sure to use the tag 'hidecart' on each product you want this to affect. 

Link to comment

@Pacenz98

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.

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
  • 3 weeks later...
  • 2 weeks later...
  • 2 months later...
On 2/9/2021 at 12:23 AM, PhilB said:

Hi, it should work. I am using the same code but I've used the .tag-onhold on mine instead of .tag-hidecart, as I use it for products that are on hold. Be sure to use the tag 'hidecart' on each product you want this to affect. 

Having the same problem...I think I'm doing it right but the button isn't being hid. Happy to share my website link if someone can help! TIA

 

Link to comment
  • 1 month later...
1 hour ago, TrueRad said:

can someone help me remove the "add to cart" button on just this product?

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

    #item-60fe0ecc22c5ce2ebdb12244 .ProductItem-details .sqs-add-to-cart-button-wrapper {
    
      display : none;
      
      }
      
  </style>

This for v7.1 and specific to the poster's need.

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

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.