Jump to content

I need to hide the Add to Cart, Price and Quantity for 1 of my 2 Product Categories

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://chameleondesignandprint.squarespace.com/elite-uniform-products/full-zip-bespoke-elite-dance-jacket-with-zip-pockets

Hello! We have an online shop for a few items but I need to display our bespoke products clearer... the only way to do this is to use the commerce feature. I need to hide the Price, Add to Cart and quantity from only this Commerce Page, not our online shop and I am finding it quite difficult! I have searched on this forum and on online but I can only see outdated coding. Is there anyone that could help me with this? 

Link to comment
  • Solution

@Luciektip See my post earlier today, as it is a very similar situation:

 

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
3 hours ago, paul2009 said:

@Luciektip See my post earlier today, as it is a very similar situation:

 

Thanks so much. I actually ended up on your page today - the code worked but because I had set the products to £0.00 - I then had a box appear asking customers to subscribe to be alerted when it's back in stock. Do you know how to deactivate this and replace with an enquiry button - even if it's just a button leading to the enquiry form?

Link to comment

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment

Thankyou, I have managed to do it but still have a green box appearing where the purchase button once was. It should be okay for now until I can figure it out as the online shop is working as normal. Thanks ever so much. I ended up using your java script to change to POA and a separate piece of code to hide the add to cart button. Thankyou. 

Link to comment
6 hours ago, Luciektip said:

I have managed to do it but still have a green box appearing

In your case, use this instead. It will hide the green box too:

.tweak-product-item-details-show-add-to-cart-button .ProductItem-details .sqs-add-to-cart-button-wrapper {
  display: none;
}

 

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
  • 8 months later...

I also tried to hide the price on one category, but it still not working:

<style>
.sqs-category-special-collection .tag-Gallery, .product-price-input, {
  display: none; !important;
}
</style>

can you help me too @paul2009?
 

Edited by yasuyash
adding tag to people
Link to comment
2 hours ago, yasuyash said:

can you help me too

Please provide more information so that we can view your site. 

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
On 1/5/2021 at 7:39 PM, yasuyash said:

Add to Design > Custom CSS

.tag-basmala .grid-prices {
    display: none !important;
}
.tag-basmala .product-price {
    display: none;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
On 4/28/2020 at 3:37 PM, paul2009 said:

@Luciektip See my post earlier today, as it is a very similar situation:

 

Hello, I followed your guide to change price to POA which worked by adding your custom CSS but I was not able to disable the add to cart button or the quantity, any help would be appreciated!

Screenshot 2021-01-28 at 16.11.28.png

Link to comment
On 1/28/2021 at 9:12 AM, wilfm said:

Hello, I followed your guide to change price to POA which worked by adding your custom CSS but I was not able to disable the add to cart button or the quantity, any help would be appreciated!

Screenshot 2021-01-28 at 16.11.28.png

Can you share link to a product? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 2/10/2021 at 2:30 AM, LaurenZA said:

Nevermind! This worked

 


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

Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

Hi, I followed the guide and added this to my custom CSS, but still no luck hiding the "add-to-cart" button for items that have "noCart" as a tag:

.tag-noCart .ProductItem-summary .ProductItem-details {
  .sqs-add-to-cart-button-wrapper, .product-quantity-input {
  display: none;
  }
}

This is for Brine 7.0.  Any ideas why it isn't working?  Thanks!

www.demeriflowers.com

Link to comment

Thanks Creedon.

I tried your simpler snippet of code in the custom CSS section, and still no luck hiding a product with "nocart" as a tag.

I ended up finding an example of code that both takes away the add-to-card button and adds some button styling to any active link I create in the product details (because I still needed a button to lead to a contact page).

It worked by adding it into a code block in the "additional details" section, which is unfortunate because I think I'm going to forget it's there some day down the line, because the editing mode shows an invisible space where the code block is, until I click on it!  For each product I have to do this for!  =P

<style>
.tweak-product-item-details-show-price .ProductItem-details .product-price { display: none; }
/* .variant-option { display: none!important; } */
.tweak-product-item-details-show-add-to-cart-button .ProductItem-details .sqs-add-to-cart-button-wrapper { display: none; }
.ProductItem-details .ProductItem-details-excerpt a { 
 font-family:'khula'!important;
 font-size: 16px!important;
 text-transform: uppercase;
 font-weight:regular!important;
 color: #000000!important;
 font-weight: normal;
 font-style: normal;
 text-align: center;
 text-decoration: none;
 min-width: 10ch!important;
 padding: .5em 1.0em!important;
 background-color: #ffffff;
 margin: 1px;
 border-style: solid!important;
 border-width: 1px!important;
 border-radius: 1px!important;
 }
</style>

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.