Product Prices on One Line

[ChrisW3]

Currently our product pricing on product detail page is too spread out. I want the strikethrough price, current price and sale badge all on one line.

https://www.physioworldshop.co.uk/products/collections-electric-couches-products-addax-practice-mana...

This is what we currently have:

This is what I would like

[CafeDelMar]

Hey @ChrisW3.

Here's how to achieve that:
1. Navigate to Sales Channels → Online Store → "Customize" button → Theme settings (Gear icon on the left sidebar) → Custom CSS
2. Add the following code:

@media screen and (min-width: 481px) {
  li:has(.inc_vat_text) span {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: -30px !important;
  }
}

3. Save (right top corner)
4. Hard refresh the storefront

If done correctly, the result should be like this:

The ruleset is only applied for 480+ px (so no mobile phones) as the single line gets too wide for small screens. Feel free to adjust the values as you see fit.

[Dan-From-Ryviu]

Please add this code below to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings 

.product-meta span {
    display: flex !important;
    align-items: center;
    margin-right: 8px;
}

[ChrisW3]

Hi Dan, it looks better, thank you. How would I get the lower price first, then the sale price after, so it is more like this:

[Dan-From-Ryviu]

Please update the code 

.product-meta span {
    display: flex !important;
    align-items: center;
    margin-right: 8px;
    order: 2;
}
.product-meta span.inc_vat_text {
    order: 1 !important;
}
.product-meta span.percentage_text {
    order: 3 !important;;
}