How to hide prices on my collection page and replace it with "SOLD OUT"?

Solved
Highlighted
Tourist
8 0 1

Hi, so I want to hide the price of any sold out products on the main collections page and replace it with 'SOLD OUT'. I dont want to do this on the product page, just on the collections page. Also the sold out badge became big once I added code that centers the product title and price on the collections page. Any help? 

 

heres the link to my site: reticentofficial.com

0 Likes
Highlighted

This is an accepted solution.

Hi @dgonz 

You'd need to implement this on the backend code this,

essentially putting if the product has < 1 quantity, show the sold out, else show the price.

As for the the size of the sold out

see the below, add this to your theme.scss and paste it at the bottom

 

.price__badge.price__badge--sold-out {
  margin: auto;
  width: 50%; 
}

.price__badge.price__badge--sold-out span {
  margin: auto;
}

 

 

end result

Defineify_0-1603490583639.png

 

 

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
1 Like
Highlighted
Tourist
8 0 1

@Defineify 

Thank you so much that worked! 

Im sorry, Im not really sure what you meant though with the backend code? Could you explain how I could replace the price with sold out of products on my collections page?

0 Likes
Highlighted

Hi @dgonz 

Backend code is the code which is not shown on the website, so essentially I wont be able to see it to change it.

Shopify uses liquid for their backend code, usually looks like

{% if some things %}

It'll require some slight customization, and for someone to have access to your store to complete. If you dont know how exactly you'd need to hire someone to complete

If my answer was helpful please Like and Accept my post as the Solution
Need help customizing your store? Contact me on email at Defineify@gmail.com
0 Likes