B-219 Sec-55 Noida, India

Changing the Currency Select Menu in Magento to a List with Flags

ecause a regular select menu can’t have images or background images applied to it (except in newer versions of Firefox) you need to use another method by changing a phtml file, css and a touch of JS to make it a touch better.

Step 1: Open /app/design/frontend/default/{YOUR THEME}/template/directory/currency.phtml and change the <select> and everything in between for this:

    <?php foreach ($this->getCurrencies() as $_code => $_name):
    $topoption = ‘<li style=”background-image: url(‘/skin/frontend/default/{YOUR SKIN}/images/flags/’.$_code.’.png’)”><a href=”‘.$this->getSwitchCurrencyUrl($_code).'”>’.$_name.’ – ‘.$_code.'</a></li>’.”n”;
    $otheroptions .= ‘<li style=”background-image: url(‘/skin/frontend/default/{YOUR SKIN}/images/flags/’.$_code.’.png’)”><a href=”‘.$this->getSwitchCurrencyUrl($_code).'”>’.$_name.’ – ‘.$_code.'</a></li>’.”n”;
    echo $topoption.$otheroptions;

This makes the options into a list. It also does a few other things – adds the selected class to the chosen currency and moves it to the top each time.

Step 2: You need some flags. Used these (http://graffletopia.com/stencils/355) , but you need to rename the ones you use to match the currency code (e.g. USD.png GBP.png etc.). The upload them to /skin/frontend/default/{YOUR SKIN}/images/flags/ (to match the php above). You will also need to make a downward pointing arrow for the select menu (see css below);

Step 3: You need to add these styles to your css file:

    .block-currency ul{
    padding: 3px;
    background-color: #FFF;
    border: 1px solid #333;
    background-image: url(‘../images/selectArrow.gif’);
    background-position: right top;
    background-repeat: no-repeat;

    .block-currency li{
    background-repeat: no-repeat;
    background-position: left center;
    text-align: left;
    padding-left: 20px;
    display: none;
    font-size: 11px

    .block-currency li:hover{
    background-color: #ebecea;

    .block-currency li.selected{
    display: block;

    .block-currency ul:hover li{
    display: block;

    .block-currency li a{
    text-decoration: none;
    color: #333;

This should do everything you need for it to work. To perfect it there is one final (optional step).

Step 4 (optional): After choosing a currency and before the page reloads the item will revert back to the previously selected item – this might be off putting for a user. The best way to resolve this was to use a bit of JQuery (my framework of choice).

    $j(“.block-currency a”).click(function(){
    $j(“.block-currency li”).removeClass(“selected”);

All this does is after choosing an item the selected class is removed from all li’s in the container and applied to the one just clicked.

(Visited 35 times, 1 visits today)

Leave a reply