How can I hide the $0 price tag on variant items in Debut Theme?

[rebelbuttons]

Hi!  Any help is appreciated.  Here is my issue:

Some of my variants have a $0 price tag because it's not a variant I stock (quantity is also set to 0 and the "sold out" verbiage I changed to "not available"), but it's stocked for some other variants.  Example:  1" mirror is not available and price is $0 and quantity is 0.  A 2.25" mirror is available though.  Variant Options are size and style, but not every size and style is something I make.   So on my collection pages, the $0 price tag displays since it's the "lowest" but I don't like that.   So hiding anything anywhere that says $0 would be great.   My shop link is rebel-buttons.myshopify.com  If you scroll all the way down, you'll see a collection that will display $0 for the buttons.  If you click on a product and choose 1" mirror, you will see how it says "Not Available" but also displays $0.  I would love to hide or not display this $0.

Thank you so much!

[diego_ezfy]

Hey,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script>
function hidePrices(){
var prices = document.querySelectorAll(`.price-item--regular`);

if (!prices){
    return;
}

for (var each of prices){
    var price = each.textContent.trim();
    if (price === '$0.00'){
        each.closest('.price').remove();
    }
}
}

hidePrices();
</script>

Result:

Please keep in mind that this would not work on multiple currencies, it would require a bit more of a complex script.

Kind regards,
Diego

[rebelbuttons]

Thank you so much for your help Diego!  I tried this out, but it also is now hiding ALL of my prices and even on the product pages too.  I would only like anything with a $0.00 to be hidden, but everything else can show.  Thanks again!

[diego_ezfy]

@rebelbuttons 

It's hiding exclusively anything with $0.00. This product, for example, is showing the price up.

Do you want to hide the price exclusively at the home page?

[rebelbuttons]

The ornaments don't have anything with $0, so they are not part of my problem.  When I apply your code, ALL prices are hidden for any product that has a variant that is a $0.  I would just like those $0 variants hidden, but the other prices shown if that makes sense.  I'm attaching a screenshot - it should be showing a $1 price for the options selected on this product page, but the price is hidden.

[diego_ezfy]

Oh, I see.

In this case yes, this Javascript script I sent you wouldn't work, a .Liquid solution would be much easier and simpler to achieve what you need.

I'd need to be within your store's theme though, I couldn't guide you through.

Unfortunately my time to the community is a bit limited because of my work, but someone around here will surely be kind enough to help you out!

Kind regards,
Diego

[rebelbuttons]

Thank you so much for you time and help you dedicated to my problem!  I really appreciate it!  I will keep trying to figure out a way to fix it.  Thanks again!

[TheGFLollyCo]

Hey did you end up finding a solution to this?