Jump to content

Remove add to cart button

Go to solution Solved by paul2009,

Recommended Posts

  • Solution

On a Squarespace 7.1 website, you should be able to hide the Add to Cart button by adding the following to Design > Custom CSS:

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

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and 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 free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

hello

I hope you might also be able to help me

I am running 7.1. site doesn't say what template I chose - but anyway.

I have an all prints product section....shop

I just want to remove the cart from all pages / disable for now / hide cart

just want to use the (all prints product section) as a display gallery section.

is there any custom code to do so ?

otherwise I am not sure - I like the way the products are displayed much more than the portfolio and gallery pages

 

the page is still being built so it private ? 

so cant show you? probably this i s very unhelpful - sorry

 

thank you

ross

 

Link to comment
37 minutes ago, rossempson said:

I have an all prints product section. I just want to remove the cart from all pages/disable for now

Firstly, all Squarespace 7.1 sites are the same. There aren't different template names with different features.

You can therefore use the Custom CSS that I posted above to remove the 'Add to Cart' button from your Product Detail Pages.

You can remove the cart icon from your site's header as follows:

1. Click Edit on any page on your site, then click Edit Site Header.

2. In the window that appears, click Elements.

3. Switch the Cart toggle off.

4. Click out of the window, then hover over Done and click Save.

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and 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 free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
  • 3 months later...

Hi @paul2009 if we use custom code like this one, and SQSP updates their product code in a way that requires updating the custom code, do you know if there's a way for us as to know where the updated custom code would be?

I'm currently trying to set up my first online shop without the online buying function, so want to hide the 'add to cart' button... and am concerned that if I use this custom code above, SQSP will change something and I wont know what to do. Noob I know.

Thanks also for sharing the code above! 

I'm on 7.1 at https://drkmcb.com/

Link to comment
1 hour ago, Dr_KMcB said:

If we use custom code like this one, and SQSP updates their product code in a way that requires updating the custom code, do you know if there's a way for us as to know where the updated custom code would be?

As you say, a software update could break third party code. Squarespace do make frequent changes to their platform and do so without warning, but they do this so they can fix bugs and send out new features without requiring users to take any manual 'maintenance' action.

There's little you can do to prevent some code from being affected by an update, but it obviously helps to source your code from someone who is trusted, but this doesn't guarantee that the code won't break at some point, it just makes it less likely that it will happen often or that it will do harm. Indeed, Squarespace can occasionally make changes that break their own code. It's a fact of life with software updates.

If you will be relying on some code that will be critical to your business, I recommend that you book a Software Developer to write code for you and that you ensure they can be booked again later if changes become necessary. Code given away free on forums hasn't been designed to be used in mission-critical situations because it:

  • won't include full error-checking
  • won't include version control
  • won't be guaranteed
  • may slow down your website

I hope this helps.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and 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 free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
On 4/3/2022 at 1:15 AM, paul2009 said:
.ProductItem-details .sqs-add-to-cart-button-wrapper {
  display: none!important;
}

Thank you very much @paul2009 for your answer, that all makes total sense. One question, is the code you provided in April at the top still what you'd suggest to hide the 'add to cart' button? We're adding at the Design>Custom CSS area, but the button still appears (have checked when logged out for what the public would see too). 

Link to comment

Site URL: https://drkmcb.com/

Hello  everyone, I'm trying to work out a way to have an online shop or section for my 'available art' for sale, but without the online check out and ecommerce. The SQSP shop set up is ideal if I can just hide the 'add to cart' button.

