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

Highlighted
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
Highlighted
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>

 

 

Highlighted
Astronaut
990 89 118

@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
Highlighted
New Member
1 0 0
Someone please show how to show original price first and then discounted price BROOKLYN theme
 
0 Likes
Highlighted
Astronaut
990 89 118

@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
Highlighted
New Member
2 0 0

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

0 Likes
Highlighted
Tourist
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
Highlighted
New Member
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