[FIXED] How to only display the available product variant prices in the products overview

Issue

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.

Solution

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 %}

Answered By - Charles C.

Answer Checked By - Mary Flores (PHPFixing Volunteer)