How to only display the available product variant prices in the products overview - shopify

Question

I would like to display the lowest price of the available/instock product variants, instead of "From " + the lowest price of all product variants, even if they are not in stock. I am using the theme Prestige, any hints on how I could achieve this?
If I am right, I found the following code part in product-item.liquid which is displaying the price and also rendered in the flickity carousel and products overview pages:
<div class="ProductItem__PriceList {% if show_price_on_hover %}ProductItem__PriceList--showOnHover{% endif %} Heading">
{%- if product.compare_at_price > product.price -%}
<span class="ProductItem__Price Price Price--highlight Text--subdued">{{ product.price | money_without_trailing_zeros }}</span>
<span class="ProductItem__Price Price Price--compareAt Text--subdued">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
{%- elsif product.price_varies -%}
{%- capture formatted_min_price -%}{{ product.price_min | money_without_trailing_zeros }}{%- endcapture -%}
{%- capture formatted_max_price -%}{{ product.price_max | money_without_trailing_zeros }}{%- endcapture -%}
<span class="ProductItem__Price Price Text--subdued">{{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }}</span>
{%- else -%}
<span class="ProductItem__Price Price Text--subdued">{{ product.price | money_without_trailing_zeros }}</span>
{%- endif -%}
</div>
{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
<div class="ProductItem__UnitPriceMeasurement">
<div class="UnitPriceMeasurement Heading Text--subdued">
<span class="UnitPriceMeasurement__Price">{{ product.selected_or_first_available_variant.unit_price | money_without_trailing_zeros }}</span>
<span class="UnitPriceMeasurement__Separator">/ </span>
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
<span class="UnitPriceMeasurement__ReferenceValue">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
{%- endif -%}
<span class="UnitPriceMeasurement__ReferenceUnit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
</div>
</div>
{%- endif -%}
I tried to use the following code from the Shopify-Blog https://www.shopify.com/partners/blog/collection-page-price-range
{% if available %}
{% if product.price_varies and template == 'collection' %}
From {{ product.price_min | money }} to {{ product.price_max | money }}
{% else %}
{{ money_price }}
{% endif %}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
This code however, displays the product as sold out.

Answer 1

It will be better if you set product_pricetocompare to the value of first variant.
This will check if there is a variant. If there is no variant, you will see 999999, which is not good.
example:
{% for variant in product.variants %}
{% if forloop.index == 1 %}
{% assign product_pricetocompare = variant.price %}
{% else %}
{% if variant.available %}
{% if variant.price < product_pricetocompare %}
{% assign product_pricetocompare = variant.price %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}

Answer 2

Okay I found the answer, maybe it helps someone else as well. Loop through the variants and check if the variant is available and save the lowest price:
{% assign product_pricetocompare = 999999 %}
{% for variant in product.variants %}
{% if variant.available %}
{% if variant.price < product_pricetocompare %}
{% assign product_pricetocompare = variant.price %}
{% endif %}
{% endif %}
{% endfor %}