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

Highlighted
Tourist
9 0 0

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 4

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>

 

 

0 Likes
Navigator
338 37 37

@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 / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes