Swapping discounted price with old price sense theme

Solved

Swapping discounted price with old price sense theme

Alllways
Excursionist
24 0 5

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 🙂

How it is now price.PNGExample how price.PNG

Accepted Solution (1)
dbuglab
Shopify Partner
473 51 51

This is an 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>

 

dbuglab_0-1693481436357.png

 

banned

View solution in original post

Replies 12 (12)

dbuglab
Shopify Partner
473 51 51

Hi @Alllways 


Can you please provide your Store URL and Password too?


With Regards,
Dbuglab

banned
Alllways
Excursionist
24 0 5

https://aliva-amsterdam.nl/

 

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

dbuglab
Shopify Partner
473 51 51

This is an 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>

 

dbuglab_0-1693481436357.png

 

banned
Alllways
Excursionist
24 0 5

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 Example how bigger price.PNGthe 

dbuglab
Shopify Partner
473 51 51

Hi @Alllways 
use this css

 

span.price-item.price-item--sale.price-item--last {
    font-size: 29px !important;
    font-weight: bold !important;
}
banned
Alllways
Excursionist
24 0 5

Where do i put this? 🙂

dbuglab
Shopify Partner
473 51 51

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

banned
dbuglab
Shopify Partner
473 51 51

dbuglab_0-1693482200906.png

 

banned
Alllways
Excursionist
24 0 5

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
Shopify Partner
473 51 51

@Alllways 

add this css 

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

 

dbuglab_0-1693482741472.png

 

banned
Alllways
Excursionist
24 0 5

Thank you! 

Digico
Shopify Partner
47 1 5

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,