I´ve added Monto to my e-commerce site and in the Price formatting settings, it was necessary to add currency symbol+amount+currency code for it to work. In my Swedish currency, it looks weird to write the price in “kr Amount SEK” so I wonder if someone has a code to hide the currency symbol? I´ve reached out to Monto, and hiding this in their settings is not possible.
Hi Sara, can you share your designer readonly link and a published site link, both to the specific page where you’re needing this? I’d need to see your code and setup in order to tell you if JS or CSS can solve your problem.
I don’t know what impacts Monto has, but the script you were trying to create almost works.
Try this;
<script>
// Hide the 'kr' currency symbol (only)
document.addEventListener('DOMContentLoaded', function() {
const priceElements = document.querySelectorAll('.product-price-text-home');
priceElements.forEach(element => {
const words = element.textContent.split(/\s+/); // Split by one or more whitespace
if (words[1] === "kr") { // Check if the first non-space word is "kr"
words.splice(1, 1); // Remove the "kr"
}
element.textContent = words.join(' ').trim(); // Join the words back together and trim any extra spaces
});
});
</script>
This is what happens when I paste the code, tried both on the head och footer and it´s the same problem, it removes the first number in the price instead of kr
The code I sent just replaces your current code, so wherever that is will work fine. I think you had it in the before-/body section on certain pages or perhaps site-wide.
That could happen if your original script is still be in the page, especially if you moved it to the before-/head section. In your original script, you’re deleting the first word in the pricing text without checking what it is, so if it runs before Monto’s scripts, then it would delete the first part of the price before Monto prefixes it with the currency symbol.
I felt that’s likely to break the UX for other currencies, so the script I gave checks specifically for “kr”. It won’t remove anything else. Note the IF statement in the middle;
<script>
// Hide the 'kr' currency symbol (only)
document.addEventListener('DOMContentLoaded', function() {
const priceElements = document.querySelectorAll('.product-price-text-home');
priceElements.forEach(element => {
const words = element.textContent.split(/\s+/); // Split by one or more whitespace
if (words[1] === "kr") { // Check if the first non-space word is "kr"
words.splice(1, 1); // Remove the "kr"
}
element.textContent = words.join(' ').trim(); // Join the words back together and trim any extra spaces
});
});
</script>
In your current site though I don’t see the script at all- it should appear where the 1 is; https://eola-new.webflow.io/
Note I haven’t researched and tested Monto and I don’t know what features or API it might have. Normally we’d want to take extra measures to ensure that this script runs after Monto’s scripts are done. But this approach is working reliably for me as an injected script.
If you needed it to wait longer, you could add a timer, but then you’d see the kr briefly before it’s removed.