Magento 2 : How to Add Currency Flag to Currency Switcher Dropdown?

Question

I m working on Magento 2.3.5 p1, can we add currency flag in currency switcher that appeared at top header?

if yes please let me help on this. Thanks in advanced.

Answer 1

You can add the flag to the currency switcher using the below way.

create file currency.phtml in

app/code/design/frontend/{theme_vendor}/{theme_name}/Magento_Directory/templates/currency.phtml

And add the below code in this file.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile
/**
 * Currency switcher
 *
 * @var \Magento\Directory\Block\Currency $block
 */

?>
<?php if ($block->getCurrencyCount() > 1): ?>
<?php $currencies = $block->getCurrencies(); ?>
<?php $currentCurrencyCode = $block->getCurrentCurrencyCode(); ?>
<?php $id = $block->getIdModifier() ? '-' . $block->getIdModifier() : '' ?>
<div class="switcher currency switcher-currency" id="switcher-currency<?= $block->escapeHtmlAttr($id) ?>">
    <strong class="label switcher-label"><span><?= $block->escapeHtml(__('Currency')) ?></span></strong>
    <div class="actions dropdown options switcher-options">
        <div class="action toggle switcher-trigger"
             id="switcher-currency-trigger<?= $block->escapeHtmlAttr($id) ?>"
             data-mage-init='{"dropdown":{}}'
             data-toggle="dropdown"
             data-trigger-keypress-button="true">
            <strong class="language-<?= $block->escapeHtml($block->getCurrentCurrencyCode()) ?>">
                <?php $flagImage = 'images/'.$block->getCurrentCurrencyCode().'.png'; ?>
                <img src="<?= $this->getViewFileUrl($flagImage); ?>">
                <span><?= $block->escapeHtml($currentCurrencyCode) ?> - <?= @$block->escapeHtml($currencies[$currentCurrencyCode]) ?></span>
            </strong>
        </div>
        <ul class="dropdown switcher-dropdown" data-target="dropdown">
            <?php foreach ($currencies as $_code => $_name): ?>
                <?php if ($_code != $currentCurrencyCode): ?>
                    <li class="currency-<?= $block->escapeHtmlAttr($_code) ?> switcher-option">
                        <?php $flagImage = 'images/'.$_code.'.png'; ?>
                        <a href="#" data-post='<?= /* @noEscape */ $block->getSwitchCurrencyPostData($_code) ?>'>
                            <img src="<?= $this->getViewFileUrl($flagImage); ?>"> <?= $block->escapeHtml($_code) ?> - <?= $block->escapeHtml($_name) ?></a>
                    </li>
                <?php endif; ?>
            <?php endforeach; ?>
        </ul>
    </div>
</div>
<?php endif; ?>

Then you have to add the ".png" images to the

app/code/design/frontend/{theme_vendor}/{theme_name}/web/images

the image name should be your currency code like I have two currencies in the dropdown INR and USD, So your image name should be INR.png and USD.png.

Then run the below command and clear cache.

php bin/magento setup:static-content:deploy -f

Check the below screenshot.

Hope this solution will work for you.

Answer 2

You can add the flag to the currency switcher using the below way.

create file currency.phtml in

app/code/design/frontend/{theme_vendor}/{theme_name}/Magento_Directory/templates/currency.phtml

And add the below code in this file.

