Jump to content

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

Recommended Posts

  • 3 months later...

Hi,
I've spent ages figuring this out for my site. So thought that you'd like the code too.

1. To remove the decimals from pricing in 7.1. 
e.g. so that £100.00 becomes £100 add the below script to your footer using code injection:

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Selecting the price elements
  var priceAmounts = document.querySelectorAll('.pricing-plan-price-amount');
  priceAmounts.forEach(function(price) {
    var text = price.textContent;
    var updatedText = text.split('.')[0]; // This removes the decimal part
    price.textContent = updatedText;
  });

  // Keeping the billing period text intact
  var billingPeriods = document.querySelectorAll('.pricing-plan-price-billing-period');
  billingPeriods.forEach(function(period) {
    // We don't need to change this, but we include it to avoid accidentally altering it
    var text = period.textContent;
    period.textContent = text;
  });
});
</script>


2. To remove the comma from pricing.
E.g. so that £1,000 becomes £1000 add the below script to your footer using code injection:

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Selecting the price elements
  var priceAmounts = document.querySelectorAll('.pricing-plan-price-amount');
  priceAmounts.forEach(function(price) {
    var text = price.textContent;
    var updatedText = text.split('.')[0]; // Removes the decimal part
    updatedText = updatedText.replace(/,/g, ''); // Removes commas
    price.textContent = updatedText;
  });

  // Keeping the billing period text intact
  var billingPeriods = document.querySelectorAll('.pricing-plan-price-billing-period');
  billingPeriods.forEach(function(period) {
    // No change needed here
    var text = period.textContent;
    period.textContent = text;
  });
});
</script>

Link to comment
  • 5 weeks later...

Hey all, using the code from ghost plugins I got the decimals to go away!

The problem I'm facing is that sale products are showing with strange formatting. For the rug, it looks good, for the pedestal - it has the sale price and original price twice. 

image.thumb.png.e2f0c030179075242395bc059a903210.png
image.thumb.png.29eacc5eade508fd0b871f2dbaa9ef30.png

Link to comment
11 hours ago, abeach97 said:

The problem I'm facing is that sale products are showing with strange formatting.

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

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

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

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

Hello everyone!

I also use this plugin, double the price is displayed for discounted products, on the main page and on the store page and in the product page itself. In addition, on the product page, all products that "you might also like" are displayed with a double price, regardless of whether there is a discount or not.

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

Is there any way to solve this with this code? Please help me

website - https://www.veneramor.com/

 

Screenshot_2.png

Screenshot_1.png

Link to comment
14 hours ago, creedon said:

No. Not as is.

Please see the following.

Let us know how it goes.

It was very hard to understand because I can't code, but I did it!

I noticed that this code does not work when the products are on the main page - not on the store page. Do I need to paste the same code on the main page? Could you tell me how to do this

thank you very much!

Link to comment
  • 2 months later...
On 2/21/2024 at 6:08 AM, abeach97 said:

Hey all, using the code from ghost plugins I got the decimals to go away!

The problem I'm facing is that sale products are showing with strange formatting. For the rug, it looks good, for the pedestal - it has the sale price and original price twice. 

image.thumb.png.e2f0c030179075242395bc059a903210.png
image.thumb.png.29eacc5eade508fd0b871f2dbaa9ef30.png

Is there a solve for this? My site is also displaying the sales numbers like this, and it looks AWFUL, so I immediately removed the code. I can't have this be public. I scrolled on this thread, but it just looks like a couple people say they have the same problem, but no solve for it. Any update? I'd really love to have the clean look of no decimals, but can't use that code if it's going to display sales like this.

Link to comment
On 2/28/2024 at 6:10 AM, Venera said:

I noticed that this code does not work when the products are on the main page - not on the store page. Do I need to paste the same code on the main page?

My apologies for not responding sooner. Somehow I missed the post.

The code is only designed to work on the Store page.

I know of no code that applies this effect to other areas of a Squarespace site.

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
8 hours ago, creedon said:

I provided a pointer to some code a several posts back.

Hey there, thanks for the reply. I'm sorry, I'm confused. I didn't see any solution. I just saw your post that said, "No, not as is." Is there a different post I should be looking at? I'm sorry if I missed it! 🙂

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.