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

On 12/9/2022 at 2:15 PM, futureisbright said:

Hi, I am also looking to remove the "add to cart" so I can have a direct option of payment. Please help, thank you.

For all products or specific? If all, add this to Design > Custom CSS
 

  /* Remove add to cart */
  div.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
  • 2 weeks later...
On 8/13/2021 at 1:06 AM, creedon said:

@RoseRae

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

<style>

  /*
  
    begin hide store product detail add to cart, quantity, and variants
    
    Version       : 0.1d1
    
    SS Version    : 7.0
    
    Template      : Avenue
                    
                    your template is not listed? then it is not currently
                    supported
    
    By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    /* #productDetails .product-price, */
    #productDetails .product-quantity-input,
    #productDetails .product-variants,
    #productDetails .sqs-add-to-cart-button-wrapper
    
      {
      
        display : none;
        
        }
        
    /* end hide store product detail add to cart, quantity, and variants */
    
  </style>

Let us know how it goes.

hello sir, actually I'm in personal plan, can you do in css custom. I can't use the code injection

Link to comment
On 12/15/2022 at 10:44 AM, tuanphan said:

For all products or specific? If all, add this to Design > Custom CSS
 

  /* Remove add to cart */
  div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}

 

hello Mr. Tuanphan can you help to disable the quantity, the color and size for css custom 

 

Link to comment
On 12/26/2022 at 3:15 PM, Vlixx said:

hello sir, actually I'm in personal plan, can you do in css custom. I can't use the code injection

You can change this code to Personal CSS code

 /* #productDetails .product-price, */
    #productDetails .product-quantity-input,
    #productDetails .product-variants,
    #productDetails .sqs-add-to-cart-button-wrapper
    
      {
      
        display : none;
        
        }
        

 

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
On 1/22/2022 at 3:43 PM, creedon said:

@Rimma

The link you provided is broken. However I was able to find a product detail page.

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

<style>

  .ProductItem-details .ProductItem-product-price,
  .ProductItem-details .sqs-add-to-cart-button-wrapper
  
    {
    
      display : none;
      
      }
      
  </style>

This is for v7.1.

This basically the same as my previous post with the addition of the right selector for hiding the price.

Let us know how it goes.

Thank you so much for this! Can you provide the bit to hide the "Quantity" button as well?

https://pelican-kangaroo-rll4.squarespace.com/our-services/p/morpheus8

 

Edit: Nevermind! Saw your July 2021 post and how to use the tags. Thank you!!!!!
 

Edited by Amphion
new info
Link to comment
  • 2 weeks later...
59 minutes ago, MariElisabeth said:

I want to remove the "Add to Cart" and "Quantity" from on of my products in a store.

There are several ways you can slice this pie depending on the exact effect you are going for. This one is specific to the URL you provided.

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

<style>

  #item-5f86045ffbf95e018ffd5743.collection-type-products .product-quantity-input,
  #item-5f86045ffbf95e018ffd5743.collection-type-products .sqs-add-to-cart-button-wrapper
  
    {
    
      display : none;
      
      }
      
  </style>

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
1 hour ago, CreationsbyS said:

I am looking to hide the "add to cart" button AND "quantity" on only ONE of my product pages. Is that possible to do?

Please see the following.

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
3 hours ago, creedon said:

Please see the following.

Let us know how it goes.

I tried another code that I found you posted earlier in another thread, but I changed it a bit and also added some coding, seemed to have worked 🙂

I've used this code:

 

<style>

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

<style>

   .ProductItem-details .product-price {
    
      display : none;
      
      }
      
  </style>

<style>

   .ProductItem-details .product-quantity-input {
    
      display : none;
      
      }
      
  </style>

 

Edited by CreationsbyS
Link to comment
On 1/21/2023 at 4:42 PM, CreationsbyS said:

I didn't get it to work. What have I done wrong?

After adding the code did you go into a product that you wanted to hide atc and quantity and add the tag hide atc quantity to the product?

Edited by creedon

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
5 hours ago, CreationsbyS said:

