Jump to content

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

Recommended Posts

  • 2 weeks later...
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

Link to comment
  • 2 weeks later...

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 >

Link to comment

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

Edited by creedon
version 0.1d1

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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 😄

Link to comment
  • 1 month later...

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 months later...
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

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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! 

Link to comment

 

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

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.