How to show original price first and then discounted price BROOKLYN theme

Tourist
11 0 1

Hi, I want to know how to change the order, and display the crossed/original price first, and then the discounted price. My product page is showing them like I want, but in my collection page it is not. I used this code (that I found hereon product-grid-item.liquid to display the original price and the discounted price. (since Brooklyn theme doesn't has it as predetermined).

 

 

<span class="grid-product__price">
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        </span>
        
        {% if on_sale %}
          <span id="ComparePrice" class="product-single__price--compare-at">{{ product.compare_at_price | money }}</span>
          <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        {% endif %}

 

 

And after using it the result is the following (in red box):

 

 Screen Shot 2019-11-14 at 4.03.33 PM.png

 

Could you please help me change the crossed amount to be displayed first?

0 Likes
Excursionist
25 2 8

Try swapping the code blocks, like this:

 

        {% if on_sale %}
          <span id="ComparePrice" class="product-single__price--compare-at">{{ product.compare_at_price | money }}</span>
          <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        {% endif %}

        <span class="grid-product__price">
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        </span>

 

 

Shopify Partner
1402 138 195

@Emiliofp wrote:

Hi, I want to know how to change the order, and display the crossed/original price first, and then the discounted price. My product page is showing them like I want, but in my collection page it is not. I used this code (that I found hereon product-grid-item.liquid to display the original price and the discounted price. (since Brooklyn theme doesn't has it as predetermined).

 

 

<span class="grid-product__price">
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        </span>
        
        {% if on_sale %}
          <span id="ComparePrice" class="product-single__price--compare-at">{{ product.compare_at_price | money }}</span>
          <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        {% endif %}

 

 

And after using it the result is the following (in red box):

 

 Screen Shot 2019-11-14 at 4.03.33 PM.png

 

Could you please help me change the crossed amount to be displayed first?


either you can do it via code swapping or css, if you can give me website link, I can check with css or you will need to swap code

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
New Member
1 0 0
Someone please show how to show original price first and then discounted price BROOKLYN theme
 
0 Likes
Shopify Partner
1402 138 195

@ichan17 wrote:
Someone please show how to show original price first and then discounted price BROOKLYN theme
 

please share your product page url and password if site not active yet.

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
New Member
2 0 0

I had the same issue and this worked for me. Thank you so much!!

0 Likes
Excursionist
22 0 4

Hi,

I managed to used the code below and it works perfectly fine. However, it runs really bad in my mobile. Any idea how to fix this? 

        {% if on_sale %}
          <span id="ComparePrice" class="product-single__price--compare-at">{{ product.compare_at_price | money }}</span>
          <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        {% endif %}

        <span class="grid-product__price">
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        </span>

 

This is how my phone view looks like. Help please!

 

price run mobile.PNG

 

 

0 Likes
Tourist
3 0 1

Hello, what do I need to change with the following code to make the first product variant price show instead of the lowest priced variant?

 

{% if on_sale %}
          <span id="ComparePrice" class="product-single__price--compare-at">{{ product.compare_at_price | money }}</span>
          <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        {% endif %}

        <span class="grid-product__price">
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        </span>
0 Likes