Aelia - Support

The code in this article 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.

Adding flags to the dropdown within the currency selector widget provided by the Prices by Country plugin 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.

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 country options in the dropdown
 * country selector provided by the Aelia Prices by Country plugin.
 */
add_action('wp_footer', function() {
  ?>
  <script type="text/javascript">
    jQuery(document).ready(function($) {
      /**
       * Adds flags to the options in the dropdown country selector.
       */
      function add_flag_to_country_option(country) {
        if(!country.id) {
          return country.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 country_code = country.id;
        if(flag_urls[country_code]) {
          var $country_option = $(
            '<span><img src="' + flag_urls[country_code] + '" class="aelia-img-flag" /> ' + country.text + '</span>'
          );
        }

        //console.log(country);
        return $country_option;
      }

      // Apply the images to the country options
      $('.widget_wc_aelia_customer_country_selector_widget select').select2({
        templateResult: add_flag_to_country_option,
        templateSelection: add_flag_to_country_option
      });
    });
  </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 country dropdown */
.widget_wc_aelia_customer_country_selector_widget .countries {
  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 country selector should show the flags you chose, next to each country.

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 Prices by Country plugin from our online shop.