Adding variant price to ATC button - Sense Theme

[csamer]

Hi all,

I was wondering how to include the variant (or product) price within the Add to Cart button in Sense theme. Example in the screenshot.

[KetanKumar]

@csamer 

can you please send store url

[PageFly-Richard · Accepted solution]

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

You can add my code as follows: theme -> Edit > Search "theme.liquid". Then paste the code before the </body> tag:

    <script>

  const atc=document.querySelector('.product-form__submit')

  const customAddPriceToAtc=()=>{

      atc.innerHTML+=`<span style="margin:0 4px" >-</span><span class="custom-content">${document.querySelector('.price-item--sale').innerText}</span>`

  }

    customAddPriceToAtc()

    document.querySelector('input[type="hidden"][name="id"]').addEventListener('change', ()=>{

          document.querySelector('.custom-content').innerHTML= document.querySelector('.price-item--regular').innerText        

     });

  </script>

You can also customize the css for the added content with the class "custom-content "

If you find my comment useful, please let me know by giving it a Like. Thank you!

Richard - PageFly

[csamer]

It worked perfectly! Thank you @PageFly-Richard 

[mttp]

Hi Richard,

Your code is definetly works BUT when I hide or remove Pricing block, it's not shows the price on the 'add to cart' button.

I want to hide or remove it because I wanted to show the price just on the add to cart button.

Can you fix this too? Thanks.

[robpizzo]

I've been trying to figure this out for days now, and your solution work. Thank you so much!

[DavePSL]

Hi Richard, Can you advise if we can use this code to include the variant (or product) price within the Add to Cart button in Local theme. 

[elnfhr]

This works, sort of 🙂

It needs a double click to update the price if the variant prices are different.

It hides if the product price block is hidden 🙃

Any solutions? 🤞

elin