Add a Currency Selector

Enabling a second currency doesn’t help if shoppers can’t find a way to choose it. Most themes have no spot for a currency switcher, and a switcher that only changes the price labels leaves the cart total in the old currency.

Storefront Currency Selector gives shoppers a currency dropdown as a shortcode, a block, or a selector above the checkout payment methods. Switching reprices the cart on the server, so the prices, the cart and the checkout all move to the new currency together.

Turn It On

This module needs Multi-Currency Checkout. Switch on both from Stackless > Dashboard, then open Stackless > Settings and choose Storefront Currency Selector under Currency.

The selector only shows when two or more currencies are enabled. It hides itself on the order-pay and order-received pages, because those are fixed to the order’s currency.

Set the Defaults

Under Currency selector:

• Checkout placement: on by default. Shows the selector above the payment methods on the classic and block checkout.
• Label: “Currency” when left empty.
• Option text: Code (EUR), Code and symbol (EUR (€)) as the default, or Name and code (Euro (EUR)).
• Local currency by location: off by default. Until a shopper picks a currency, it uses the one for their country, when that currency is enabled.

Label and Option text apply to the checkout selector and act as the shortcode defaults.

Add the Selector with a Shortcode

Use [stackless_currency_selector] anywhere shortcodes work, such as a widget, header area or page.

Attributes:

• label: the label text
• format: code, code_symbol or name
• show_label: no hides the visible label
• class: extra CSS classes

[stackless_currency_selector label="Pay in" format="name" show_label="no"]

Add the Selector with a Block

Search for the Currency Selector block (stackless/currency-selector) in the WooCommerce category. Its settings are:

• Label, empty by default, which shows “Currency”
• Show label, on by default
• Format: code, code_symbol (default) or name

The block supports left, center and right alignment, margin and padding, and font size. It keeps its own settings, so changing Label or Option text in Stackless settings doesn’t change blocks you’ve already placed.

How Switching Works

When a shopper picks a currency:

• On Cart and Checkout block pages, the switch goes through the Store API.
• Everywhere else, it goes through a WooCommerce AJAX request.
• Without JavaScript, a Change currency button submits the form.
• Any storefront URL with ?stackless_currency=EUR switches the currency, then redirects to the same page without the parameter. Use this for currency links in menus or campaigns.

The shopper sees “Updating prices…” while the cart is repriced. If the cart holds products that have no price in the new currency, the switch is refused and the products are named. The choice is saved in the session and the stackless_currency cookie.

Pick a Local Currency by Location

With Local currency by location on, a shopper who hasn’t chosen yet gets their country’s currency. The country comes from:

1. a logged-in customer’s billing country
2. otherwise, WooCommerce geolocation: the MaxMind integration when configured under WooCommerce > Settings > Integration, plus country headers from your host or CDN

The module makes no external lookups. The country-to-currency list comes from WooCommerce’s own locale data. If the country’s currency isn’t enabled, the shopper gets your Default currency from Multi-Currency Checkout.

Good to Know

• Override the markup by copying templates/currency_selector/selector.php to stackless/currency_selector/selector.php in your theme.
• Developers can change the detected country with the stackless_currency_selector_country filter and the mapping with stackless_currency_selector_country_currencies.
• After a switch, the stackless_currency_switched action fires with the new and previous currency.
• Pages that change by currency need a page cache that varies on the stackless_currency cookie. See Sell in Multiple Currencies.