Customize the currency switcher dropdown in WordPress: size, mobile, footer

To customize the currency switcher dropdown in WordPress, you pick one of the switcher types of WPCS, set a few [wpcs] attributes and add CSS for the rest. Which attributes and which CSS work depends on the type, and that is the usual reason why a width or a setting seems to do nothing. This guide goes through the types, then size and alignment (Elementor included), mobile menus, a switcher in the footer, the short flash on click and the page jumping to the top after a currency change.

Pick the switcher type first

The look of [wpcs] is set by Drop-down view on the Options tab of Settings → Currency Switcher. Two kinds of switcher ignore that setting: [wpcs style=2] shows Style #2 for this one shortcode, and [wpcs sd=3] shows design 3 made on the Designer tab. The Side switcher tab adds a separate switcher fixed to the edge of the screen.

The styled dropdowns always open their list below the switcher; only the simple drop-down lets the browser decide.

Attributes and the text of the options

For the types that accept attributes:

[wpcs show_flags=0 width='150px' txt_type='code']

• show_flags: 1 or 0. Without it, Show flags by default on the Options tab decides.
• width: in px or %, for example '150px' or '50%'. Without it, the switcher is 100% wide.
• txt_type: code shows the code, plus the symbol when Show money signs is Yes (USD, $); desc shows the description of the currency.

There are only these two text modes, but the description is free text. To show $ US dollar or just $, type that into the description field of the currency row and use txt_type='desc'. In a Designer switcher, the Title value field does the same with the keys __CODE__, __SIGN__ and __DESCR__: __SIGN__ alone shows only symbols, __CODE__ - __SIGN__ shows USD - $. All attributes are listed on the [wpcs] shortcode page.

Width, height and alignment, Elementor included

A switcher takes the width of the place where you put it unless told otherwise. In a wide Elementor column or header row it stretches across the whole column. For ddslick, chosen, wSelect and simple drop-down, the width attribute is enough. In a Designer switcher, set Width in the design (or turn on Width 100%), and use Scale, Title font size and Flag height to make it smaller or larger. Style #1 to #3 always fill their container, so limit them with CSS.

Add CSS in Appearance → Customize → Additional CSS (or the custom CSS of your builder). .elementor-shortcode is the wrapper of Elementor's Shortcode widget; drop it from the selectors if you do not use Elementor.

/* Style #1, #2, #3: limit the width */
.elementor-shortcode .wpcs-style-1-dropdown,
.elementor-shortcode .wpcs-style-2-drop-down,
.elementor-shortcode .wpcs-style-3-du-dialog-starter {
    max-width: 150px;
}

/* Designer switcher: the height it takes in a row, and vertical alignment */
.elementor-shortcode .selectron23 {
    height: 30px !important;
    vertical-align: middle;
}

Put [wpcs sd=ID] into Elementor's Shortcode widget, and judge the result on the live page: a Designer switcher is drawn by its script after the page loads, and builder editors do not always show it as visitors see it.

Mobile menus: a thin bar, or a list instead

A Designer switcher measures the height of its first option when the page loads and sizes itself from that. If it sits in a mobile menu that is closed at that moment, the menu is hidden, the measured height is 0, and when the visitor opens the menu the switcher is a bar about one pixel high. There are two fixes.

The quick one is a minimum height in CSS. Replace .mobile-menu with the class of your theme's mobile menu panel (inspect it in the browser) and adjust 36px to the height of one option:

.mobile-menu .selectron23,
.mobile-menu .selectron23 .selectron23-container {
    min-height: 36px !important;
}

The exact one is to let the plugin draw the switcher again when it becomes visible. wpcs_init_selectron() is the plugin's own function that draws every Designer switcher on the page:

