Replace price of sold out item with "SOLD" and strikethrough item text

[Iscutshn]

Hello,

For items that are sold out (quantity = 0) instead of having the “SOLD OUT” badge on the item card, I want to replace the item price with the text “SOLD” and also strikethrough the item title text.

I am using the Ritual theme, and I have researched previous threads on this but all of the code recomendations do not work. For example I saw a solution for:

.price–sold-out .price__regular {
display: none;
}

When I try this in base.css it doesnt work, only .price does and any reference to –sold-out isn’t in any of the code base. I’ve tried every option so far that has been posted on the forum but have not had any success. I also don’t have the file theme.css which people also recommend as the solution.

Can anybody please help?

[tim_1]

Ritual is the same theme as Horizon/Atelier/Fabric/Pitch so you can also look for solutions for these themes.

But you’re right – there is no CSS selector to use.
Luckily, Horizon family allows you to add “Custom liquid” block into product card.
So you can use this code:

{% unless closest.product.available %}
<style>
.product-card[data-product-id="{{ closest.product.id }}"] [ref="productTitleLink"] p {
  text-decoration: line-through;
}

.product-card[data-product-id="{{ closest.product.id }}"] product-price>div {
  display: none;
}

.product-card[data-product-id="{{ closest.product.id }}"] product-price:after {
content: "SOLD"; 
}
</style>
{% endunless %}

Before/After:

→

[Iscutshn]

Thats great, this solution worked - thank you! As a follow on would you know how to disable the default “Sold Out” badge in the top right of each product card?

[tim_1]

You can hide them with CSS. Though you can’t target “Sold out” badge specifically, you will have to target all of them.
But I guess you would not want, say “Sale” badge on sold-out product as well?

So here is the updated code:

{% unless closest.product.available %}
 <style>
    /* When product is sold:
       cross the product title */
  .product-card[data-product-id="{{ closest.product.id }}"] [ref="productTitleLink"] p {
    text-decoration: line-through;
  }

    /* hide product price and product badges */
  .product-card[data-product-id="{{ closest.product.id }}"] product-price > div, 
  .product-card[data-product-id="{{ closest.product.id }}"] .product-badges {
    display: none;
  }

    /* show "SOLD" instead of price */
  .product-card[data-product-id="{{ closest.product.id }}"] product-price:after {
    content: "SOLD"; 
  }
 </style>
{% endunless %}