Swapping discounted price with old price sense theme

[Alllways]

Hello, I am currently working on a store using the Sense Theme.

I am struggling with swapping the discounted price with the original price.

I would like to have the discounted price in front of the old price on the product page of the product itself only! Ill provide an example of how I would like it.

Could someone help me?

Thanks in advance and kind regards 🙂

[dbuglab]

Hi @Alllways 

Can you please provide your Store URL and Password too?

With Regards,
Dbuglab

[Alllways]

https://aliva-amsterdam.nl/

the one with the correct example is: https://novaswinkel.nl/ 

[dbuglab · Accepted solution]

Hi @Alllways 

Please follow these Steps:

1) Go to Online Store
2) Edit Code
3) Please find theme.liquid file
4) Add the following code above </head> tag

<style>
#price-template--19441569694045__main .price__sale {
    display: flex!important;
    flex-direction: row-reverse!important;
    align-items: end;
}
</style>

[Alllways]

Thank you so much! it worked!

Do you maybe also know how i can make the discounted price larger in comparison to the old price? Just on product page of the product itself the 

[dbuglab]

Hi @Alllways 
use this css

span.price-item.price-item--sale.price-item--last {
    font-size: 29px !important;
    font-weight: bold !important;
}

[Alllways]

Where do i put this? 🙂

[dbuglab]

Please follow these Steps:

1) Go to Online Store
2) Edit Code
3) Please find theme.liquid file
4) Add the following code above </head> tag

in style which you added

[dbuglab]

[Alllways]

Thank you, only problem is that it changes it also in the collections page. I would prefer it only on the product page of the product itself 🙂

[dbuglab]

@Alllways 

add this css 

.price.price--on-sale .price__sale {
    display: flex!important;
    flex-direction: row-reverse!important;
    align-items: end;
}

[Alllways]

Thank you! 

[Digico]

Hello, it's quite easy to do in your price.liquid file. You need to reorder code a bit.

Replace :

    <div class="price__sale">
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
      {%- endunless -%}
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {{ money_price }}
      </span>
    </div>

With:

    <div class="price__sale">
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {{ money_price }}
      </span>      
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
      {%- endunless -%}
    </div>

It will also be applied to collections pages (product lists) as well. Please mark it as a solution if it helps.

Regards,