Change From Price to a Range in Symmetry

[chels_grove]

Looking to change the From price in the collection, to a range in Symmetry Theme, this is the place I need to change it, just not sure what to change it to:

  <div class="price__default">
    {%- if product.price_varies -%}
      {%- if for_variant_picker == false -%}
        <span class="price__from">{{ 'products.product.from' | t }}</span>
      {%- elsif for_variant_picker and current_variant == false -%}
        <span class="price__from">{{ 'products.product.from' | t }}</span>
      {%- endif -%}
    {%- endif %}

[shahrozbabar5]

To change the "From" price display to a price range in the Symmetry Theme, you need to modify the code to calculate and display both the minimum and maximum prices of the product variants. Here's how you can do it:

1. Find the code snippet in your theme files (most likely in `collection.liquid` or a related snippet file).
2. Replace the existing code with the updated code to display the price range.

Here’s an example of how you can update the code to show the price range:

```liquid
<div class="price__default">
{%- if product.price_varies -%}
{%- assign min_price = product.price_min | money -%}
{%- assign max_price = product.price_max | money -%}
{%- if for_variant_picker == false -%}
<span class="price__range">{{ min_price }} - {{ max_price }}</span>
{%- elsif for_variant_picker and current_variant == false -%}
<span class="price__range">{{ min_price }} - {{ max_price }}</span>
{%- endif -%}
{%- else -%}
<span class="price">{{ product.price | money }}</span>
{%- endif -%}
</div>
```

This code calculates the minimum and maximum prices of the product variants using `product.price_min` and `product.price_max`, then displays them as a price range.

Here's a breakdown of the code:

- `{%- if product.price_varies -%}` checks if the product has varying prices.
- `{%- assign min_price = product.price_min | money -%}` assigns the minimum price to the `min_price` variable and formats it as money.
- `{%- assign max_price = product.price_max | money -%}` assigns the maximum price to the `max_price` variable and formats it as money.
- `<span class="price__range">{{ min_price }} - {{ max_price }}</span>` displays the price range if the product has varying prices.
- `{%- else -%} <span class="price">{{ product.price | money }}</span> {%- endif -%}` displays the regular price if the product does not have varying prices.

Ensure you back up your theme files before making any changes, and test the updated code on your development store to verify it works as expected.

[chels_grove]

Thanks! I got some of it to work, but I was getting double the min price, unless I took out the code below (also, Symmetry now has a Snippet for price.liquid which is where I am changing this)

    <span class="price__current">
      {%- if show_currency_code -%}
        {{ price | money_with_currency }}
      {%- else -%}
        {{ price | money }}
      {%- endif -%}
    </span>

Here is that div section - I don't love taking out the currency part of the pricing just to have it visually look right.

<div class="price{%- if compare_at_price > price %} price--on-sale{% endif -%}
                 {%- if available == false %} price--sold-out{% endif -%}">
  <div class="price__default">
    {%- if product.price_varies -%}
      {%- assign min_price = product.price_min | money -%}
      {%- assign max_price = product.price_max | money -%}
      {%- if for_variant_picker == false -%}
        <span class="price__range">{{ min_price }} - {{ max_price }}</span>
      {%- elsif for_variant_picker and current_variant == false -%}
        <span class="price__range">{{ min_price }} - {{ max_price }}</span>
      {%- endif -%}
      {%- else -%}
<span class="price">{{ product.price | money }}</span>
    {%- endif %}

    {% if for_variant_picker or compare_at_price > price -%}
      <span class="price__was">
        {%- if compare_at_price > price -%}
          {{- compare_at_price | money -}}
        {%- endif -%}
      </span>
    {%- endif -%}
  </div>

[chels_grove]

& actually it removes the price from the product page as well now.