I need to hide prices & change the 'checkout' button's text in the cart

This website is not intended to sell anything, only gather leads, but we are setting it up with an ecommerce backend as we may be transitioning to online sales in the near future. does anyone have any css code that can handle this. I would also like to hide the 'shopping cart' header at the top.

On 3/10/2023 at 3:25 PM, elocneb said:

I would...like to hide the 'shopping cart' header at the top.

You can remove the cart icon from your Squarespace 7.1 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. Toggle the Cart option to off.
4. Click out of the window, then hover over Done and click Save.

On 3/10/2023 at 3:25 PM, elocneb said:

I need to hide prices

There's a setting to hide prices in your Squarespace 7.1 store. To hide prices:

1. Go to the store page
2. Click EDIT to edit the store page.
3. Click EDIT SECTION in the panel that appears. 

4. Scroll down to SHOW PRICE and choose Hide.

If you want to hide all prices with some Custom CSS instead, you can use:

.product-price { 
  display:none!important;
}

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

I tried the Hide button of prices : it only hides the prices in the gallery section. The individual product file will still show the price and consequently the add to cart button. 

On 3/18/2023 at 5:23 AM, houseofnantes said:

I tried the Hide button of prices : it only hides the prices in the gallery section. The individual product file will still show the price and consequently the add to cart button. 

 

You can try adding this to Design > Custom CSS

.product-price, .product-prices {
	display: none !important;
}

tuanphan, thank you for sharing. Jumping in because I'm working on a website that normally hides all their prices, except for one Sale page.

Once I put in that code, how do I show prices for a single store page? I tried putting that code in individual store pages but it didn't seem to work.

Edit: Also for reference, I'm working on a Squarespace 7.0 site

Any help on how I can hide only one store page's prices? Whenever I click "edit" "edit section" "hide" or "show prices" it turns prices on/off for all stores, not just the one I'm currently editing.

On 1/29/2024 at 6:48 PM, HLEsthi said:

Any help on how I can hide only one store page's prices? Whenever I click "edit" "edit section" "hide" or "show prices" it turns prices on/off for all stores, not just the one I'm currently editing.

Add the following to Website > Website Tools > Custom CSS.

  .collection-type-products .grid-prices, /* grid */
  .ProductItem-details .ProductItem-product-price, /* simple */
  .pdp-layout .pdp-details .pdp-details-excerpt, /* full, half, and wrap */
  
  /* related products */
  
  .products.collection-content-wrapper .ProductItem-relatedProducts .product-price
  
    {
    
      display : none;
      
      }

Let us know how it goes.

On 3/19/2023 at 7:54 PM, tuanphan said:

You can try adding this to Design > Custom CSS

.product-price, .product-prices {
	display: none !important;
}

 

This works perfectly! Just one question, is there a way to remove that dead space that is showing as a result of the price being hidden? Is it possible to move the product description up a bit?

On 3/6/2024 at 1:17 AM, onnataylorr said:

This works perfectly! Just one question, is there a way to remove that dead space that is showing as a result of the price being hidden? Is it possible to move the product description up a bit?

Add this code under, if it doesn't work, please share link to a product, I can check easier

div.ProductItem-product-price {
    display: none !important;
}

Additional code to remove Qty 1 and Add to Cart: 

<style>
  .quantity-input, 
  .quantity-selector, 
  .quantity-input-wrapper, 
  .product-quantity-input,
  .quantity,
  .product-quantity,
  .sqs-quantity-input {
      display: none !important;
  }
  
  .sqs-add-to-cart-button, 
  .add-to-cart-button, 
  .ProductItem-details-form .ProductItem-cart-quantity .sqs-add-to-cart-button {
      display: none !important;
  }
</style>
 

On 1/30/2024 at 3:30 AM, creedon said:

Add the following to Website > Website Tools > Custom CSS.

<style>

  .collection-type-products .grid-prices, /* grid */
  .ProductItem-details .ProductItem-product-price, /* simple */
  .pdp-layout .pdp-details .pdp-details-excerpt, /* full, half, and wrap */
  
  /* related products */
  
  .products.collection-content-wrapper .ProductItem-relatedProducts .product-price
  
    {
    
      display : none;
      
      }
      
  </style>

Let us know how it goes.

Thanks ! It's telling me "syntax error on line 1".

9 hours ago, FedeBAGG said:

It's telling me "syntax error on line 1".

I updated my code.

On 5/30/2024 at 4:44 AM, laurenhm said:

<style>
  .quantity-input, 
  .quantity-selector, 
  .quantity-input-wrapper, 
  .product-quantity-input,
  .quantity,
  .product-quantity,
  .sqs-quantity-input {
      display: none !important;
  }
  
  .sqs-add-to-cart-button, 
  .add-to-cart-button, 
  .ProductItem-details-form .ProductItem-cart-quantity .sqs-add-to-cart-button {
      display: none !important;
  }
</style>

Hi there,

I am hoping to remove the 'add to cart' & 'qty' for just a couple of products on the store. Is there a way I can apply this to the specific code blocks/pages and not the whole site.

Thanks allot!

