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

Emiliofp · November 14, 2019, 9:19pm

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 here) on product-grid-item.liquid to display the original price and the discounted price. (since Brooklyn theme doesn’t has it as predetermined).

<strong><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 %}</strong>

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

![Screen Shot 2019-11-14 at 4.03.33 PM.png|660x784](upload://92hYL9Rh0vUTronuaRYh1qhw29.png)

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

James-G · November 16, 2019, 12:31am

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>

suyash1 · November 16, 2019, 5:00am

Emiliofp:

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 here) on product-grid-item.liquid to display the original price and the discounted price. (since Brooklyn theme doesn’t has it as predetermined).
<strong>
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            
              
              +
            
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        
        
        {% if on_sale %}
          {{ product.compare_at_price | money }}
          {{ 'products.general.sale_price' | t }}
        {% else %}
          {{ 'products.general.regular_price' | t }}
        {% endif %}</strong>
And after using it the result is the following (in red box):
![Screen Shot 2019-11-14 at 4.03.33 PM.png|660x784](upload://92hYL9Rh0vUTronuaRYh1qhw29.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

ichan17 · April 4, 2020, 11:26pm

Someone please show how to show original price first and then discounted price BROOKLYN theme

suyash1 · April 5, 2020, 2:22am

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

betterlifestyle · April 29, 2020, 11:47pm

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

EeJin · November 15, 2020, 1:46pm

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!

BryanCommitted · November 27, 2020, 7:52pm

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>

Amyames · December 30, 2022, 3:18pm

Hello James,

Wondered if you can help me.

I used the above 1st section of the code which worked well however I would like the crossed out original price to be smaller and not in Bold.

Also would like the new sale price to be slightly bigger and in red to make the new sale price stand out more. (Abit like the format when you click into a product) Can you help?

My website is Shop All – EcoTwenty for your ref.

Thanks in advance

Amy

suyash1 · December 30, 2022, 3:25pm

@Amyames - please add this css to the very end of your timber.scss file and check

.product-single__price--compare-at {font-size: 1em; font-weight: 400;}

Amyames · January 4, 2023, 4:38pm

Hello Suyash1

thanks for your reply and help. I have tried but please can you further advise where is the end of your timber.scss file?

Thanks in advance

suyash1 · January 4, 2023, 5:30pm

Go to online store- themes- actions- edit code- you will have this file in
your assets folder

Amyames · January 4, 2023, 5:38pm

Wow!! Thank you so much! it worked!

Amyames · January 6, 2023, 1:30pm

Hi Suyash1

Hope you well

Sorry just another thing. The non sale items have the above code written on the site. Please see my attached image for ref. How to add a code to include non sale items format to stay as is without any changes?

Thanks

Amy

suyash1 · January 7, 2023, 7:09am

@Amyames - you sent cssv file, can you please send png or jpg file?

Amyames · January 7, 2023, 8:52am

Thanks again for your reply, here is a screen shot hope this works?
Thanks

Amyames · January 10, 2023, 2:29pm

Hi Suyash1

I tried to send the attached in Jpeg or Png via email not sure if you have received and I cannot seem to attached image on here.

On the non sale items before the orginal price reads the code .product-single__price–compare-at {font-size: 1em; font-weight: 400;}

I have copied and pasted below, sorry I cannot attach image. My website is Loungewear – EcoTwenty

Women Tank Top 100% organic cotton .product-single__price–compare-at {font-size: 1em; font-weight: 400;} Regular price— REGULAR PRICE£24

SAVE
£3

Vintage Ladies Fila Sweater- Grey

Thanks
Amy

Amyames · February 4, 2023, 9:56pm

Hi Suyashi,

please can you help me with the below question, i have added in description and link to the website where you can see the problem.

Look forward to hearing you

Thanks

Amy

suyash1 · February 5, 2023, 2:12am

@Amyames - hello, I can see you added css near product title,

please remove css from there and add it to theme.scss file

JG0769 · February 5, 2023, 11:09pm

Hello @suyash1 ,

I’m trying to center the featured collections grid view in the Dawn template, but it’s not aligning. The code I’ve tried adding to the bottom of the base CSS is:

#shopify-section-template–17767328350481__featured_collection .title-wrapper-with-link{text-align: center; justify-content: center;} #shopify-section-template–17767328350481__featured_collection .grid{justify-content: center;} #shopify-section-template–17767328350481__featured_collection .card-information__wrapper > .price

Any advise or direction would be appreciated!

Topic		Replies	Views
How can I display the original price before the sale price? Technical Q&A	3	4	May 6, 2021
Order of crossed out price and discounted price Store Design design	4	1	April 19, 2023
DISCOUNTED PRICE DOESN'T SHOW NEXT TO ORIGINAL PRICE (CROSSED OUT) - debut theme Technical Q&A	0	2	February 2, 2021
Swapping discounted price with old price sense theme Store Design design , product-page	12	6	August 31, 2023
How to show orginal price and price after discount? Store Design design	9	18	December 12, 2022

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

Related topics