How to add Currency selector to Magento’s header

Featured Image

Since Magento has built in functionality for currencies, it shouldn’t be too hard to create custom currency selector and put it to the header. You might say this tutorial is for beginners, since it’s pretty much straightforward.

You might have noticed the “Currency Setup” tab in Magento’s Administration under “System->Configuration” menu. There you should select default site currency, and besides that, all currencies you want to support.

Here’s a screenshot of that tab:

After that, you should go to “System->Manage Currency Rates” and set rates for currencies you’ve chosen before. You can use Webservicex to import currency rates from Webservicex service. Here’s how it looks like:

And now, after you’re done with initial setup, let’s go further with modifications to make that output shows in the header. First thing you should do is to create a new template file and put it under “YOUR_PACKAGE/YOUR_THEME/template/currency/currency.phtml”. Put in this content:

<?php if($this->getCurrencyCount() > 1): ?>
<div class="form-language">
    <label for="custom-currency-selector"><?php echo $this->__('Your Currency:') ?></label>
    <select onchange="window.location.href=this.value" name="custom-currency-selector" id="custom-currency-selector">
        <?php foreach ($this->getCurrencies() as $_code => $_name): ?>
        <option value="<?php echo $this->getSwitchCurrencyUrl($_code)?>"
            <?php if($_code == $this->getCurrentCurrencyCode()): ?>
                selected="SELECTED"
            <?php endif; ?>>
            <?php echo $_code ?>
        </option>
        <?php endforeach; ?>
    </select>
</div>
<?php endif; ?>

You can put in line #10 either $_name or $_code, depending what do you want to show in your currency selector. Here you can see how these changes affect to the selector.

Next thing you should do is to tell Magento which template should be used for the selector. You should create “YOUR_PACKAGE/YOUR_THEME/layout/local.xml”, or just append the following content if you already have this file in your theme.

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="header">
            <block type="directory/currency" name="custom_currency_selector" template="currency/currency.phtml"/>
        </reference>
    </default>
</layout>

And finally, there’s one more thing you’ll need to do to make the template visible on frontend, Open “YOUR_PACKAGE/YOUR_THEME/template/page/html/header.phtml” (or create new file if there isn’t any) and add the following content:

<div class="header-container">
    <div class="header">
        <?php if ($this->getIsHomePage()):?>
        <h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
        <?php else:?>
        <a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>
        <?php endif?>
        <div class="quick-access">
            <?php echo $this->getChildHtml('topSearch') ?>
            <p class="welcome-msg"><?php echo $this->getWelcome() ?> <?php echo $this->getAdditionalHtml() ?></p>
            <?php echo $this->getChildHtml('topLinks') ?>
            <?php echo $this->getChildHtml('store_language') ?>
            <!-- START How to add Currency selector to Magento's header -->
            <?php echo $this->getChildHtml('custom_currency_selector') ?>
            <!-- END   How to add Currency selector to Magento's header -->
        </div>
        <?php echo $this->getChildHtml('topContainer'); ?>
    </div>
</div>
<?php echo $this->getChildHtml('topMenu') ?>

After this, if you save everything, clear the cache and reload the page, you should see something like this:

Note!

By default, Magento is configured to show default currency selector if there is more than one currency set up. You can see that below:

To disable default currency selector you need to add

 <remove name="currency" />

to default handle in your layout.xml. Then, your local.xml would look like this:

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="header">
            <block type="directory/currency" name="custom_currency_selector" template="currency/currency.phtml"/>
        </reference>
        <remove name="currency" />
    </default>
</layout>

I hope this helped someone, cheers!

Info!

This article was revised on Dec 14, 2012. You will notice that some of the comments are older. This is because the original article was posted in 2011 by Mladen Lotar.

Interested in hiring us?

Have a chat with us. You would be surprised how small changes can make your business even more successful.


