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

@TrueRad

For ease of maintenance I'm going to suggest a slightly different approach.

Please see Store Product Detail Elements Tagged Hide.

Let us know how it goes.

On 7/27/2021 at 5:27 AM, creedon said:

@TrueRad

For ease of maintenance I'm going to suggest a slightly different approach.

Please see Hide Product Detail Add to Cart Tagged "hide atc".

Let us know how it goes.

I believe I have followed these steps, but it doesn't seem to be working for me?

https://www.questbook.nz/events/tftt

@Jak_Charles

The code is for v7.1 sites.

Your site is v7.0 using the Adirondack template.

2 minutes ago, creedon said:

@Jak_Charles

The code is for v7.1 sites.

Your site is v7.0 using the Adirondack template.

Ahhh that will be it then. I thought something was up.

11 minutes ago, creedon said:

@Jak_Charles

The code is for v7.1 sites.

Your site is v7.0 using the Adirondack template.

I don't suppose there is a fix for a lowly v7.0 user, short of moving to v7.1? 

On 8/3/2021 at 5:29 PM, Jak_Charles said:

I don't suppose there is a fix for a lowly v7.0 user, short of moving to v7.1? 

Not a fix but I can extended the code to cover your use case! 🙂 Threw in Brine template family to boot! Please see the updated link in my previous code link post.

Let us know how it goes.

31 minutes ago, creedon said:

Not a fix but I extended the code to cover your use case! 🙂 Threw in Brine template family to boot! Please see the updated link in my previous code link post.

Let us know how it goes.

I wish I could 'love', 'thank' and 'like' this post at the same time!

You're a star Thomas, thank you so much

I'm using the Avenue template, and need to hide the add to cart, quantity and product variants as i'm trying to create a product portfolio without prices or the ability to buy. Does anyone know if any of the code gods have created CSS for this...? <crosses everything and prepares to leave donuts and flowers as an offering >

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

13 hours ago, 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.1d0
    
    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-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.

It did! You're an absolute hero, thank you. And an offering / donation sent with much appreciation. I may want to hide the 'from £price' on the product summary and full product page, and I'm sure i've seen you answer it on another post, but search is not my friend this morning....

12 hours ago, RoseRae said:

I may want to hide the 'from £price' on the full product page

I"ve updated my code post. I added a commented out line with the CSS selector for price.

When you want to hide the price just remove the /* and */ from the following line.

    /* #productDetails .product-price, */

Quote

I may want to hide the 'from £price' on the product summary

When you want to do this hit me up. I don't think I've done that specific effect but it shouldn't be a problem.

10 hours ago, RoseRae said:

And an offering / donation sent with much appreciation.

👍

Let us know how it goes.

On 8/12/2021 at 7:06 PM, 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.1d0
    
    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-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.

Hey Thomas. It worked beautifully thank you. The only area left is the price on the product summary page - any ideas? (if it's not too much trouble that is...)

5 hours ago, RoseRae said:

The only area left is the price on the product summary page - any ideas?

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

<style>

  /*
  
    begin hide store product grid price
    
    Version       : 0.1d0
    
    SS Version    : 7.0
    
    Template      : Avenue
                    
                    your template is not listed? then it is not currently
                    supported
    
    By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .show-product-price #productList .product .product-price {
    
      display : none;
      
      }
      
    /* end hide store product grid price */
    
  </style>

Let us know how it goes.

A.M.A.Z.I.N.G! Works perfectly! Thank you so much for your time Thomas, and both groups of CSS snippets work together beautifully. No price on either the product summary or detail pages, no add to cart button, and no variants shown. I'm using this as portfolio functionality to be able to see all my artwork by different categories separate from using index or collection pages. Wonderful 😄

Hi! I needed help with removing the add to cart button as well!

This is the website https://www.houseofpiadeeksh.com/

@sannn

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

<style>

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

This is for v7.1.

Let us know how it goes.

On 2/6/2021 at 4:42 AM, tuanphan said:

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

I have this same problem! on my shop, I used this code to remove the 'add to cart' but it removed it for all of my listings:

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

Here is a link to my website:

bigpawslargebreedrescue.squarespace.com

I am only trying to remove the add to cart for the "Surrender" service
Let me know what I need to do. I have NO experience or knowledge with coding so this would be so helpful! Thanks in advance

55 minutes ago, bigpawslargebreedrescue said:

I have this same problem! on my shop, I used this code to remove the 'add to cart' but it removed it for all of my listings:

It does remove all add to cart buttons and it could be modified to remove only one product button.

But I am confused. You already have code to remove the atc button for the one product you mentioned installed.

Hello,

I have changed main pages to hide prices but individual products still show them.

Is there a way to disable Price and Add to Cart button on all products? 

My URL for individual product: https://www.liveyourdream-now.com/galleries/p/bowl-023

Pwd: masha

Thank you!

@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 Creedon!

I am not able to inject your code.

It is strange that in order to Not show price I need to have Business or Commerce plan.

My plan is very basic. I need only to show and not to sell at least at this point.

Is there a way around it?

Thank you! 

47 minutes ago, Rimma said:

It is strange that in order to Not show price I need to have Business or Commerce plan.

My plan is very basic. I need only to show and not to sell at least at this point.

I assumed that since it was a Store page that you were on one of the commerce plans.

Remove the <style> and </style>. Then add the code to Design > Custom CSS. Alternatively you can add to code to Custom CSS and then remove the style tags which will get rid of the syntax errors.

Let us know how it goes.

Thank you very much!

It worked. 

Hey, I'm looking to remove the Add to Cart button, and the quantity box from the product page and the individual products associated with just that page, (not all the products on the website.) https://www.belfasttraditionalmusic.com/sessions-2022 

They are free events so no need to add to cart. Any advice would be greatly appreciated. 

Thanks!

1 hour ago, Jordanlong44 said:

They are free events so no need to add to cart.

When adding events, I'd add them to an Events page instead of a Store page. There are two advantages - you won't need to remove the cart button (they don't have one) and the events will automatically be hidden after the event has happened. Each event can have an image, title, dates, times and a location.

Take a look at the guide I've linked and post back if you have any questions.