Magento Currency Drop Down and Currency Symbols – Setup Guide

currencydesign

I am new to magento..as per my design I need to change the currency drop down to a Euro and Dollar Symbols or Images which I had created. So I would like to know how I could go for this? I managed to change the language to Country flags but stuck with this currency issue. Please share a light on this.

I also wanted to know how to replace "Add to wishlist" and "Add to Compare" and replace it with the images or icons created by me. Please guide me in this regard and also how to bring "email a friend" as an image or icon in the row of "Add to wishlist" ?
enter image description here
enter image description here
Thanks

Kris

Best Answer

In your Themes template/directory/currency.phtml change the code to this (this is based on the RWD theme):

<?php
/**
 * Currency switcher
 *
 * @see Mage_Directory_Block_Currency
 */
?>
<?php if($this->getCurrencyCount()>1): ?>        
<div class="currency-switcher">
        <label for="select-currency"><?php echo $this->__('Your Currency:') ?></label>

        <?php foreach ($this->getCurrencies() as $_code => $_name): 

            // gets the currency symbol for each currency
            $symbol = Mage::app()->getLocale()->currency($_code)->getSymbol();
        ?>

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

    <?php endforeach; ?>
</div>
<?php endif; ?>

This will look like this: enter image description here

As you can see the magic is done with this line after the foreach statement:

$symbol = Mage::app()->getLocale()->currency(Mage::app()->getStore()->getCurrentCurrencyCode())->getSymbol();

or now:

Mage::app()->getLocale()->currency($_code)->getSymbol();

EDIT:

If you wish to show images for each currency, there are a couple of ways to do it.

Use CSS and background-images by adding the $_code to the a tag class:

<?php foreach ($this->getCurrencies() as $_code => $_name): 

    // gets the currency symbol for each currency
    $symbol = Mage::app()->getLocale()->currency($_code)->getSymbol();
?>

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

Then define your css (or in this case scss - sass):

.currency-switcher {

    .a { // define all a tags
            display: block;
            width: 25px;
            height: 25px;           
        }

    // now define the background image for each currency
    .USD {
        background-image: url('path-to-your-dollar-image') no-repeat 50% 50%;
    }

    // now define the rest ...

}

The other method would be to directly output the images again using the $_code value - so your images would have to be named correctly eg:

currency_USD.png and currency_GBP.png etc .. and edit your code as such:

    <?php foreach ($this->getCurrencies() as $_code => $_name): 
        // define the image
        $currency_image = 'path/to/your/image/currency_' . $_code . '.png';
    ?>

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

<?php endforeach; ?>
Related Topic