I've searched around this forum and found paul2009's code from April 2022 which he said add to Design>Custom CSS, but when I do this, the button is still visible (including when I'm logged out/viewing as the public would). I paste the code I tried below so you can all see it. 

I don't want my shop live until I get all this sorted, but I think you need to be able to see it to help me troubleshoot, so I have made it live but it's not showing in my site navigation. You can see at https://drkmcb.com/shop

Thank you! 

.ProductItem-details .sqs-add-to-cart-button-wrapper {
  display: none!important;
}
Edited by Dr_KMcB
typo
Link to comment

Hey @Dr_KMcB -

Try this. It should hide the cart in all areas it appears (product part, product blocks, quick view).

// Hide Add To Cart Button //

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

Hope this helps! 🙂

Cody and Team, The Ghost Co.

👻 Ghost Plugins: Over 500+ free plugins and templates for Squarespace
🎉 
Ghost MarketplaceThe very first product-based marketplace for Squarespace

Link to comment

 

Hello ghostplugins, thank you so much!! 

Someone provided me some code last night, from a different platform and it seemed to work. I paste below in case it helps others. 

I'll try yours ghostplugins if this one stops working! (and maybe it will stop working, as Fluid Engine rolls out to the shop). 

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

 

Link to comment
  • 9 months later...

Hello, 

 

It's 2023 and I have the same issue - I would like to hide the add to cart button and can't seem to find the code to do it. 

I've tried all the codes above, currently, there is no section for me to change the code in the "DESIGN" area. I have to go into the product section and then click the gear > ADVANCED>PAGE HEADER CODE INJECTION. 

Maybe there is another place or code, any help would be GREATLY appreciated.

Link to comment
  • 1 month later...
  • 6 months later...
On 4/3/2022 at 9:15 AM, paul2009 said:

When I use the code below, it also hides the 'recommended products' which show further down the product page, below the 'add to cart' button. Anyone know a way I can remove the add to cart without removing recommended products please? 

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

Did this help? Please give feedback by clicking an icon below  ⬇️

 

Link to comment
  • 3 months later...
On 4/9/2024 at 4:06 PM, ClavisPublishing said:

Hi all, 

We went from a 7.0 to a 7.1 site and now we have the same issue with the 'add to cart'-button which can't seem to be removed in any way. 

Can someone please help us with this issue? 

Example: https://www.clavis-publishing.com/picture-books/p/the-little-christmas-tree-x7s9f-mnrny-y3bww

 

You can use this CSS code to remove add to cart button

.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

Hi there, I've tried to add this css to hide the quantity and add to cart button on my product detail page and it did not work:

 // Hide quantity
  .product-quantity-input {
    display:none;
 }
  // Hide Add To Cart Button
  .sqs-add-to-cart-button-wrapper {
    display: none !important;
}

 

https://www.kauripark.com/plant-library/p/acaena-novae-zelandiae

We are on version 7.1.  Can you please help?

I also want to add a custom button on the product which says 'Upload Plant List' and when clicked goes through to this page:

https://www.kauripark.com/upload-plant-list

Would you be able to guide me on the CSS I can use to achieve this?

Thanks so much.

Link to comment
On 4/18/2024 at 10:50 AM, Jolene0708 said:

Hi there, I've tried to add this css to hide the quantity and add to cart button on my product detail page and it did not work:

 // Hide quantity
  .product-quantity-input {
    display:none;
 }
  // Hide Add To Cart Button
  .sqs-add-to-cart-button-wrapper {
    display: none !important;
}

 

https://www.kauripark.com/plant-library/p/acaena-novae-zelandiae

We are on version 7.1.  Can you please help?

I also want to add a custom button on the product which says 'Upload Plant List' and when clicked goes through to this page:

https://www.kauripark.com/upload-plant-list

Would you be able to guide me on the CSS I can use to achieve this?

Thanks so much.

#1. Use this new code

/* hide quantity */
  .product-quantity-input {
    display:none !important;
 }
/* Hide Add To Cart Button */
  .sqs-add-to-cart-button-wrapper {
    display: none !important;
}

#2. All buttons will use same button/same url or different?

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 4/23/2024 at 11:22 AM, Jolene0708 said:

That worked! Thank you so much.

There will just be one button on every product detail page, yes, that says 'Upload your Plant List' which will go to this URL: https://www.kauripark.com/upload-plant-list

First, edit Site Footer > Add a Button Block with Name: Upload your Plant List, and url: /upload-plant-list

Next, use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('footer.sections .button-block').insertAfter('.sqs-add-to-cart-button-wrapper');
})
</script>
<style>
div.sqs-add-to-cart-button-wrapper+.button-block {
    order: 4 !important;
}
</style>

 

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
6 hours ago, Jolene0708 said:

Hi @tuanphan, this worked, thanks so much. But the button styling is narrow. Is this taken from the website theme or can we add code so it is more inline with the button size on the rest of the website?

https://www.kauripark.com/plant-library/p/acaena-novae-zelandiae

Use this code under

<style>
  div.sqs-add-to-cart-button-wrapper+.button-block a {
    min-height: 50px !important;
    display: flex !important;
    height: 100% !important;
    padding: 10px !important;
}
</style>

 

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

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.