How can I replace the price of sold out items with "sold out" on my collections page

Store Design

Topic summary

A user wants to display “SOLD OUT” text instead of the price for out-of-stock items, but only on collection pages—not on individual product pages.

Solution provided:

  • Add CSS code to hide prices for sold-out items in the theme.scss file:
    .price--sold-out .price__regular {
    display: none;
}

Issue encountered:
This CSS also removed prices from product pages since both pages share the same CSS classes.

Final fix:
Add more specific CSS to restore prices on product pages:

.product-template__container .price--sold-out .price__regular {
    display: block;
}

Status: Resolved. The user confirmed the solution worked.

A follow-up question was asked about how to add the sold-out badge initially, but remains unanswered.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
5

@Prezentech

Thank you that worked, but now on the product page, the price is gone, anyway I can get that back?