Fabric Theme: Remove price on sold out items only

Shopify Discussion
, , ,
1

Hi folks, been looking at other solutions shared here and it almost works but it completely eliminates the prices for all available items too (working off of the base file). Does anyone have a solution for this? Thanks :slight_smile:

2

Hi @dillydallier

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

3

Hey @dillydallier

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

5

hi! thanks for the response. here is the store url: https://shoptresbon.com/ password: bagloh here is 1 collection where sold out pieces live: archive 1

6

hi! here is the store url: https://shoptresbon.com/ password: bagloh here is 1 collection where sold out pieces live: archive 1 i was originally working on this as a draft but published it so that you can access this

7

Hey @dillydallier

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
{% if product.available %}
<style>
.price {
    display: block;
}
</style>
{% else %}
<style>
.price {
    display: none !important;
}
</style>
{% endif %}

RESULT:

image
image1902×910 261 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

8

Hi @Moeed this worked BUT it also removes the prices for the products that are still available. Do you have an alternative that doesnt affect the available products?

9

The cleanest approach is to wrap your price output in an availability check directly in your theme files. Find where your product price is rendered and add an {% if product.available %} condition around it:

{% if product.available %}
  <span class="price">{{ product.price | money }}</span>
{% endif %}

This way the price only renders for products that are still in stock, with zero impact on the rest of your catalog.

To do this, open your product template file and search for where the price is being output. It’s usually in a snippet like price.liquid or inside your main product section.

If you’d prefer me to handle it, feel free to send a collaborator request code via DM and I’ll get it sorted.

Cheers,
Moeed

10

Hi @Moeed that’d be great if you can look into it. Do you know where I can access the DMs? I’m new to this platform. Thank you!

11

You can click on my profile and you’ll have multiple options to DM.

Best,
Moeed

12

Hey can you share what you are looking for a Solution. In general there is no issue with the fabric theme. The issue might be happens due to the custom code or app code overrider.

13

Hi @dillydallier

I checked just now, but the price is still not showing on the collection page and product page. Has your issue been resolved, or is it still happening?

image
image1355×618 159 KB

image
image1351×607 133 KB

14

Hello @dillydallier

Now, with Fabric theme, you can handle this cleanly in liquid not css, so it only applies to sold out items. In the product card snippet where the price displays, wrap the price output in an if statement that checks product.available. ie only output the price-block if (product.available = true). For products that are sold out, either remove the price block (which easily can be done with a blank span). This displays the price for products in stock, but hides it for out of stock products, and does not break the entire collection grid.