Solved

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

Rouven_Koller
Excursionist
16 0 3

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

Screenshot 2024-02-22 at 13.15.21.png

 to this

Screenshot 2024-02-22 at 13.18.39.png

 

Accepted Solution (1)
MastersHub
Shopify Partner
215 20 38

This is an accepted solution.

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.

 

tax.png

 

 

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.

 
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp

View solution in original post

Replies 19 (19)

MastersHub
Shopify Partner
215 20 38

Hello, Is it like this?

 

MastersHub_0-1708606863835.png

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
Rouven_Koller
Excursionist
16 0 3

Hey,

 

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

MastersHub
Shopify Partner
215 20 38

This is an accepted solution.

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.

 

tax.png

 

 

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.

 
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
Rouven_Koller
Excursionist
16 0 3

Hey,

 

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

 

Screenshot 2024-02-22 at 14.37.04.png

Screenshot 2024-02-22 at 14.39.21.png

  

MastersHub
Shopify Partner
215 20 38

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;
}
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
Rouven_Koller
Excursionist
16 0 3

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

 

Screenshot 2024-02-22 at 14.59.48.png

MastersHub
Shopify Partner
215 20 38

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.

 
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
Rouven_Koller
Excursionist
16 0 3

Hey,

 

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

MastersHub
Shopify Partner
215 20 38

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

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
Rouven_Koller
Excursionist
16 0 3

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
Shopify Partner
215 20 38

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;
}
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
Rouven_Koller
Excursionist
16 0 3

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

MastersHub
Shopify Partner
215 20 38

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;
}

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
Rouven_Koller
Excursionist
16 0 3

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

MastersHub
Shopify Partner
215 20 38

Delete the code I gave and add this.

 

 

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

 

 

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
Rouven_Koller
Excursionist
16 0 3

Hey, sorry still no change.

MastersHub
Shopify Partner
215 20 38

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

 

.product__info-container>*+* {
    margin: 0 0 1.5rem 0!important;
}
Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp
Rouven_Koller
Excursionist
16 0 3

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

MastersHub
Shopify Partner
215 20 38

Always. You're welcome. Have good day.

Helpful ? Like and Accept Solution
Buy me a Coffee
Need a Shopify Developer?
Send Email or Chat on WhatsApp