/*
 * WPCS: redraw Designer switchers that were hidden when the page loaded
 * (closed mobile menus, tabs, accordions).
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    ?>
    <script>
    (function () {
        function watch() {
            if (typeof wpcs_init_selectron !== 'function' || !('IntersectionObserver' in window)) {
                return;
            }
            var observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    var box = entry.target.querySelector('.selectron23');
                    if (entry.isIntersecting && box && box.offsetHeight < 5) {
                        wpcs_init_selectron();
                    }
                });
            });
            document.querySelectorAll('div[data-wpcs-sd]').forEach(function (div) {
                observer.observe(div);
            });
        }
        if (document.readyState === 'complete') {
            watch();
        } else {
            window.addEventListener('load', watch);
        }
    })();
    </script>
    <?php
}, 100);

On phones a simple drop-down is often the better choice anyway: it opens the phone's own picker and has nothing to measure. If you want currencies as a list of links, like a language list, use the show as flags view, or add menu items of the type Custom Links with the URL ?currency=EUR, ?currency=USD and so on. The plugin switches the currency for any page address that carries this parameter, and the relative link keeps the visitor on the same page. To put the dropdown itself into a menu, see adding the currency switcher to the menu.

A dropdown in the footer opens downwards

All styled lists open below the switcher, so at the bottom of the page the list runs off the screen. The simple drop-down is the browser's own select element, and the browser opens it upwards when there is no room below. Set Drop-down view to simple drop-down and use, for example, [wpcs show_flags=0 width='130px' txt_type='code'] in the footer. If you want a styled switcher elsewhere on the site, use a Designer switcher or [wpcs style=1] there: both ignore the Drop-down view setting.

A white flash when the Designer dropdown opens

If a light background flickers for a moment when the visitor clicks a Designer switcher, keep its list clipped while it opens:

.selectron23-container {
    overflow: hidden !important;
}

This also stops scrolling inside the list. If you set Max open height lower than the full list in the design, raise it so that all currencies fit.

Keep the scroll position after switching currency

Choosing a currency reloads the page: with ?currency=EUR added to the address, or as a plain reload when No GET data in link is Yes. The browser then starts at the top, which is annoying when the switcher or a rates table sits halfway down a long page. The plugin has no option for this, and editing its front.js is lost with the next update. This snippet remembers the position when a switcher is used, scrolls back after the reload and shows a wait cursor while the new page loads. It works with every switcher type:

/*
 * WPCS: keep the scroll position and show a wait cursor when the currency changes.
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    ?>
    <script>
    (function () {
        var key = 'my_wpcs_scroll';
        var switchers = '.currency-switcher-form, [class*="wpcs-style-"], div[data-wpcs-sd], .wpcs_flag_view_item, .wpcs_auto_switcher';

        function remember(e) {
            if (!e.target.closest || !e.target.closest(switchers)) {
                return;
            }
            try {
                sessionStorage.setItem(key, JSON.stringify({path: location.pathname, y: window.scrollY, t: Date.now()}));
            } catch (err) {}
            window.addEventListener('beforeunload', function () {
                document.documentElement.classList.add('my-wpcs-loading');
            }, {once: true});
        }
        document.addEventListener('click', remember, true);
        document.addEventListener('change', remember, true);

        window.addEventListener('pageshow', function () {
            document.documentElement.classList.remove('my-wpcs-loading');
        });

        function restore() {
            var saved = null;
            try {
                saved = JSON.parse(sessionStorage.getItem(key));
                sessionStorage.removeItem(key);
            } catch (err) {}
            if (saved && saved.path === location.pathname && Date.now() - saved.t < 30000) {
                window.scrollTo(0, saved.y);
            }
        }
        if (document.readyState === 'complete') {
            restore();
        } else {
            window.addEventListener('load', restore);
        }
    })();
    </script>
    <style>.my-wpcs-loading, .my-wpcs-loading * { cursor: wait !important; }</style>
    <?php
}, 100);

The position is restored only on the same page and only within 30 seconds of using the switcher, so normal navigation is not affected. If an optimization plugin delays JavaScript until the first interaction, the first click on the switcher can happen before the script is running; exclude these inline scripts from the delay, as you do for the plugin's own files.

Checklist

• You know which type you are styling: Drop-down view, a style attribute, or a Designer sd ID.
• width, show_flags and txt_type are used only with ddslick, chosen, wSelect or simple drop-down.
• Style #1 to #3 and Designer switchers are sized with CSS or in the design.
• A Designer switcher in a hidden menu has a minimum height or the redraw snippet.
• The footer switcher is a simple drop-down.
• Caches are cleared and the result is checked on the live page, not in the builder.

If a switcher still looks wrong, post the page link and the shortcode you use on the WPCS support forum.