The solution described this article is considered a customisation. As such, it's outside the scope of our support service. Please also 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.
Altering the aspect of elements via CSS
To alter the look and feel of the country selector widget, simply modify your theme's CSS file and use the following selectors:
/* Matches the container that wraps around the whole country selector */
.widget_wc_aelia_customer_country_selector_widget {
/* Add styles here */
}
/* Matches the widget's title */
.widget_wc_aelia_customer_country_selector_widget .widget-title {
/* Add styles here */
}
/* Matches the dropdown list displayed used to select a country */
.widget_wc_aelia_customer_country_selector_widget .countries {
}
/* Matches the button that triggers the selection of the currency */
.widget_wc_aelia_customer_country_selector_widget .button.change_country {
/* Add styles here */
}You can use the above to change size, font, colours and any attribute of the country selector, to adapt it to your needs.
How to add flags to the country selector widget
The Prices by Country plugin 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 can extend it using a JavaScript library such as Select2 (it's already part of WordPress). This requires some coding, you can find some examples here: https://select2.org/dropdown.You can purchase the Prices by Country plugin from our online shop.