Price variant not displaying in collection grid

[TBS2023]

Hello

Some of my products have variants - however the price of these doesn't display on the collection page

I had added the variant rates

https://the-body-shop-nordic.myshopify.com/collections/most-loved

https://the-body-shop-nordic.myshopify.com/

ubahdo

<div class="grid-product__price">
          {%- if on_sale -%}
            <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            <span class="grid-product__price--original">{{ product.compare_at_price | money }}</span>
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {%- endif -%}
          {%- if product.price_varies -%}
            {%- assign price = product.price_min | money -%}
            {{ 'products.general.from_text_html' | t: price: price }}
          {%- else -%}
            {{ product.price  | money }}
          {%- endif -%}
          {%- if on_sale -%}
            {%- if settings.product_save_amount -%}
              {%- if settings.product_save_type == 'dollar' -%}
                {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
              {%- else -%}
                {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{%- endcapture -%}
              {%- endif -%}
              <span class="grid-product__price--savings">
                {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
              </span>
            {%- endif -%}
          {%- endif -%}

          {%- assign product_variant = product.selected_or_first_available_variant -%}
          {%- if product_variant.unit_price_measurement -%}
            <div class="product__unit-price">
              {%- capture unit_price_base_unit -%}
                {%- if product_variant.unit_price_measurement -%}
                  {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
                    {{ product_variant.unit_price_measurement.reference_value }}
                  {%- endif -%}
                  {{ product_variant.unit_price_measurement.reference_unit }}
                {%- endif -%}
              {%- endcapture -%}

              {{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
            </div>
          {%- endif -%}

<div class="th_wl_col_btn" data-product_id="{{product.id}}" data-variant_id="{{product.selected_or_first_available_variant.id}}"></div>
          
        </div>
      </div>

[BSSCommerce-B2B]

Hi @TBS2023 

I checked and found that the code has no issues, but please try adding a small text '...' before the price display. It will look like this.

<div class="grid-product__price">
          {%- if on_sale -%}
            <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            <span class="grid-product__price--original">{{ product.compare_at_price | money }}</span>
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {%- endif -%}
          {%- if product.price_varies -%}
            <span>...</span>
            {%- assign price = product.price_min | money -%}
            {{ 'products.general.from_text_html' | t: price: price }}
          {%- else -%}
            {{ product.price  | money }}
          {%- endif -%}
          {%- if on_sale -%}
            {%- if settings.product_save_amount -%}
              {%- if settings.product_save_type == 'dollar' -%}
                {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
              {%- else -%}
                {%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{%- endcapture -%}
              {%- endif -%}
              <span class="grid-product__price--savings">
                {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
              </span>
            {%- endif -%}
          {%- endif -%}

          {%- assign product_variant = product.selected_or_first_available_variant -%}
          {%- if product_variant.unit_price_measurement -%}
            <div class="product__unit-price">
              {%- capture unit_price_base_unit -%}
                {%- if product_variant.unit_price_measurement -%}
                  {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
                    {{ product_variant.unit_price_measurement.reference_value }}
                  {%- endif -%}
                  {{ product_variant.unit_price_measurement.reference_unit }}
                {%- endif -%}
              {%- endcapture -%}

              {{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
            </div>
          {%- endif -%}

<div class="th_wl_col_btn" data-product_id="{{product.id}}" data-variant_id="{{product.selected_or_first_available_variant.id}}"></div>
          
        </div>
      </div>

Then let me know if it displays

[TBS2023]

The 3 little dots appear but not the price

[ZestardTech]

Hello @TBS2023 

You can try using this code.

<div class="grid-product__price">
  {%- assign product_variant = product.selected_or_first_available_variant -%}
  
  {%- if on_sale and product_variant.compare_at_price > product_variant.price -%}
    <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="grid-product__price--original">{{ product_variant.compare_at_price | money }}</span>
    <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}
  
  {%- if product.price_varies -%}
    {%- assign price = product_variant.price | money -%}
    {{ 'products.general.from_text_html' | t: price: price }}
  {%- else -%}
    {{ product_variant.price | money }}
  {%- endif -%}

  {%- if on_sale and product_variant.compare_at_price > product_variant.price -%}
    {%- if settings.product_save_amount -%}
      {%- if settings.product_save_type == 'dollar' -%}
        {%- capture saved_amount -%}{{ product_variant.compare_at_price | minus: product_variant.price | money }}{%- endcapture -%}
      {%- else -%}
        {%- capture saved_amount -%}{{ product_variant.compare_at_price | minus: product_variant.price | times: 100.0 | divided_by: product_variant.compare_at_price | round }}%{%- endcapture -%}
      {%- endif -%}
      <span class="grid-product__price--savings">
        {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
      </span>
    {%- endif -%}
  {%- endif -%}

  {%- if product_variant.unit_price_measurement -%}
    <div class="product__unit-price">
      {%- capture unit_price_base_unit -%}
        {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
          {{ product_variant.unit_price_measurement.reference_value }}
        {%- endif -%}
        {{ product_variant.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      {{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
    </div>
  {%- endif -%}
</div>

<div class="th_wl_col_btn" data-product_id="{{ product.id }}" data-variant_id="{{ product_variant.id }}"></div>

[TBS2023]

nothing happened

[EvinceDev]

Hello @TBS2023 ,
Its look like object product is blank or undefined where product have more than one viariants.
Could you share the file code in which this code is included.

[TBS2023]

where do i find this, please?

[EvinceDev]

Please provide theme name of it.

[TBS2023]

Impulse