How can I move 'Incl. VAT' text next to product price on Sense 13.0 theme?

[Rouven_Koller]

Hello,

I would like to move the incl. VAT text next to the product price instead of it being under the price.

I think there should be a simple way to do it. Does anyone know a solution?

I am using the Sense 13.0 theme.

https://finession.com/products/shapewear-buttlift-thong

Best regards,

Rouven

to this

[MastersHub]

Hello, Is it like this?

[Rouven_Koller]

Hey,

yes exactly. Like this would be perfect. How did you do that?

[MastersHub]

I was actually going to describe this with css. But we need to fix the liquid code.

Please add this code to your main-product.liquid file, after {%- style -%} element in Online Store > Themes > Edit code.

.price, .product__tax {
    display: inline-block;
}

and

Paste the selected code where I described.

If have any questions let me know so I can clarify, and if not, and you’d like to work together please feel free to message me directly.

[Rouven_Koller]

Hey,

Thanks for the quick response. I think the code is interfering with the loox review rating code.

[MastersHub]

Can you add these to your css codes?

.product__tax.caption.rte {
    margin-top: 10px!important;
    margin-left: 10px!important;
}

a[href='#looxReviews'] {
    margin: auto;
}

[Rouven_Koller]

Hey, now it looks good. Only that the loox rating widget is not completely on the right anymore

[MastersHub]

If you change the code like this, your problem will be solved

.product__tax.caption.rte {
    margin-top: 10px!important;
    margin-left: 10px!important;
}

a[href='#looxReviews'] {
    margin: 0 0 0 auto!important;
}

I would be happy if you like the helpful posts.

[Rouven_Koller]

Hey,

Thank you so much! I wish you an awesome day!

[MastersHub]

You’re welcome. I wish you very nice days. If you need help you can always ask.

[Rouven_Koller]

Hey, could you help me with one more thing?

I’d like to have the price closer to the title and also the “inkl. MwSt.” text closer to the price.

Do you know how to do that?

[MastersHub]

Sure, Replace the last code I gave you with this one.

.product__tax.caption.rte {
    margin-top: 10px!important;
    margin-left: -5px!important;
    letter-spacing: normal;
}

a[href='#looxReviews'] {
    margin: 0 0 0 auto!important;
}

[Rouven_Koller]

Hey, thank you so much! How would I reduce the padding between the product title and price?

[MastersHub]

You’re welcome. A value between 0 and 5 will do the trick. You can set the ideal value by saving.

.product__title + .no-js-hidden {
    margin-top: 5px!important;
}

[Rouven_Koller]

Hey, I added the code to the end of base.css but nothing has changed.

[MastersHub]

Delete the code I gave and add this.

.product__title {
    margin-bottom: 0!important;
}

[Rouven_Koller]

Hey, sorry still no change.

[MastersHub]

It’s weird that it doesn’t work. Try this too.

.product__info-container>*+* {
    margin: 0 0 1.5rem 0!important;
}

[Rouven_Koller]

Hey, with the last two codes together it worked! Thank you so much!

[MastersHub]

Always. You’re welcome. Have good day.