1 hour ago, TheLineOfSun said:

I am hoping to remove the 'add to cart' & 'qty' for just a couple of products on the store. Is there a way I can apply this to the specific code blocks/pages and not the whole site.

Yes. If your site is configured to only show Add to Cart buttons on the Product Detail Page (and not the Product List Page) then you can edit the specific product by adding a Code Block to the Additional Information section. Then add the styling code above into the Code Block, in place of the code example.

If you are showing Add to Cart buttons on the Product List Page too, you'll need a different method.

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

On 1/29/2024 at 10:30 PM, creedon said:

Add the following to Website > Website Tools > Custom CSS.

  .collection-type-products .grid-prices, /* grid */
  .ProductItem-details .ProductItem-product-price, /* simple */
  .pdp-layout .pdp-details .pdp-details-excerpt, /* full, half, and wrap */
  
  /* related products */
  
  .products.collection-content-wrapper .ProductItem-relatedProducts .product-price
  
    {
    
      display : none;
      
      }

Let us know how it goes.

Hi @creedon, Thank you for this code!

I used @laurenhm's code with yours (below) to remove the "add to cart" button on the product page, however I am having some issues as soon as I try to change the format of the product page from "simple" to "full." Maybe you can help? (ill explain more below). 

On 5/29/2024 at 2:44 PM, laurenhm said:

Additional code to remove Qty 1 and Add to Cart: 

<style>
  .quantity-input, 
  .quantity-selector, 
  .quantity-input-wrapper, 
  .product-quantity-input,
  .quantity,
  .product-quantity,
  .sqs-quantity-input {
      display: none !important;
  }
  
  .sqs-add-to-cart-button, 
  .add-to-cart-button, 
  .ProductItem-details-form .ProductItem-cart-quantity .sqs-add-to-cart-button {
      display: none !important;
  }
</style>

After injecting the code, everything was perfect (removed the price, quantity & add to cart button), see below.

After I changed the product format from "simple" to "full" I no longer had any formating options & the add to cart button came back (see below). Do you know why this happened and how to fix it? (I'll also insert a screenshot of my code) 

Thank you so so so much 

10 hours ago, User1776 said:

After I changed the product format from "simple" to "full" I no longer had any formating options & the add to cart button came back (see below). Do you know why this happened and how to fix it?

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

On 1/29/2024 at 10:30 PM, creedon said:

Add the following to Website > Website Tools > Custom CSS.

  .collection-type-products .grid-prices, /* grid */
  .ProductItem-details .ProductItem-product-price, /* simple */
  .pdp-layout .pdp-details .pdp-details-excerpt, /* full, half, and wrap */
  
  /* related products */
  
  .products.collection-content-wrapper .ProductItem-relatedProducts .product-price
  
    {
    
      display : none;
      
      }

Let us know how it goes.

@creedon @laurenhm

Hi! Thank you both so much for the code! Do either of you know if it is possible to remove the "gallery photo" section from the product page (see the first picture), but leave the photo / thumbnail remaining in the main store page (see second picture)? 

@User1776 You can use this to Website Tools > Custom CSS box

section.ProductItem-gallery {
    display: none !important;
}

On 8/2/2024 at 10:54 PM, tuanphan said:

@User1776 You can use this to Website Tools > Custom CSS box

section.ProductItem-gallery {
    display: none !important;
}

 

@tuanphan

Hi, thank you so much!! This worked!!

But now, do you know how to make the heading centered? 

On 8/9/2024 at 3:01 AM, User1776 said:

@tuanphan

Hi, thank you so much!! This worked!!

But now, do you know how to make the heading centered? 

Can you share page url?

On 8/10/2024 at 4:32 AM, tuanphan said:

Can you share page url?

@tuanphan I'm not sure how to do that, do you need the URL? 

1 hour ago, User1776 said:

I'm not sure how to do that, do you need the URL?

Yes. A site URL is worth a thousand words. With a site URL we can see what we are dealing with instead of guessing at a potential solution and back and forth. Here is my boilerplate on this issue.

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

On 8/10/2024 at 4:32 AM, tuanphan said:

Can you share page url?

@tuanphan @creedon 

https://www.thepromiseofliberty.org/highlights/p/the-declaration-of-independence 

On 8/13/2024 at 4:38 AM, User1776 said:

@tuanphan I'm not sure how to do that, do you need the URL? 

Center like this?

Use this CSS code

section.ProductItem-summary {
    align-items: center !important;
    justify-content: center !important;
}

or center like this?

Use this code

h1.ProductItem-details-title {
    text-align: center;
}
section.ProductItem-summary {
    align-items: center !important;
    justify-content: center !important;
}

On 8/17/2024 at 6:00 AM, tuanphan said:

Center like this?

Use this CSS code

section.ProductItem-summary {
    align-items: center !important;
    justify-content: center !important;
}

or center like this?

Use this code

h1.ProductItem-details-title {
    text-align: center;
}
section.ProductItem-summary {
    align-items: center !important;
    justify-content: center !important;
}

 

Amazing - thank you so much!!! 

@tuanphan

Do you know how to remove some of the space between the title & the text below?