Swap Old vs New price

Store Design
, ,
1

Could you help me swap the position of the old & new price?

image
image308×116 3.67 KB

So first old price, then new price.

Thank you in advance!

1 Like
2

@Rickyxane please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

.product-info__price .price__default{display: flex;  flex-wrap: wrap;}

.product-info__price .product-price--large .price__was {order: -1; margin-right: 10px;}

image
image1366×768 168 KB

3

Hey @suyash1 it didn’t work. Placed it in assest > main.css

4

@Rickyxane I am not able to see it in the main.css file, where did you add it? at the end?

5

image
image929×175 7.79 KB

@suyash1 Removed it but placed it back again.

1 Like
6

Hello, @Rickyxane

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

.price__default {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.8rem !important; 
}
span.price__was {
    order: 1 !important;
}
span.price__current {
    order: 2 !important;
}
::after {
    order: 3 !important;
}

image
image749×247 72.8 KB

Thank You!

7

@Rickyxane please add after last } on line 10945 and check

8

Hi @Rickyxane ,
Go to Online Store > Themes > Actions > Edit Code > main.css Add below code at the bottom of main.css file

.product-form .price-container .price__default {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
}
.price__default:after {
    content: none !important;
}

image
image1888×908 173 KB

9

Hey! Thanks. But on mobile it is not showing correctly, it’s outlined to the right. Could you please check once again?

10

image
image390×847 87.6 KB

It’s showing correctly on mobile.