Customising the look of the widgets to adapt to a specific site is outside the scope of our support service.
Please note that a basic knowledge of CSS styles, and how to add them to your site is required. If you are not familiar with CSS and how to use it, we suggest contact your developer to have the changes applied, or to learn about CSS, by starting with the following article: WP Beginner - How to add custom CSS to your site.
Should you need assistance implementing the code, please feel free to contact us to request a consultation.
1. 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 */
}
/*** Dropdown currency selector with flags ***/
/* This selector matches the field that shows the selected currency and opens the dropdown when clicked. */
.widget_wc_aelia_currencyswitcher_widget .wc_aelia_cs_currency_selector .selected_currency {
}
/* This selector matches the container of the currency flag displayed next to the selected currency. */
.widget_wc_aelia_currencyswitcher_widget .wc_aelia_cs_currency_selector .selected_currency .currency_flag {
}
/* This selector matches the container of the currency label for the selected currency. */
.widget_wc_aelia_currencyswitcher_widget .wc_aelia_cs_currency_selector .selected_currency .currency_name {
}
/* This selector matches the dropdown with the list of currencies. */
.widget_wc_aelia_currencyswitcher_widget .wc_aelia_cs_currency_selector .currencies {
}
/* This selector matches the selected currency item in the currencies dropdown. */
.widget_wc_aelia_currencyswitcher_widget .wc_aelia_cs_currency_selector .currencies .currency.selected {
}
/* This selector matches the container of the currency flag in the currencies dropdown. */
.widget_wc_aelia_currencyswitcher_widget .wc_aelia_cs_currency_selector .currencies .currency .currency_flag {
}
/* This selector matches the container of the currency label in the currencies dropdown. */
.widget_wc_aelia_currencyswitcher_widget .wc_aelia_cs_currency_selector .currencies .currency .currency_name {
}You can use the above to change size, font, colours and any attribute of the Currency Selector, to adapt it to your needs.
2. How to add flags to the currency selector widget
2.2 Buttons currency selector
If you use the button selector, you can set your flag as the background of each button (see CSS selectors, above).
2.3 Navigation menu
3. 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.
3.1 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/themes/{your theme name}/woocommerce-aelia-currencyswitcher/ 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.