Altering the aspect of elements via CSS

To alter the look and feel of the Currency Selector widget, simply modify your theme's CSS file and use the following selectors:

/* Matches the container that wraps around the whole Currency Selector */
.widget_wc_aelia_currencyswitcher_widget {
  /* Add styles here */
}

/* Matches the widget's title */
.widget_wc_aelia_currencyswitcher_widget .widget-title {
  /* Add styles here */
}

/* Matches the dropdown list displayed used to select a currency */
.widget_wc_aelia_currencyswitcher_widget #aelia_cs_currencies {
  
}

/* Matches the button that triggers the selection of the currency */
.widget_wc_aelia_currencyswitcher_widget .button.change_currency {
  /* Add styles here */
}

/* When the currency selector widget is displayed as a set of buttons, this
 * selector matches all buttons. If you wish, you can select each individual
 * button based on the currency code.
 * For example, .widget_wc_aelia_currencyswitcher_widget .currency_button.EUR
 * will match the buttons for Euro, .widget_wc_aelia_currencyswitcher_widget .currency_button.USD
 * will match the button for USD and so on.
 */
.widget_wc_aelia_currencyswitcher_widget .currency_button {
  /* Add styles here */
}

/* When the currency selector widget is displayed as a set of buttons, this
 * selector matches the button corresponding to the active currency.
 */
.widget_wc_aelia_currencyswitcher_widget .currency_button.active {
  /* Add styles here */
}


You can use the above to change size, font, colours and any attribute of the Currency Selector, to adapt it to your needs.


How to add flags to the currency selector widget

The Currency Switcher doesn't include a "flags" option. We deliberately excluded such feature, because we found out that they can be distracting and may look poorly on the theme in which they are displayed. Unfortunately, there isn't a "flag style" that fits all themes). If you wish to use a selector with flags, you have several options:

You can find more detailed information on how to use the Select2 JavaScript library to show flags in the dropdown in the following article: How to show flags in the dropdown currency selector widget.


Adding custom widget templates

From version 2.6 onward, the currency selector widget is rendered using template files that can be found in {your wordpress folder}/wp-content/plugins/woocommerce-aelia-currencyswitcher/views folder. The following standard templates are available:

  • currency-selector-widget-dropdown.php: displays "dropdown" style selector.
  • currency-selector-widget-buttons.php: displays "buttons" style selector.

If you wish to alter the templates, simply copy them in your theme. They should be put in {your theme folder}/woocommerce-aelia-currencyswitcher/ and have the same name of the original files. The Currency Switcher will then load them automatically instead of the default ones.


Adding a new, custom template

The Currency Switcher also allows you to pass new templates for its selectors. You can do so as follows:

 

1. Write your custom template file (for example, my-custom-currency-selector.php) and save it in {your wordpress folder}/wp-content/plugins/woocommerce-aelia-currencyswitcher/views folder.

2. Add a new filter for the wc_aelia_cs_currency_selector_widget_types to your theme's functions.php, as follows:      

/**
 * Registers one or more custom widgets.
 * 
 * @param array widget_types An array of widget descriptors.
 * @return array An array of widget descriptors, with the custom types added to it.
 * @author Aelia <support@aelia.co>
 */
function my_custom_widget_types($widget_types) {
  $widget_types['my_custom_type'] => array(
    'name' => __('My Custom Type', 'my-text-domain'),
    'template' => 'my-custom-currency-selector',
    'title' => __('My Custom Type Widget', 'my-text-domain'),
  );
  return $widget_types;
}
add_filter('wc_aelia_cs_currency_selector_widget_types', 'my_custom_widget_types', 10, 1);

 3. Your new widget type should now appear in the list when you edit the currency selector widget in WordPress > Appearance > Widgets. Of course, you can also use your custom type with the shortcode:    

[aelia_currency_selector_widget title="Widget title (optional)" widget_type="my-custom-currency-selector"] 

    

You can purchase the Currency Switcher from our online shop.