Change Currency Display in WooCommerce
WooCommerce is the leading e-commerce solution on the WordPress platform. More people use it than any other plugin or e-commerce suite in the WordPress ecosystem. Out of the box, it can do quite a bit, and there are tons of paid extensions that help you add more robust functionality.
But out of the box, it has a few limitations. Recently, I was asked how you might change the currency display from the standard symbol to a text representation. For example, if for some reason, you wanted to change the dollar symbol ($) to read (USD). Or even (Dollars). Here’s how you make that happen without breaking your payment gateway transactions.
Let’s say you have an e-commerce site where Euros were the base currency. If you have a total of €209.95, it would display with the Euro symbol (€). But you don’t want that — you want this same total to appear as Eur 209.95. How would you do this?
The problem is we want to swap out a default currency symbol for a textual representation of our symbol. At the same time, we don’t want to screw up our payment gateway transactions. We only want to swap out the symbol that the customer sees.
We can use a filter hook on the function woocommerce_currency_symbol
and replace it with a custom function that allows us to change the existing currency symbol.
/**
* Change currency display in WooCommerce
* Put this in your functions.php file
*
*/
add_filter('woocommerce_currency_symbol', 'change_existing_currency_symbol', 10, 2);
function change_existing_currency_symbol( $currency_symbol, $currency ) {
switch( $currency ) {
case 'EUR': $currency_symbol = 'Eur '; break;
}
return $currency_symbol;
}
In this function, the case is the text symbol for the currency that the payment gateways see. The currency symbol variable is what we want to change the display of the currency symbol into.
In this case, we are changing the Euro symbol into “Eur ”, but you can replace this with whatever currency you need to. (i.e. USD would be the case for US Dollars, AUD would be Australian dollars, etc.)
How Do I Change More Than One Currency Symbol in WooCommerce?
To change multiple currency symbols, add extra lines to this WooCommerce function. Here is how you do that.
/**
* Change multiple currency symbols in WooCommerce
* Put this in your functions.php file
*
*/
add_filter('woocommerce_currency_symbol', 'change_existing_currency_symbol', 10, 2);
function change_existing_currency_symbol( $currency_symbol, $currency ) {
switch( $currency ) {
case 'EUR': $currency_symbol = 'Eur '; break;
case 'USD': $currency_symbol = 'Dollars '; break;
case 'AUD': $currency_symbol = 'Aust Dollars '; break;
}
return $currency_symbol;
}
Hi John,
Unfortunately this didn’t work for me
It did nothing, even after deleting all my caches.
I don’t know why?
I just want to change the symbol in the cart and checkout.
Not in the (normal) shop.
I don’t know if this is possible and if this is the right code for this?
Until now it didn’t do anything.
Nevertheless a big thank you for trying to help!
Cheers,
Robbert
Hi Robbert:
I tried this on a couple of different installs of WooCommerce, and it worked for me, both on the Shop, along with Checkout and Cart pages.
Be sure this is going in your functions file. Not sure what else could be going on here without more information.
Thanks,
John
Hi John,
Now it works!
Thanks. I don’t know why it was not working.
Tried again and it works like a charm!
Is it also possible to have only one currency symbol changed??
I mean only in one place in the Cart.
WINKELMAND TOTALEN
Winkelmand Subtotaal eur 149.00
VERZEND- EN VERWERKINGSKOSTEN Gratis verzending
BESTELTOTAAL eur 149.00 (Inclusief eur 25.86 BTW) => Only this one/line changed?
It is the one on the Cart page on the line of ORDER TOTAL (English version).
If that is possible it would be perfect…
I am really learning with your blog.
Posted it already on twitter and Linkedin for you.
Thanks,
Thanks for sharing my posts with your network, Robbert. I can’t tell you how much I appreciate that. To answer your question — there probably is a way to change just the currency symbol on the Total in the Cart and Checkout, but it is not simple cut and paste.
It would likely require copying the templates that control those displays into your theme folder correctly, writing a new function, and replacing it in the templates. After staring at WooCommerce source code and this page ( https://support.woothemes.com/hc/communities/public/questions/201446023-overriding-function ) and trying different approaches, I still couldn’t seem to get this to work the way you asked about, and I threw in the towel.
This one seems to be more troublesome than other modifications. Perhaps I will come back to it in the future, if I have time.
Thanks,
John
Thanks. For now I just increased the size of the currency symbol. Untill I hopefully learn how to change just this one.
Thanks for trying!
Decreased*
please help me. I have a beginner. I am facing a problem recently running a website. I have deal in PKR but 2check out works in USD. How to convert automatic PKR to US. I have use WooCommerce WordPress.
Screen Shot : https://scontent-cdg2-1.xx.fbcdn.net/hphotos-xpt1/v/t35.0-12/12019284_500749216759069_1924885223_o.jpg?oh=00a29ed4edc55001b55b61baccb6089d&oe=55FBBB63
Hi Affan:
It sounds like you want to do two things that the Khaadi website is doing: use Pakistani Rupees (PKR) as a base currency, and be able to show the conversion into US Dollars (USD).
It doesn’t look like WooCommerce supports PKR in this version without adding additional code.
Your best course of action would be to use the Currency Converter Widget, found here: http://docs.woothemes.com/document/currency-converter-widget-2/ .
This extension costs $29 USD for one site, but it will allow you to add PKR as a base currency, and let people pay in US Dollars at checkout.
If you use this extension, you’ll have to add PKR to the currencies following the instructions on the above page. Please note: customers will still be paying in whatever the base currency of your store is set to, whether that is USD or PKR. Customers will see what the exchange rate is before checkout.
The full list of supported currencies in this extension are available here: http://openexchangerates.org/api/currencies.json
Thank you so much for helping me, thank you so much John Locke 🙂
Hi,
I need to separate out which dollar was selected in my current website, I have got 2 of them USD and CAD, now in admin, I am not able to make out which dollar was selected.
Could you please help?
Thanks.
Regards.
Sure thing, Archit. Login to WordPress, and look on the left hand menu under WooCommerce > Settings. Scroll down to the Select Currency option, and you can see if you selected Canadian or US dollars.
I happened upon your solution for changing the currency display in WooCommerce as I need to indicate in my site that we sell in CAD.
Could you please answer a couple of questions for me?
Is this snippet added to the WooCommerce plugin functions.php or the theme I am using functions.php? Then, where would I add it exactly? In a specific place or just at the beginning of the file.
Thank you for your help.
Hi Tina:
This code snippet would go into your regular
functions.php
file. It’s meant to override the default plugin settings, so you can keep the plugin up to date without worrying.Thanks,
John
Hi John:
Thanks for your post. Pretty helpful.
I need to change the currency’s CSS as I want to have the font-size / color of the currency symbol different from the price. WC comes with
.span.amount
only, so it would change the whole string of price + currency.Have you got an idea for me?
Thanks, Tom
Hi Tom:
You’d need to create a custom filter to alter how WooCommerce outputs the price amount. If you need to target just the currency symbol with CSS, you could wrap it in a
span
and then target it.You can use the code on this page, and then alter it just a bit to come up with this:
You can then target the CSS class
currency-symbol
to put in your custom styling.Hello there, thanks for the post, I just have some question. I am using the currency (Macanese Pataca) and in WooCommerce the symbol appears as a “P”, I want to change it to “MOP” or “$”, but I don’t know what I am doing wrong, here is what I added in the functions.php:
Thank you
Ok, got it right now, thanks anyway:
Glad you got this to work, Ignacio. 🙂
Hi John. How are you?
I have a quick question about this:
https://www.lockedownseo.com/change-currency-display-in-woocommerce/
I understand your solution, but where should I add it…? I meant in which section of the PHP functions file…
Regards,
Americo
Hello Americo:
You can add this to the very end of your
functions.php
file, before the closing PHP tag.If you plan on adding more WooCommerce functions, you should consider keeping those together in the
functions.php
just so you can access them easily.Thanks,
John
My pleasure, Affan!
Hey John,
Im facing an issue with my website where my currency “Omani Rial” is defaulted to an arabic symbol “ر.ع” and its causing some layout problems on my website. I would like to change this to “OMR” which is usually how the currency is noted but for some reason my functions.php isnt doing anything with the code I’m pasting in. I believe it has to do with the lack of arabic support in plain text code fields. Is there any sort of suggestion you may have that can help me with this without impacting core template or core plugin files?
Hi Hassan:
There are a couple of plugins on the WordPress repository that you can check out, though it look like they are not being actively maintained.
https://wordpress.org/plugins/woocommerce-arabic-currencies/
https://wordpress.org/plugins/woocommerce-arabic/
I would experiment with these on a developmental or staging site first.
If these do not accomplish what you need, you can manually create a translation file, and there is more information on that here:
https://docs.woocommerce.com/document/woocommerce-localization/
Hi John,
Your solution is good, but just I need something a little bit different. I need to switch the currency symbol, but I need to do it in a single product. In the admin when I create the product, I want to decide if the price showed of that specific product will be for example EURO or $, because some products are in dollars and other in euros. I don’t need the chart because the site will be catalog only, not a real shop.
Can you help me ?
Thanks,
Dome
Hi Dome:
What you can do is create a specific WooCommerce product category, and put any items that need to have a list price with Euros in that product category.
You will also need to add this code snippet to your
functions.php
file. Use the product category slug instead of the slugspecial-currency-category
in your code snippet.PLEASE NOTE: This will work for your particular situation, because you do not have a live store. You are using WooCommerce for a static catalog.
If someone were to use this code snippet as a currency switcher, keep in mind it will not perform accurate currency conversions, such as USD to EUR, or Euros to Dollars. It merely changes the currency symbol.
Let me know if this solves your problem, Dome.
Thanks,
John
Hi John,
glad to see more people are struggling with this problem…. I have the $ symbol in webshop and category pages, while I need this to be € symbol.
Now I tried your code and pasted it at bottom of functions.php, but as far as I can see no result?
The text I pasted is:
Hi Jan:
The code in this article is meant to change the currency symbol into text (such as ‘€’ into ‘EURO’). The
case
part of this code snippet has to match up to the 3-digit code for the currency the shop is set to. (USD, EUR, DKK, GBP). This is part of why you are seeing no changes.It looks like your shop might have the base currency set as US Dollars instead of Euros. We will want to change that.
In the admin area, go to WooCommerce > Settings > General > Currency Options. Make sure your shop is set to Euros instead of dollars.
The rest of the shop should change from ‘$’ to ‘€’, and you should not need the code snippet.
It is important to set the base currency for the store in Settings, and not try to (only) change the base currency symbol without changing the actual base currency. Otherwise, the currency conversions will be inaccurate.
Let me know if you have this set correctly.
Thanks,
John
Hi John, so glad someone is responding so soon….So first I will delete the lines I put in
functions.php
…But from the start the currency was set to €, so this could never have been the cause.BTW strange thing, that I got an answer on the WP forum of somebody, telling me the € is showing….
So I called a friend, he took a look, but he does have $ shown in category pages. Also strange that when you click a product, then it does show € okay.
This is huge for me. It should be working and online by the 1st of November, when my outdated Prestashop-site will be offline.
I am afraid to mess up the whole site, but could this be an answer?
https://docs.woocommerce.com/document/add-a-custom-currency-symbol/
Hi Jan:
That is strange that it is showing the $ symbol in category pages, but the correct Euro symbol on single product pages. And your shop is set to EUR for the currency.
Let’s try an experiment. Tell me what happens if you use the following code snippet in
functions.php
. (If you have a similar function in there now, replace it with this one or code comment it out for now).Ok, I will try.
Did you check the website? This is what I tried yesterday…
add_filter(‘woocommerce_currency_symbol’, ‘add_my_currency_symbol’, 10, 2);
function add_my_currency_symbol( $currency_symbol, $currency ) {
switch( $currency ) {
case ‘EUR’: $currency_symbol = ‘€’; break;
}
return $currency_symbol;
}
Seems none of the solutions work…
Do hope we can solve the problem though.
I did look at your website, Jan, and I saw the same behavior that your friend reported. The code you tried yesterday, in the comment directly above this one, is basically what WooCommerce does on it’s own. The other snippet is meant to change instances of the USD to EUR, but if you have your shop set to EUR (€), then the USD ($) symbol shouldn’t be appearing at all.
Without looking inside of your website (not just at the outside), it will be impossible to tell exactly what is going on.
What I would recommend is using a WordPress maintenance service, like WP-Tonic, ConciergeWP, WPBuffs to diagnose this problem and fix your issue. This would the most economical way to get help for a specific problem.
Hi again John,
I really wish to thank you for taking time to look into my problem. It occured to me that this happened after updating my theme, and as all solutions try and change the functions of the theme, I managed to find an older version of my Tessaract theme. Just deleted the theme through FTP, and put back the old version. This did the trick !
Hi Jan:
I very happy to hear you found a resolution to your problem. Best of luck!
🙂
John
Hello John,
I am a bit new in this whole coding and I have one important question.
If I’d like to change more than one currency symbol, what kind of code exactly do I use?
Any advice would be appreciated! THANK YOU:)
Hi Maja:
If you need to change more than one currency symbol in WooCommerce, add the extra lines to the function for each symbol. See below:
Hope that helps!
Thanks,
John
Hi,
I have selected currency as Pakistani Rupees (Rs) from the WooCommerce settings. When I visit the shop page, it shows Indian Currency Symbol, (check this link: http://www.ccm.t6ve.com/?product=little-black-shirt).
I want it to show as Rs.40.00. Can you please tell me how may I be able to correct this issue. Because there is no issue with WooCommerce, it’s an issue in the theme.
Hope to hear from you.
Thanks.
Hi Shaz:
Like you pointed it out, it’s more than likely a problem with the theme itself. It looks like you are using a free theme, which may have WooCommerce override template files rolled into it.
Many free or low-cost themes are not supported well and may fail to keep up with changes in WooCommerce.
I would try a different theme (that does not have WooCommerce already bundled into the theme) and see if that solves the problem.
If so, you now know the original theme is the root of the problem.
Thanks,
John
Hello,
Thank you very much, it helped me..
But I have a question,
I’m using the AED currency, and I couldn’t put the position in the right, always shows on left.
I tried from the Admin once right, once left position, but it shows the currency always on left.
How can I change the position to right?
Thank you
Hi Mazen:
The first thing I would do is try some CSS. Something like this might work (add to your stylesheet):
– John
Hello John,
Wow, Thank you very much, it works 100%.
I really appreciate your help.
Kind Regards
Mazen
Is there any way to change the pricing on display? I am trying to do going through a tutorial but having an unknown error when I run the code. Here is the code:
Hi Alvina:
This code snippet looks like it works. It adds those words after the displayed price. Though I had to change the curly apostrophes (‘ and ’) to the single grave (‘) character for it to work.
Some software (like Microsoft Word) will change the default grave mark apostrophe to curly single quotes, so watch out for that.
Thanks,
John
Hi John, thanks so much for this amazing tutorial and taking the time to answer the comments! In Austria, it’s more common to write “EUR 20,00” as opposed to “20,00 EUR”. Do you see a way to change the position? Only thing I can come up with (but probably could never implement) would be changing the code in WooCommerce that defines how to price is displayed and swap the position of the currency and the amound directly there. But that would probably mean whenever I update WC, this “fix” would be reset. I’m unfortunately not very familiar with the hook system, so maybe is there any way to implement this in a more maintainable way?
Thanks so much again & KR
Daniel
Hi Daniel:
This code snippet uses the hook system. If you want to swap the position of the currency and the item price, you might use CSS to target the currency symbol. I believe you can position it to the left using this:
.woocommerce-Price-currencySymbol { float: left; }
. Add that to thestyle.css
and see if that produces the result you’re looking for.Thanks,
John
Hi I would like to use this code but unfortunately it doesn’t work. I have a category call “Countries” and a sub-category call “United Kingdom”. May I know how should I write in the ‘special-currency-category’? I only can see slug, and couldn’t find product slug….
I wrote: ‘countries-united-kingdom’ and it doesn’t work. Appreciate your advice. Thank you
Hi Chris:
You may not be able to pass the function you want as a parameter. I don’t know if there’s an existing plugin that might do what you want, but something like this might get you closer to your goal: Currency Switcher for WooCommerce.
When I float right the currency – USD, there are no spaces after the price so it shows up as $3600USD. How to ad a space in-between?
Hi Chad:
You should be able to use this in the CSS to create space between the amount and currency symbol.
If WooCommerce ever changes the name of the CSS class on the currency symbol, you’d need to make the change in these override styles.
Thanks,
John