I've used this code

I think you'll find that your code will hide all atc and quantity. I suggest going with the method I provided. With it you can hide products at will just by adding a tag to a product.

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
8 hours ago, creedon said:

I think you'll find that your code will hide all atc and quantity. I suggest going with the method I provided. With it you can hide products at will just by adding a tag to a product.

Oh I actually did want to hide all atc and quantity. So unless this is a bad way of using the codes I shared (?), I am happy with the result.

Link to comment
  • 2 weeks later...
On 1/18/2023 at 3:33 PM, creedon said:

There are several ways you can slice this pie depending on the exact effect you are going for. This one is specific to the URL you provided.

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

<style>

  #item-5f86045ffbf95e018ffd5743.collection-type-products .product-quantity-input,
  #item-5f86045ffbf95e018ffd5743.collection-type-products .sqs-add-to-cart-button-wrapper
  
    {
    
      display : none;
      
      }
      
  </style>

Let us know how it goes.

This worked! Thank you so much. Can you please let me know how I would find the #item if I would like to do this for another item in the store. For example here https://manteconstudio.com/mentorships/dive-deep-2022

Also! Forgot to mention I would like to remove the price even though it says $0.00

 

Link to comment
On 1/18/2023 at 3:33 PM, creedon said:

There are several ways you can slice this pie depending on the exact effect you are going for. This one is specific to the URL you provided.

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

<style>

  #item-5f86045ffbf95e018ffd5743.collection-type-products .product-quantity-input,
  #item-5f86045ffbf95e018ffd5743.collection-type-products .sqs-add-to-cart-button-wrapper
  
    {
    
      display : none;
      
      }
      
  </style>

Let us know how it goes.

 

19 minutes ago, MariElisabeth said:

This worked! Thank you so much. Can you please let me know how I would find the #item if I would like to do this for another item in the store. For example here https://manteconstudio.com/mentorships/dive-deep-2022

Also! Forgot to mention I would like to remove the price even though it says $0.00

 

Ok So I figured out how to find the ID#

But in terms of hiding the price for only certain products in my shop I have to do a similar thing?

Link to comment
6 hours ago, MariElisabeth said:

But in terms of hiding the price for only certain products in my shop I have to do a similar thing?

The tag method mentioned previously would probably be an easier solution. But as I said this pie can be sliced in different ways. How you slice depends on what method best meets your needs.

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

Hi @creedon

You're so helpful but my novice brain is still struggling to compute what exactly I need to copy and paste, can you elaborate based on my website? 

www.thinkskin.shop password thinkskin

For products by Skin Bet** Scie*** (I've just removed some letters so this doesn't come up in search results, I'm hoping you can fill in the blanks ha!) I'm not allowed to have an add to cart. I had originally hoped replacing the price with a phrase saying they need a consult first would satisfy brand requirements but they don't want the add to cart to be enabled at all. 

How do I amend the code to remove add to cart for only the sbs range items? 

Thank you!

Leigh

Link to comment
10 hours ago, spurds said:

my novice brain is still struggling to compute what exactly I need to copy and paste

Please see my January 21 post earlier in this thread. Follow through the links. Install instructions and code are there.

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

Ok, I'm having so much trouble. I have multiple product pages - one that is a collection of items that should not have an "add to cart" button. https://www.ruleandlevelstudio.com/photosurfaces i'd like to remove the add to cart button from this page.

My other product page which is not yet launched https://www.ruleandlevelstudio.com/studiocosita password: VINYL should continue to have an add to cart button.

 

Please help!

Link to comment
  • 2 weeks later...

Hello! I'm wondering if you could please help me remove the 'add to cart' button on my squarespace site or alternatively, turn the add to cart button into a 'contact us' and link to our contact page? I have tried all of the codes and cannot get the add to cart button to disappear. I have not published my site yet so don't know if I can share a link? Thanks so much. 

Link to comment
9 hours ago, Sheriden said:

I have not published my site yet so don't know if I can share a link?

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

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

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

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.