Reimplementing Price on Product Grid

[Solsec]

So a developer helped me code parts of my website and removed the price underneath my products at my request. I wanted to see if I could get some help in reimplementing the price since I no longer have access to the Brooklyn theme's original coding since Shopify has removed the theme some years ago. Thanks!

My website: https://poisonjam.co/

[ace1116]

Hello.

I just checked your store and your concern

Your store seems need new update because it isn't updated for a long time.

Anyway, first of all, I can assist you to put price underneath your  products

[Spac-es · Accepted solution]

Add the following code below the product title:

<!-- Show product price -->
<div class="product-price">
  {% if product.compare_at_price > product.price %}
    <span class="original-price">
      <span>{{ product.compare_at_price | money }}</span>
    </span>
    <span class="sale-price">
      <span>{{ product.price | money }}</span>
    </span>
  {% else %}
    <span class="regular-price">
      <span>{{ product.price | money }}</span>
    </span>
  {% endif %}
</div>

Updated code:

<a href="{{ product.url | within: collection }}" class="grid-product__meta">
  <span class="grid-product__title">{{ product.title }}</span>
</a>

<!-- Show product price -->
<div class="product-price">
  {% if product.compare_at_price > product.price %}
    <span class="original-price">
      <span>{{ product.compare_at_price | money }}</span>
    </span>
    <span class="sale-price">
      <span>{{ product.price | money }}</span>
    </span>
  {% else %}
    <span class="regular-price">
      <span>{{ product.price | money }}</span>
    </span>
  {% endif %}
</div>

<!-- Added to show the soldout below Product Title -->
{% if sold_out %}
  <p class="sold-out-text">{{ 'products.product.sold_out' | t }}</p>
{% endif %}

{% if product.price_varies == false and variant.unit_price_measurement != null %}
  <!-- Code to display the price per unit (if applicable) -->
  {% capture unit_price_separator %}
    <span aria-hidden="true"></span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>&nbsp;
  {% endcapture %}

  {% capture unit_price_base_unit %}
    <span>
      {% if variant.unit_price_measurement.reference_value != 1 %}
        {{ variant.unit_price_measurement.reference_value }}
      {% endif %}
      {{ variant.unit_price_measurement.reference_unit }}
    </span>
  {% endcapture %}

  <span class="product-unit-price">
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    {{ variant.unit_price | money }}{{ unit_price_separator }}{{ unit_price_base_unit }}
  </span>
{% endif %}

[Solsec]

Thank you! This works great. Can you write the code where it also hides the price on "sold out" items?

[Spac-es]

Of course! 😎👌

<a href="{{ product.url | within: collection }}" class="grid-product__meta">
  <span class="grid-product__title">{{ product.title }}</span>
</a>

<!-- Display "Sold Out" text if the product is unavailable -->
{% unless product.available %}
  <p class="sold-out-text">{{ 'products.product.sold_out' | t }}</p>
{% endunless %}

<!-- Display price only if the product is available -->
{% if product.available %}
  <div class="product-price">
    <!-- Show original and sale price if there is a discount -->
    {% if product.compare_at_price > product.price %}
      <span class="original-price">
        <span>{{ product.compare_at_price | money }}</span>
      </span>
      <span class="sale-price">
        <span>{{ product.price | money }}</span>
      </span>
    {% else %}
      <!-- Show regular price if there is no discount -->
      <span class="regular-price">
        <span>{{ product.price | money }}</span>
      </span>
    {% endif %}
  </div>

  <!-- Display price per unit if applicable and there is no price variation -->
  {% if product.price_varies == false and variant.unit_price_measurement != null %}
    {% capture unit_price_separator %}
      <span aria-hidden="true"></span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>&nbsp;
    {% endcapture %}

    {% capture unit_price_base_unit %}
      <span>
        {% if variant.unit_price_measurement.reference_value != 1 %}
          {{ variant.unit_price_measurement.reference_value }}
        {% endif %}
        {{ variant.unit_price_measurement.reference_unit }}
      </span>
    {% endcapture %}

    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      {{ variant.unit_price | money }}{{ unit_price_separator }}{{ unit_price_base_unit }}
    </span>
  {% endif %}
{% endif %}