Hide Price On Sold Items On Product Page

Hi there,

The code to hide prices once an item has sold no longer works for me since the update in August. I’ve tried all of the codes listed above and it hides the price on the shop scrolling page but not when you click on the individual item. I’d like to find a code to hide both please is this possible? Images attached. Thanks so much 

www.cordialvintage.com 

On 11/16/2022 at 10:33 PM, Kgpanda said:

Hi there,

The code to hide prices once an item has sold no longer works for me since the update in August. I’ve tried all of the codes listed above and it hides the price on the shop scrolling page but not when you click on the individual item. I’d like to find a code to hide both please is this possible? Images attached. Thanks so much 

www.cordialvintage.com 

Add to Design > Custom CSS

/* hide sold out price */
.sold-out .product-price {
	display: none !important;
}

On 11/20/2022 at 1:34 PM, tuanphan said:

Add to Design > Custom CSS

/* hide sold out price */
.sold-out .product-price {
	display: none !important;
}

 

amazing that worked for me thanks @tuanphan

Hi @tuanphan, I used the code below to successfully hide prices of sold items on the shop page, but the product page still shows the price. Is there another code to use? I am using Galapagos template, Squarespace 7.0. Thank you!

/* hide sold out price */
.sold-out .product-price {
	display: none !important;
}

On 12/8/2022 at 1:25 AM, YvonneKL said:

Hi @tuanphan, I used the code below to successfully hide prices of sold items on the shop page, but the product page still shows the price. Is there another code to use? I am using Galapagos template, Squarespace 7.0. Thank you!

/* hide sold out price */
.sold-out .product-price {
	display: none !important;
}

Hi,

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

I'm having the same issue. I would like to be able to hide the prices of the 'sold out' items in my products page. I have tried all of the suggestions above, with no luck.  Does anyone have a solution for this?

38 minutes ago, catherinegodinart said:

I have tried all of the suggestions above, with no luck.

Please provide us with a working link to your page so that we can take a look.

Hello, i would like to hide the price and the 'Add to Cart' button on all my product pages. Is there a simple way to do it?

On 3/10/2023 at 5:12 AM, josepablourena said:

Hello, i would like to hide the price and the 'Add to Cart' button on all my product pages. Is there a simple way to do it?

Add to Design > Custom CSS

.grid-prices, .product-price {
	display: none !important;
}
div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}

Hi All,

I've attempted putting all of the above codes in to my website header for my online shop, but none of them seem to work. 

My website is https://www.tomcoxstudio.com/ 

I'd like to have all the products which are sold to have the price hidden.

Hopefully somebody can help 🙂

Thanks!

On 8/3/2023 at 12:53 PM, tomcoxart said:

I've attempted putting all of the above codes in to my website header for my online shop, but none of them seem to work. 

The solution above is CSS so should be added to the Custom CSS panel, not the header injection that you mentioned.

When I add the CSS from my accepted answer to your site in the browser, it works fine for me.

Ah, I just went to Open AI and it it gave me a code that worked 🙂 Slightly blown away!

<script> function hidePriceForSoldOutProducts() { const products = document.querySelectorAll(".product"); products.forEach((product) => { const soldOutElement = product.querySelector(".product-mark.sold-out"); if (soldOutElement) { const priceElement = product.querySelector(".product-price"); if (priceElement) { priceElement.style.display = "none"; } } }); } // Call the function once the page has loaded to hide the price if products are sold out. window.addEventListener("load", hidePriceForSoldOutProducts); </script>

I still can't get this to work...

https://www.janwierart.com/shop-20

On 9/22/2023 at 6:28 AM, Jackie123 said:

I still can't get this to work...

 

https://www.janwierart.com/shop-20

Add to Last Line in Code Injection > Footer

<script>
  $(function() {    
    $('.sold-out').parents('.summary-item').addClass('summary-sold-out');

  });
</script>
<style>
  .summary-sold-out .product-price {
    display: none !important;
}
</style>

On 9/25/2023 at 8:58 AM, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(function() {    
    $('.sold-out').parents('.summary-item').addClass('summary-sold-out');

  });
</script>
<style>
  .summary-sold-out .product-price {
    display: none !important;
}
</style>

 

Ah! Perfect thank you @tuanphan !!