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:

    <ul>
    <?php foreach ($this->getCurrencies() as $_code => $_name):
    if($_code==$this->getCurrentCurrencyCode()){
    $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";
    }
    else{
    $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";
    }
    endforeach;
    echo $topoption.$otheroptions;
    ?>
    </ul>

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");
    $j(this).closest('li').addClass('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.