Aelia Currency Switcher 4.12.0 and newer

The Aelia Currency Switcher includes a simple, yet effective currency selector widget that can display country flags, starting from version 4.12.0, released in June 2021. The widget is a simplified version of the one that can be implemented by following the instructions below. It doesn't depend on external JavaScript libraries, and it can be used out of the box, without custom code.


You can find the instructions to use the new widget in the following article: Aelia Currency Switcher - How to show the currency selector widget anywhere.


The solution described below, which applied to older versions, still works. You can keep using it, if you wish.


Aelia  Currency Switcher 4.11.6.x and earlier


Adding flags to the dropdown within the default dropdwo currency selector widget provided by the Currency Switcher is fairly straightforward, thanks to the Select2 JavaScript library provided by WooCommerce. This article will guide you through the steps to add a flag next to each currency.


The code in this guide is considered a customisation. As such, it's outside the scope of our support service. Should you need assistance implementing the code, please feel free to contact us to request a consultation.


1. Find the flag images to upload on your site

Sites like http://www.flags.net have a database of flags, which you can save and use on your site. Important: before using any image, please make sure that you read the licence that governs its terms of use.


2. Upload the images on your site

Using the Media Manager, add the flags to your site. Take note of the URL of each image, and to which currency it will apply.

3. Prepare the script that will add the images to the dropdown

The following script will look for the currency selector widget on the page and transform it into a Select2 dropdown. Before using it, make sure that you amend the list of currency/flag pairs, by adding the URLs of the images you prepared at step #2.

/**
 * Runs a JavaScript to add flags to the currency options in the dropdown
 * currency selector provided by the Aelia Currency Switcher.
 */
add_action('wp_footer', function() {
  ?>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
      /**
       * Adds flags to the options in the dropdown currency selector.
       */
      function add_flag_to_currency_option(currency) {
        if(!currency.id) {
          return currency.text;
        }

        var flag_urls = {
          // Update this list, adding the URL of each flag
          'USD': 'http://example.org/wp-content/uploads/2017/12/UNST0001.GIF',
          'EUR': 'http://example.org/wp-content/uploads/2017/12/EUUN0001.GIF',
          'GBP': 'http://example.org/wp-content/uploads/2017/12/UNKG0001.GIF',
          'CAD': 'http://example.org/wp-content/uploads/2017/12/CANA0001.GIF'
        }
        var currency_code = currency.id;
        if(flag_urls[currency_code]) {
          var $currency_option = $(
            '<span><img src="' + flag_urls[currency_code] + '" class="aelia-img-flag" /> ' + currency.text + '</span>'
          );
        }

        //console.log(currency);
        return $currency_option;
      }

      // Fix for the [object Object] issue that occurs with some WooCommerce versions
      // @link https://github.com/woocommerce/selectWoo/issues/39
      $.fn.select2.amd.define('customSingleSelectionAdapter', [
        'select2/utils',
        'select2/selection/single',
      ], function (Utils, SingleSelection) {
        const adapter = SingleSelection;
        adapter.prototype.update = function (data) {
          if (data.length === 0) {
            this.clear();
            return;
          }
          var selection = data[0];
          var $rendered = this.$selection.find('.select2-selection__rendered');
          var formatted = this.display(selection, $rendered);
          $rendered.empty().append(formatted);
          $rendered.prop('title', selection.title || selection.text);
        };
        return adapter;
      });  

      // Apply the images to the currency options
      $('.widget_wc_aelia_currencyswitcher_widget select').select2({
        templateResult: add_flag_to_currency_option,
        templateSelection: add_flag_to_currency_option,
selectionAdapter: $.fn.select2.amd.require('customSingleSelectionAdapter'),
      });
    });
  </script>
  <?php
});

/**
 * Loads the Select2 library and CSS on the frontend.
 */
add_action('wp_enqueue_scripts', function() {
  wp_enqueue_script('select2');
  wp_enqueue_style('select2');
});

When ready, you can add the script to your site. See How to Safely Add Custom Code to WordPress Sites for more information on how to do that.


4. Style your new selector

The last step is to adjust the style of your new currency selector, so that the flags look nice. Here's a template of the CSS rules for that purpose. You can use it as a starting point, to fine tune the aspect of the selector on your specific site.

/* Set the widget of the currency dropdown */
.widget_wc_aelia_currencyswitcher_widget .aelia_cs_currencies {
  width: 100%;
}

/* Style the images, making sure that they are small enough and aligned with the labels */
.select2-container .aelia-img-flag {
  max-width: 30px;
  border-radius: 0;
  display: inline;
  vertical-align: middle;
  margin-top: -3px;
}


You're done! Now the dropdown currency selector should show the flags you chose, next to each currency, as in the example below.

Should you have any questions, please feel free to contact us. The contact form also provides a convenient way to query our knowledge base, which contains the answers to the most common questions we receive.


You can purchase the Currency Switcher from our online shop.