How to add price to add to cart button

Store Design
,
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