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

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.

Link to comment
  • Solution

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 Customization Geek | Helping fellow designers code the heck out of Squarespace

☞ Get the free Squarespace Coding Essentials guide to reach that next level of customization you're aiming for.

☞ Check out all the plugins & mini-courses and masterclasses available to help speed up your projects.

☞ Looking to outsource a customization or fix? I'd love to help you out. Get in touch!

 

Website | Youtube | Facebook | Pinterest

Link to comment

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 Customization Geek | Helping fellow designers code the heck out of Squarespace

☞ Get the free Squarespace Coding Essentials guide to reach that next level of customization you're aiming for.

☞ Check out all the plugins & mini-courses and masterclasses available to help speed up your projects.

☞ Looking to outsource a customization or fix? I'd love to help you out. Get in touch!

 

Website | Youtube | Facebook | Pinterest

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.