Change text on Add to Cart Button to include a space

[hideandscratch]

I've figured out how to add the product price to my Add to Cart button (using this guide), but it's currently displaying as "Add to Cart$xx.xx" with no space between the "Add to Cart" and "$xx.xx" 

How can I add a space in here?  I figured out how to change the default theme content from "Add to Cart" to "Add to Cart:" to add a colon (or a dash or whatever), but any spaces added after the colon are removed. 

My current code where it calls the text to display looks like this: 

[BSS-TekLabs]

Hello @hideandscratch 
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[topnewyork]

Hi @hideandscratch , kindly share your store URL. Thanks!

[namphan · Accepted solution]

Hi @hideandscratch,

Please change code:

<span class="ezfyButtonPrice">{{ product.selected_or_first_available_variant.price | money }}</span>

=>

<span class="ezfyButtonPrice" style="padding-left: 5px;">{{ product.selected_or_first_available_variant.price | money }}</span>

[hideandscratch]

THANK YOU!!! I knew it was something easy!

[namphan]

Hi @hideandscratch,

If you have any questions, you can contact me directly.
Nice to meet you 😊

[ReturnPrime]

Hi @hideandscratch ,

To fix the issue with the missing space between "Add to Cart" and the price, you can modify the code where the button text is set. Based on your description, the space is likely being removed due to how the code is structured. Here's how you can add a space:

Find the part of your code that sets the button text, which probably looks something like this:

html
 
{{ 'Add to Cart' }}{{ product.price | money }}

To ensure there's a space between "Add to Cart" and the price, modify it as follows:

html
 
{{ 'Add to Cart ' }}{{ product.price | money }}

Notice the space between 'Add to Cart ' and {{ product.price | money }}.

If you're appending the price in JavaScript, you can add the space in the string directly like this:

javascript
 
button.innerHTML = 'Add to Cart ' + productPrice;

Let me know if you need help applying this in your specific theme or setup!

Hyelladi
Return Prime

[BSSCommerce-B2B]

@hideandscratch , you can add after this

this code 

 

It will add a space for your add to cart button