Hide currceny symbol Monto

Hi,

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.

Thanks for any help!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

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.

Thank you! Below is my link :slight_smile:

https://preview.webflow.com/preview/eola-new?utm_medium=preview_link&utm_source=designer&utm_content=eola-new&preview=66673cd3a786a2bc160e38908abfa0fa&workflow=preview

And also my published testversion https://eola-new.webflow.io/

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>

Thank you so much!! I will try that!

Unfortunately, the code removes the whole line, not just the “kr”, but the price including the “kr” is still visible on the product page.

Make sure you’re replacing your existing code, not adding to it.

Yes I did that, still not working

Here’s your old code that’s in your page now.
That’s where the new code needs to go.

Here’s how it looks with my revised code, which I think what you’re wanting?

I can only see it briefly since it immediately changes the currency to my local currency instead.

But hopefully that at least points you in the right direction.

OK! Thanks, that looks right for you, I have to double-check my code, should it be placed in the header or footer?

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

Hi Sara,

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.