Jump to content

How to remove trailing decimal .00's from product pricing

Recommended Posts

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Been there too @Brandon!

The Community team have now imported the old Answers post 👍

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 4 weeks later...

Thanks @brandon and @paul2009 for this code! It works perfectly when I first save it in the foot code injection, but as soon as I refresh a page, it reverts to the normal pricing with decimals again. I wonder if it's because our prices are in £ rather than $. I've tried swapping the currencies out in the code but I really don't know what I'm doing! Any ideas how I could get it to work?

Here's an example of what I'm working with: https://ellishampers.co.uk/hampers/magnificent-n8-the-marvel

 

UPDATE:

Just checked that the above linked worked and the decimals had disappeared! Tried in incognito and they came back again. It seems that if I refresh the page the code works, but the first time I load it the decimals are always there. In normal browsing (not incognito), the same applies but every time you load the page, you also see the decimals briefly before they disappear. Worth putting the code in the header for this or is that something that could go wrong?

Thank you! 😊

Edited by EllisCo
Link to comment

The code was written in 2016 and like many of the older code samples provided on forums, it therefore understandably doesn’t take into account the introduction of Ajax on many Squarespace templates since that time. Turning off Ajax in Site Styles will fix this but it’s just a workaround. A better solution is to replace

(function() {

with

window.Squarespace.onInitialize(Y, function() {

If like me you’d like to understand why, I wrote an explanation here: https://sf.digital/squarespace-solutions/why-doesnt-my-code-work-until-i-refresh-the-page

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 3 weeks later...

Hi, thank you very much for this solution, I've found this to work great for me as well apart from a single instance when I choose two variables of a product to add to cart - such as a size and a color. When two variables are chosen, suddenly the two decimals appear again. Any idea why that might be and if there's a way to solve this?

Link to comment
  • 3 months later...
  • 11 months later...
  • 5 months later...

Hi - I am wondering if it is possible to switch between variants?

I want anything with trailing double decimals to display without them - for example $250.00 should display as $250. But I still want to keep my trailing decimals on my little numbers - for example I want $1.50 to display as that - not $1.5

Is that possible or an impossibility?

 

I have used the footer injection here - can it be edited to support this?

<script>

window.Squarespace.onInitialize(Y, function() {

       var prices = document.getElementsByClassName('sqs-money-native');

   var thisPrice;

   var i, I;

   for (i=0, I=prices.length; i<I; i++) {

       thisPrice = prices[i];

       thisPrice.innerHTML = thisPrice.innerHTML.replace(/(\.[0-9]*?)0+$/, "$1").replace(/\.$/, ""); //http://stackoverflow.com/questions/1015402/1015434#1015434

   }

   })();

Link to comment

@misimo

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 months later...

I'm also trying to remove decimals, I've tried a code that was linked here (see below) which has worked mostly, however it turns 11.90 into 11.9 and so on. I don't want to delete all the zeros. Can anyone help?

<script>
   (function() {
       var prices = document.getElementsByClassName('sqs-money-native');
   var thisPrice;
   var i, I;
   for (i=0, I=prices.length; i<I; i++) {
       thisPrice = prices[i];
       thisPrice.innerHTML = thisPrice.innerHTML.replace(/(\.[0-9]*?)0+$/, "$1").replace(/\.$/, ""); //http://stackoverflow.com/questions/1015402/1015434#1015434
   }
   })();
</script>

Link to comment

@saskia14

The code you have there won't work as it doesn't take into account some important changes to how SS now works.

Please see the following.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 7 months later...
On 4/21/2021 at 3:43 AM, irenerodriguezca said:

For 7.1 version I found https://www.ghostplugins.com/steps/reformat-product-price-71-version

I just gave this a go, and it deleted everything after the decimals. Would you know how to modify it to only delete decimal places if they are all 0s? there are some prices on my site that are priced like 3.50 or 4.50 etc, and i would like to keep the decimal places for those.

 

Link to comment
10 hours ago, NinaNice said:

Anyone any idea on why this is?

It appears the code wasn't designed to deal with french formatted numbers. The original number format is 1 000,00 €. The code first removes the comma then removes .00 but as the original number didn't have a .00, nothing happens.

I have pointed to my Store Price Change in this thread in several posts. It should be able to handle your need. Although my code is not specifically language aware it does provide fairly flexible text changing capabilities.

The following search replace text settings should get you started.

        // search text and replacment text example line follows
        
        // '[enter search text here between single quotes]' : '[enter replacement text here between single quotes]',
        
        '/\\s*(.+)\\s*/' : '$1', // trim white space
        
        ',00 €' : ' €', // remove Deutsch and Français decimal
        
        '.00' : '',  // remove English and Nederlands decimal
        

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 7 months later...

Hi! I just used a code from here - https://www.ghostplugins.com/steps/reformat-product-price-71-version

it works great, but I would like to add space between the $ sign and the amount. So instead of $1000 would be $ 1000. Does anyone have a clue how to do it? 

 

pasting the code below: 

<!-- Reformat Product Price (15,000.00 -> 15000) -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<script src="https://cdn.jsdelivr.net/npm/@ryanmorr/ready@1.4.0/dist/ready.umd.js"></script>
<script>!function(){function reformatPrice(price){var priceClone=price.cloneNode(!0);function reformat(){priceClone.innerHTML=price.innerHTML;var target=priceClone.querySelector(".sqs-money-native")||priceClone,textNode=priceClone.querySelector(".sqs-money-native");target.textContent.length>1?target.textContent=format(target.textContent):textNode&&(textNode.textContent=format(textNode.textContent))}function format(text){return text.replace(",","").replace(/\.\d{2}/,"")}function watch(){var observer;new MutationObserver(reformat).observe(price,{childList:!0})}priceClone.classList.add("product-price-clone"),price.parentNode.insertBefore(priceClone,price.nextElementSibling),price.style.display="none",reformat(),watch()}ready(".product-price:not(.product-price-clone),.original-price:not(.product-price-clone)",reformatPrice)}();</script>
<!-- end Reformat Product Price -->

 

thanks in advance! 

Kama

Edited by kama
Link to comment
2 hours ago, kama said:

but I would like to add space between the $ sign and the amount. So instead of $1000 would be $ 1000. Does anyone have a clue how to do it? 

The code you are using is not designed to do what you want.

My Store Price Change code is more flexible and can do the job.

Use the following in the code.

        // search text and replacment text example line follows
        
        // '[enter search text here between single quotes]' : '[enter replacement text here between single quotes]',
        
        '.00' : '', // remove zero decimal from price
        
        '$' : '$ ', // add space after $
        

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 5 months later...

@shanagann I think if you go into the plugin code and remove this part

replace(",","")

see if this edited version works

<!-- Reformat Product Price (15,000.00 -> 15000) -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<script src="https://cdn.jsdelivr.net/npm/@ryanmorr/ready@1.4.0/dist/ready.umd.js"></script>
<script>!function(){function reformatPrice(price){var priceClone=price.cloneNode(!0);function reformat(){priceClone.innerHTML=price.innerHTML;var target=priceClone.querySelector(".sqs-money-native")||priceClone,textNode=priceClone.querySelector(".sqs-money-native");target.textContent.length>1?target.textContent=format(target.textContent):textNode&&(textNode.textContent=format(textNode.textContent))}function format(text){return text.replace(/\.\d{2}/,"")}function watch(){var observer;new MutationObserver(reformat).observe(price,{childList:!0})}priceClone.classList.add("product-price-clone"),price.parentNode.insertBefore(priceClone,price.nextElementSibling),price.style.display="none",reformat(),watch()}ready(".product-price:not(.product-price-clone),.original-price:not(.product-price-clone)",reformatPrice)}();</script>
<!-- end Reformat Product Price -->

 

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment
31 minutes ago, jaeveedee said:

@shanagann I think if you go into the plugin code and remove this part

replace(",","")

see if this edited version works

<!-- Reformat Product Price (15,000.00 -> 15000) -->
<!-- Author: Dmitry Kiselyov @_dmitrykiselyov -->
<script src="https://cdn.jsdelivr.net/npm/@ryanmorr/ready@1.4.0/dist/ready.umd.js"></script>
<script>!function(){function reformatPrice(price){var priceClone=price.cloneNode(!0);function reformat(){priceClone.innerHTML=price.innerHTML;var target=priceClone.querySelector(".sqs-money-native")||priceClone,textNode=priceClone.querySelector(".sqs-money-native");target.textContent.length>1?target.textContent=format(target.textContent):textNode&&(textNode.textContent=format(textNode.textContent))}function format(text){return text.replace(/\.\d{2}/,"")}function watch(){var observer;new MutationObserver(reformat).observe(price,{childList:!0})}priceClone.classList.add("product-price-clone"),price.parentNode.insertBefore(priceClone,price.nextElementSibling),price.style.display="none",reformat(),watch()}ready(".product-price:not(.product-price-clone),.original-price:not(.product-price-clone)",reformatPrice)}();</script>
<!-- end Reformat Product Price -->

 

Thank you! That did the trick!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.