Jump to content

How to hide price, quantity and add to cart button on a specific product page ? (Squarespace 7.1)

Go to solution Solved by beatrizc,

Recommended Posts

Posted

Hello,

I have looked through several forum posts and tried a lot of code but cannot find what works for our website. I am trying to hide the price, quantity and add to cart button on two specific pages. I do not want those info hidden on our other products, just those two. Do you know how I would be able to do this?

The two pages that will need this applied to :
https://www.matente.ca/magasinez/p/boisimprime

https://www.matente.ca/magasinez/p/impressionsurporte

Thank you guys for your help.

  • Solution
Posted

Hey @GSSinc!

You can target the specific elements you want to hide on a page through their IDs or classes, and then the key is to incorporate the Page ID in the selector, to make sure that only the things on THAT page get hidden.

In your case, this would hide those things for the Bois imprimé page:

#item-641c80a84e0e422f69e4c2b7 .ProductItem-product-price,
#item-641c80a84e0e422f69e4c2b7 .product-quantity-input,
#item-641c80a84e0e422f69e4c2b7 .sqs-add-to-cart-button-wrapper {
    display: none;
}

And this other one would hide it for the Impression sur porte:

#item-641c7c52b877667b3a3e6db6 .ProductItem-product-price,
#item-641c7c52b877667b3a3e6db6 .product-quantity-input,
#item-641c7c52b877667b3a3e6db6 .sqs-add-to-cart-button-wrapper {
    display: none;
}

I have a tutorial on how to find Page IDs here if you need to do the same thing for other products.

You'll simply need to duplicate either of the previous snippets and replace the page id with the corresponding one for your new product page.

Hope this helps!

Squarespace Coding Expert | Coding the heck out of Squarespace, one wtf at a time.

☞ Search through The Codebase to learn new CSS tricks and awesome customizations.

☞ Get +150 mini-plugins ready to copy-paste to fix or tweak your Squarespace site.

☞ Got a rare, medium rare or fully cooked idea for your client's project? Let's make it a reality.

 

Website | Youtube

Posted

You're welcome!

For the main shop page the code needed is different.

This should do it for the Impression sur porte:

#thumb-impressionsurporte .grid-prices {
  display: none;
}

And this other one for the Bois imprimé:

#thumb-boisimprime .grid-prices {
  display: none;
}

Hope this helps!

Squarespace Coding Expert | Coding the heck out of Squarespace, one wtf at a time.

☞ Search through The Codebase to learn new CSS tricks and awesome customizations.

☞ Get +150 mini-plugins ready to copy-paste to fix or tweak your Squarespace site.

☞ Got a rare, medium rare or fully cooked idea for your client's project? Let's make it a reality.

 

Website | Youtube

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.