40 comments

  1. Thank you so much. I really needed this. Awesome post with detailed explanation for beginners.

    Can you guide me how can I show country flags too along with the currency code or currency name in options tag?

  2. Hi bro. thanks for great stuff actually when i followerd all you steps for my one website at http://www.socialmediaexperts.co.in it worked like charm as i am using magento’s blank theme for it. but my other site at http://www.socialmart.us only shows two currencies. i have added same currencies for both websites but this site uses custom theme. but than it wont suppose to show two currencies also if anything was wrong. please do advice. and thanks for the nice article.

  3. hi, i added this currency selector to my website, but my home page products won’t change the currency whatever the currency i chose, it always displays the default USD, but the category list and product description page are normal.

    Please help me to solve this problem.

  4. Something’s weird. I followed all the instructions, but my dropdown appeared in the layered navigation field inside my category pages. Weird huh?

  5. Not working currency conversation on home page but another on working.
    what is i don’t know so you have any idea so please revert asap

  6. “It’s not working on Absolute theme. It reloads the page, but the currencies are not changing.”

    Same here with other Theme. U can see it load but after the reload the old/base currency is set again.

  7. It’s not working on Absolute theme. It reloads the page, but the currencies are not changing. :(

  8. works like a charme!

    Is it also possible to add an google analytics event tracker in the code?

    It would be very interesting to know if te currency selector is being used actually.

  9. Dear Friend,

    I am using magneto 1.7.0.2 and Themeforest shopper theme v 1.1 which is available to download, I am updating my site to this theme right now I am working on my localhost xampp on windows xp.

    The problem i am facing is this that i tried to set up PayPal payment option on the admin panel as paypal standard but paypal option is not visible on the payment option in the theme where we do payment.

    I have integrated cc avenue and it is working fine as i have to made changes after downloading the kit form the cc avenus as per the pdf document provided by them.

    There are other option which are visible in the front end when i select yes option on the admin panel like :- saved cc etc but only pay pal is not visible in the front.

    Need help as i am trying to change to this theme of shopper by this month of may.

    Regards,
    Abhishek

  10. i choose 6 allowed currencies but displays only 3 Euro,Indian Rupee and US dollar Base currency is Indian rupee can anyone help ?.

  11. hi, i added this currency selector to my website, but my home page products won’t change the currency whatever the currency i chose, it always displays the default USD, but the category list and product description page are normal. Anyone knows how to resolve?

  12. I had applied currency converter to my site. Iwas working very well, But it create a very huge problem.

    (1) A Canadian client purchase ab book in Canadian 4.98 Dollar and he pay with CCavaenu payment gateway (INR account)
    It take 4.98 Rupees

    Could it be possible that at and of purchase amount shows in Rupees or whichever Default Display Currency

    Client only evaluate but pays in Default Display Currency

    Plz reply soon , bcz I disabled my currency converter but i need to have it

  13. Thanks for the auspicious writeup. It if truth
    be told was once a amusement account it. Glance
    complex to more introduced agreeable from you!
    However, how could we be in contact?

  14. I have two sections in magento.
    1 is the default section and the other ias an additional section. Here i have enable currency conversion but i would like to help me out if i can enable the currency conversion for any one of the sections.

    please suggest.

  15. Hi, How can i close the currency switcher on left column once it is appear on the header, or how can i set switcher on the left column (including all page, e.g home, and all product page and CMS page)

  16. @Igor (My name is also Igor) ;),

    I managed to do that, i.e. have flags as a “switcher”.

    Instead of me explaining it for you step by step, you will find the answer you are looking for at following page; http://www.e-commercewebdesign.co.uk/blog/magento-tutorials/custom-magento-currency-switcher-in-header.php.

    In newcurrency.phtml I’ve changed

    from:

    <li><a href="<?php echo $this->getSwitchCurrencyUrl($_code) ?>" title="GBP"<?php if($_code==$this->getCurrentCurrencyCode()): ?> class="selected"<?php endif; ?>><?php echo $_code ?></a></li>

    to:

    <a href="<?php echo $this->getSwitchCurrencyUrl($_code) ?>" title="<?php echo $_code ?>"<?php if($_code==$this->getCurrentCurrencyCode()): ?> class="selected"<?php endif; ?>><img src="http://www.dummiestore.com/skin/frontend/default/default/images/media/currency/<?php echo $_code ?>.png" alt="<?php echo $_code ?>" style="margin-top:1px;" /></a>

    Please note that I have “.png” as the url to my images. This will output the currencycode for each currency, so for an exampel USD will be represented by a flag that has a filname of “USD.png”.

    If you need any help with this, please feel free to contact me! You can see the result at http://www.madlady.se/ and to contact me please send me a message through http://www.madlady.se/contacts.

    I hope it works for you! (:

    Ciao,
    Igor

  17. Hi,

    I need to send a link, already with currency which is different from the base currency (e.g. my base is US$ and I want to send a link with Euro, so people will not need to change currency – but to see it imminently in Euro). Any solution?

    Thanks,
    Ben

  18. Great post :)

    I was wondering if it was possible manually to administrate two different currencies in the admin area – e.g. type in EURO on the danish version of the product, and type in USD on the english version of the product.

    In other words – it seems that Magento only will display one currency in backend at a time.

  19. Hi,

    Do you know how to make currency selector as images of flags by clicking on a particular flag, currency will be switched to the currency of that flag (if you know what I mean). I tried doing it myself, but without a success yet.

  20. Another quick way:

    Just need to paste the line in any template file

    <?php echo $this->getLayout()->createBlock('directory/currency')->setTemplate('directory/currency.phtml')->toHtml(); ?>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.