Solved

How can I add price to the 'Add to Cart' button on Sense 13.0 Theme?

Rouven_Koller
Excursionist
16 0 3

Hello,

 

I'd like to add the price behind my add to cart button on the product page just like in the screenshot.

I am using the Sense 13.0 Theme.

 

Could someone help me with the code editing? I would highly appreciate it. Thank you a lot!

 

Screenshot 2024-02-19 at 14.49.19.png

Accepted Solutions (3)
ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @Rouven_Koller,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Above the tag "</body>" tag paste the following. Screenshot attached for reference.

 

<script>
try{
    setTimeout(() => {
        document.querySelector('.product-form__submit.button span').innerHTML = document.querySelector('.product-form__submit.button span').innerHTML.trim() + ' ' +document.querySelector('.price-item.price-item--sale.price-item--last').innerHTML.trim()
    },300)   
} catch {}
</script>

 

Screenshot for reference

ThePrimeWeb_0-1708353073405.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @Rouven_Koller,

 

The code is pulling the price tag from the price block and adding it into the button. So you need to leave it as it is. 

 

However, we can hide the price tag from view and let the code work it's magic. Just follow the instructions below.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
.price.price--large.price--show-badge, .product__tax {
    display: none !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above. 

ThePrimeWeb_0-1708355329472.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @Rouven_Koller,

 

Yeah sure. Just replace the 2nd code I gave you with this (Don't touch the first code!)

<style>
.price.price--large.price--show-badge, .product__tax {
    display: none !important;
}

.product-form__submit.button span {
    line-height: 1.4 !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 11 (11)

ThePrimeWeb
Shopify Partner
2138 614 487

Hey @Rouven_Koller

 

Could you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Rouven_Koller
Excursionist
16 0 3

Hey @ThePrimeWeb 

 

Thank you for your response. Here is the link: https://finession.de/products/akkusauger

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @Rouven_Koller,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Above the tag "</body>" tag paste the following. Screenshot attached for reference.

 

<script>
try{
    setTimeout(() => {
        document.querySelector('.product-form__submit.button span').innerHTML = document.querySelector('.product-form__submit.button span').innerHTML.trim() + ' ' +document.querySelector('.price-item.price-item--sale.price-item--last').innerHTML.trim()
    },300)   
} catch {}
</script>

 

Screenshot for reference

ThePrimeWeb_0-1708353073405.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Rouven_Koller
Excursionist
16 0 3

Hello, 

 

Thank you a lot for the fast response and help!


It works, however only when I have the price tag block already on the page.

Is it possible to make it so it shows even without it?

 

Thank you!

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @Rouven_Koller,

 

The code is pulling the price tag from the price block and adding it into the button. So you need to leave it as it is. 

 

However, we can hide the price tag from view and let the code work it's magic. Just follow the instructions below.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
.price.price--large.price--show-badge, .product__tax {
    display: none !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above. 

ThePrimeWeb_0-1708355329472.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Rouven_Koller
Excursionist
16 0 3

Hey @ThePrimeWeb ,

 

That's it! Thank you so much for your quick help.

 

Appreciate it a lot!


Have an amazing day.

Rouven_Koller
Excursionist
16 0 3

One more thing. Could we make it so that the line height is higher so that there is some distance between the text and the price on mobile?

Smart Dual Handstaubsauger – finession.jpeg

ThePrimeWeb
Shopify Partner
2138 614 487

This is an accepted solution.

Hey @Rouven_Koller,

 

Yeah sure. Just replace the 2nd code I gave you with this (Don't touch the first code!)

<style>
.price.price--large.price--show-badge, .product__tax {
    display: none !important;
}

.product-form__submit.button span {
    line-height: 1.4 !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Rouven_Koller
Excursionist
16 0 3

Thanks a lot!

kbraly
Excursionist
15 0 3

This looks amazing! Can you do it for ours? aembr.co

M4UDE
Visitor
1 0 0

May you please do the same for the product grid section? I mean, for products collections so to speak