How to add price to add to cart button

Store Design
,

Topic summary

A user seeks to display product prices directly on the “Add to Cart” button. They attempted a JavaScript solution that initially works but fails when product variants are selected—the price disappears upon variant changes.

Attempted Solutions:

  • Initial JavaScript code using setTimeout and querySelector to append price to button text
  • Code works on page load but doesn’t persist through variant selection

Community Responses:

  • One contributor suggests the JavaScript approach is fundamentally flawed and recommends editing the product template directly, copying existing price code and applying it to the button, then adding a callback function to handle variant changes
  • Another provides Liquid code to add to the buy button file (with screenshots), but the original poster reports this also fails when variants are selected

Current Status:

  • The user is working with the Refresh theme
  • Multiple respondents conclude this requires advanced custom development beyond simple CSS/code snippets
  • Recommendation is to hire an external developer for proper implementation
  • Issue remains unresolved—no working solution has been provided for maintaining price visibility across variant selections
Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

hello,

Just wondering how can i add a price on the add to cart button on the product page.

price.jpg
price.jpg812Ă—180 10.5 KB

i tried using this code here, it works however when a variant of the product is selected the price will disappear.

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

link to my website: https://notonlywater.com.au/

any help is appreciated!

thankyou

1 Like
2

Hello @LeviFurey ,

To make it work you need a callback function of JS.
But it will not work until you will not refine the first step code to apply price with the atc button.
I mean in my opinion the JS code you are using to apply price with the atc button is completely wrong.

You need to edit the product template, search for existing price code, copy that code and apply with the atc button.
Then the second step will start to change it on change of the variant.

Regards
Guleria

3

thankyou for getting back to me.

could you tell me step by step how to do this im only a beginner at CSS,

4

If this is an issue or this requirement is related to css definitely I provide a step by step instructions.

But this requirement need customization of code part. And if you are not good with that then I suggest you to go with a developer who will write code a/to your requirement.

5

im good with css i just need a step by step instructions to follow so i can do it

6

Hi @LeviFurey

Please add this code more in buy button liquid

image.png
image.png1565Ă—815 67.9 KB

image_720.png
image_720.png720Ă—364 77.1 KB

Above is the result

I hope this helps

Best,

Daisy

7

thankyou for getting back to me i tried it but it dosnt work.

the price comes up, but as soon as i choose a different variant the price tag disappears.

thanks

1 Like
8

Hello @LeviFurey

Which theme are you using?

9

hello,

i am using refresh theme

1 Like
10

Hi @LeviFurey

This task requires more advanced coding, and unfortunately, it cannot be achieved by simply adding a straightforward code. It would likely require custom development. I suggest reaching out to an external developer who can help implement this solution.

Best,

Daisy