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.


If you would like to add a currency selector menu in your WooCommerce site, you can do that easily, by using the standard menu features provided by WordPress. You can find the instructions below.


How to add a currency selector menu

1. Enable option Allow to select a currency via the page URL in Currency Switcher Options > Currency Selection Options.


2. Add a Custom Link menu item to the menu of your choice. Set the link to "#" (just a hash symbol). Set the label "Currency".

3. Add a Custom Link submenu item for each of the currency, nesting below the Currency menu added at step #2. The link of each item should looke like ?aelia_cs_currency=<currency code>. 


Examples

  • ?aelia_cs_currency=EUR
  • ?aelia_cs_currency=GBP
  • ?aelia_cs_currency=USD

Set the label of each item to a currency code, or a currency name.


4. Save the menu. You will now have a dropdown menu element that allow you to select a currency by clicking on one of the sub-menu items.



Further customisations

The menu items will be standard HTML elements, and they will be fully customisable using CSS. For example, you could display a flag next to each one. To simplify this operation, you can assign a custom CSS class to each menu item, as follows.


1. Go to page WordPress Admin > Menu.

2. Click on Screen Options, at the top right.

3. In the panel that will open, tick the "CSS Classes" checkbox.

4. Select the menu you created earlier and open each currency item. It will now contain a CSS class field. In that field, enter the name of a CSS class of your choice. Make it unique for each currency (e.g. menu_item_CAD, menu_item_USD, menu_item_EUR, etc). The class will allow you to style the menu item later on.

5. Alter the CSS as you like. If you wish to add flags, you can find an archive of country flags here: http://www.free-country-flags.com. Simply download the appropriate pack, extract the flags you need, and assign them to each item using the CSS classes you set at step #4. The following example shows how to set an image as the background of a menu item with CSS class "menu_item_EUR".
/* Set the background image for the EUR menu item. You can use this as a template
 * to customise the appearance of other menu items (just remember to replace the 
 * path with the correct one.
 */
.menu_item_EUR {
  background: url("/path/to/EUR_flag.png") center left no-repeat;
}


You can purchase the Currency Switcher from our online shop.