<?php if ($block->getCurrencyCount() > 1): ?>
<?php $currencies = $block->getCurrencies(); ?>
<?php $currentCurrencyCode = $block->getCurrentCurrencyCode(); ?>
<?php $id = $block->getIdModifier() ? '-' . $block->getIdModifier() : ''?>
<div class="switcher currency switcher-currency" id="switcher-currency<?php /* @escapeNotVerified */ echo $id?>">
    <strong class="label switcher-label"><span><?php /* @escapeNotVerified */ echo __('Currency') ?></span></strong>
    <div class="actions dropdown options switcher-options">
        <div class="action toggle switcher-trigger" id="switcher-currency-trigger<?php /* @escapeNotVerified */ echo $id?>">
            <strong class="language-<?php echo $block->escapeHtml($block->getCurrentCurrencyCode()) ?>">
            <?php $flagImage = 'images/'.$block->getCurrentCurrencyCode().'.png'; ?>
                <img src="<?= $this->getViewFileUrl($flagImage); ?>">
                <span><?php echo $block->escapeHtml($currentCurrencyCode) ?><?php if(!$this->helper('Smartwave\Porto\Helper\Data')->getConfig('porto_settings/header/currency_short')): ?> - <?php echo @$block->escapeHtml($currencies[$currentCurrencyCode]) ?><?php endif; ?></span>
            </strong>
        </div>
        <ul class="dropdown switcher-dropdown" data-mage-init='{"dropdownDialog":{
            "appendTo":"#switcher-currency<?php /* @escapeNotVerified */ echo $id?> > .options",
            "triggerTarget":"#switcher-currency-trigger<?php /* @escapeNotVerified */ echo $id?>",
            "closeOnMouseLeave": false,
            "triggerClass":"active",
            "parentClass":"active",
            "buttons":null}}'>
            <?php foreach ($currencies as $_code => $_name): ?>
                <?php if ($_code != $currentCurrencyCode): ?>
                    <li class="currency-<?= $block->escapeHtmlAttr($_code) ?> switcher-option">
                        <?php $flagImage = 'images/'.$_code.'.png'; ?>
                        <a href="#" data-post='<?= /* @noEscape */ $block->getSwitchCurrencyPostData($_code) ?>'>
                            <img src="<?= $this->getViewFileUrl($flagImage); ?>"> <?= $block->escapeHtml($_code) ?> </a>
                    </li>
                <?php endif; ?>
            <?php endforeach; ?>
        </ul>
    </div>
</div>
<?php endif; ?>

You can add the flag to the currency switcher using the below way.

create file currency.phtml in

app/code/design/frontend/{theme_vendor}/{theme_name}/Magento_Directory/templates/currency.phtml

And add the below code in this file.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile
/**
 * Currency switcher
 *
 * @var \Magento\Directory\Block\Currency $block
 */

?>
<?php if ($block->getCurrencyCount() > 1): ?>
<?php $currencies = $block->getCurrencies(); ?>
<?php $currentCurrencyCode = $block->getCurrentCurrencyCode(); ?>
<?php $id = $block->getIdModifier() ? '-' . $block->getIdModifier() : '' ?>
<div class="switcher currency switcher-currency" id="switcher-currency<?= $block->escapeHtmlAttr($id) ?>">
    <strong class="label switcher-label"><span><?= $block->escapeHtml(__('Currency')) ?></span></strong>
    <div class="actions dropdown options switcher-options">
        <div class="action toggle switcher-trigger"
             id="switcher-currency-trigger<?= $block->escapeHtmlAttr($id) ?>"
             data-mage-init='{"dropdown":{}}'
             data-toggle="dropdown"
             data-trigger-keypress-button="true">
            <strong class="language-<?= $block->escapeHtml($block->getCurrentCurrencyCode()) ?>">
                <?php $flagImage = 'images/'.$block->getCurrentCurrencyCode().'.png'; ?>
                <img src="<?= $this->getViewFileUrl($flagImage); ?>">
                <span><?= $block->escapeHtml($currentCurrencyCode) ?> - <?= @$block->escapeHtml($currencies[$currentCurrencyCode]) ?></span>
            </strong>
        </div>
        <ul class="dropdown switcher-dropdown" data-target="dropdown">
            <?php foreach ($currencies as $_code => $_name): ?>
                <?php if ($_code != $currentCurrencyCode): ?>
                    <li class="currency-<?= $block->escapeHtmlAttr($_code) ?> switcher-option">
                        <?php $flagImage = 'images/'.$_code.'.png'; ?>
                        <a href="#" data-post='<?= /* @noEscape */ $block->getSwitchCurrencyPostData($_code) ?>'>
                            <img src="<?= $this->getViewFileUrl($flagImage); ?>"> <?= $block->escapeHtml($_code) ?> - <?= $block->escapeHtml($_name) ?></a>
                    </li>
                <?php endif; ?>
            <?php endforeach; ?>
        </ul>
    </div>
</div>
<?php endif; ?>

Then you have to add the ".png" images to the

app/code/design/frontend/{theme_vendor}/{theme_name}/web/images

the image name should be your currency code like I have two currencies in the dropdown INR and USD, So your image name should be INR.png and USD.png.

Then run the below command and clear cache.

php bin/magento setup:static-content:deploy -f