Jump to content

Hide Price On Sold Items On Product Page

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.alifelessordinary.store/shop/p/mother-of-pearl-shell-cups

Hello, 

I would like to hide the price on sold items on the product page, and also on the related products (which are sold) on the same page. I currently have code to hide the sold price on the 'shop' page but it does not work on the product page and the price still show when sold.  

current code is: 

.sold-out .sqs-money-native { display:none; }
.view-item .sold-out .sqs-money-native { display:block; }

Any help would be most appreciated! 

Thankyou. 

Emma

Link to comment
On 6/4/2021 at 12:35 PM, alifelessordinary said:

Site URL: https://www.alifelessordinary.store/shop/p/mother-of-pearl-shell-cups

Hello, 

I would like to hide the price on sold items on the product page, and also on the related products (which are sold) on the same page. I currently have code to hide the sold price on the 'shop' page but it does not work on the product page and the price still show when sold.  

current code is: 

.sold-out .sqs-money-native { display:none; }
.view-item .sold-out .sqs-money-native { display:block; }

Any help would be most appreciated! 

Thankyou. 

Emma

Hi Emma,

The below code worked for me.

// Hide Price when product is out of stock
.sold-out .ProductItem-details .product-price, .sold-out .ProductList-overlay .ProductList-meta .product-price {
  display: none;
}

// Hide Add to Cart button when product is out of stock
.sold-out .ProductItem-details .sqs-add-to-cart-button {
  display: none;
}

Best of luck!

Link to comment
On 6/6/2021 at 4:57 PM, LXK said:

 

// Hide Price when product is out of stock
.sold-out .ProductItem-details .product-price, .sold-out .ProductList-overlay .ProductList-meta .product-price {
  display: none;
}

// Hide Add to Cart button when product is out of stock
.sold-out .ProductItem-details .sqs-add-to-cart-button {
  display: none;
}

 

Hello LXK, 

 

Worked a treat! Thank you so much! really appreciated! 

have a good week.

cheers

emma 

Link to comment
  • 3 weeks later...
On 6/6/2021 at 8:57 AM, LXK said:

Hi Emma,

The below code worked for me.

// Hide Price when product is out of stock
.sold-out .ProductItem-details .product-price, .sold-out .ProductList-overlay .ProductList-meta .product-price {
  display: none;
}

// Hide Add to Cart button when product is out of stock
.sold-out .ProductItem-details .sqs-add-to-cart-button {
  display: none;
}

Best of luck!

Alas, this did not work for me. My page is still showing the price of the sold out item. Any other suggestions?

https://abigailcarter.com/art/p/ruthless-iternations

Thanks,

Abby

Link to comment
On 6/29/2021 at 4:16 AM, Abbodabby said:

Alas, this did not work for me. My page is still showing the price of the sold out item. Any other suggestions?

https://abigailcarter.com/art/p/ruthless-iternations

Thanks,

Abby

Add to Design > Custom CSS

/* Hide sold out price */
.sold-out span.sqs-money-native {
    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
  • 1 year later...
  • Solution
On 8/28/2022 at 4:31 AM, Jesica said:

I previously used this code 

.sold-out .sqs-money-native { display:none; }

for some reason it stopped working

On 23 August 2022, Squarespace started rolling out an update to change the way prices are formatted. This update removed the class "sqs-money-native" from Squarespace prices, so you'll need to update your CSS. 

The new version will look something like this:

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

You haven't provided a link to your site so I'm unable to test it on your specific site. If you experience any issues please post some details.

Edited by paul2009
edited for clarity

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
On 8/28/2022 at 2:15 PM, paul2009 said:

On 23 August 2022, Squarespace started rolling out an update to change the way prices are formatted. This update removed the class "sqs-money-native" from Squarespace prices, so you'll need to update your CSS. 

The new version will look something like this:

.sold-out .product-price {
  display:none;
}

You haven't provided a link to your site so I'm unable to test it on your specific site. If you experience any issues please post some details.

I use this code and there are no prices for related products on the sold out product page.
How to return the prices there?

Link to comment
1 hour ago, Venera said:

I use this code and there are no prices for related products on the sold out product page.

Yes, this will happen. Please provide a link to the site and details of which product(s) you want it to affect.

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
17 hours ago, Venera said:

Hi guys, can anyone help with the code so that the prices are visible on the product page that is sold out?

Add this code under to override above code

.ProductItem-relatedProducts.ProductList.clear.sqs-pinterest-products-wrapper .product-price {
    display: block !important;
}

 

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
8 hours ago, poppydodgeart said:

Hello,

I was wondering how I can have the prices show as hidden once an item is sold out from my product page?  I tried the code you suggested above using the squarespace custom css editor with no luck. 

https://www.poppydodge.com/available-work

Thanks!

Add to Design > Custom CSS

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

 

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
  • 3 weeks later...

Site URL: https://www.creationsbysujatha.com/abstract-art

Hi!

The code I've been using to hide prices on sold products has stopped working. Ive tried update it with all the suggested codes from the forum after Aug 2022, but still with no success. None of them works on my site. Please if anyone can help me and provide a code that will actually work. I wish it to say Sold without the price. 

Thanks in advance. 

Link to comment
On 9/29/2022 at 7:35 AM, CreationsbyS said:

Site URL: https://www.creationsbysujatha.com/abstract-art

Hi!

The code I've been using to hide prices on sold products has stopped working. Ive tried update it with all the suggested codes from the forum after Aug 2022, but still with no success. None of them works on my site. Please if anyone can help me and provide a code that will actually work. I wish it to say Sold without the price. 

Thanks in advance. 

Do this on list page or list page + individual products + related products?

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 10/1/2022 at 6:40 AM, CreationsbyS said:

Sorry I don't understand what you mean? Please explain further. Thanks.
I am attaching a print screen of how my CSS looks like currently, where the code to hide prices on sold product doesn't work. 

Screenshot 2022-10-01 at 01.37.42.png

I meant hide sold out price on which pages: product list + individual products + related products or?

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
  • Marcus_SQSP changed the title to Hide Price On Sold Items On Product Page
9 hours ago, CreationsbyS said:

Hide sold out prices on on individual product I presume. You can visit my product page which was linked at the beginning and you will understand. 

This page https://www.creationsbysujatha.com/abstract-art

or this https://www.creationsbysujatha.com/abstract-art/p/fierce

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 10/6/2022 at 5:18 AM, tuanphan said:

I had to do some maintenance on website, so its this page https://www.creationsbysujatha.com/artgallery

All the sold products on this page I want the price to be hidden. Right now I've set them to 0. But I wish for this NOT to show. 

DO you have a code that will work for me?

Link to comment
On 10/7/2022 at 7:43 PM, CreationsbyS said:

I had to do some maintenance on website, so its this page https://www.creationsbysujatha.com/artgallery

All the sold products on this page I want the price to be hidden. Right now I've set them to 0. But I wish for this NOT to show. 

DO you have a code that will work for me?

If you want to do this on all pages, add this code to Settings > Advanced > Code Injection > Header

<style>
  div.sold-out .product-price {
    display: none;
}
</style>

If you want to do this on one page, add this code to that Page Header (do not add to Custom CSS)

<style>
  div.sold-out .product-price {
    display: none;
}
</style>

 

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 10/10/2022 at 1:47 PM, tuanphan said:

If you want to do this on all pages, add this code to Settings > Advanced > Code Injection > Header

<style>
  div.sold-out .product-price {
    display: none;
}
</style>

If you want to do this on one page, add this code to that Page Header (do not add to Custom CSS)

<style>
  div.sold-out .product-price {
    display: none;
}
</style>

 

Yes finally something works! Took some time for us to get there, but we did in the end :). Thank you! 

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.