WooCommerce Floating Currency Switcher: Setup, Pages, Mobile and CSS

The WooCommerce floating currency switcher in FOX is a panel fixed to the left or right edge of the screen. It stays visible while the visitor scrolls and needs no widget area, shortcode or theme change: you turn it on in the plugin settings and it appears on every page you allow. This guide covers its settings, how to limit it to certain pages and devices, the fixes for the usual mobile problems, and CSS for the details the settings do not reach.

Turn on the floating currency switcher

Open WooCommerce → Settings → Currency → Side and switch Enable / Disable on. The remaining options appear once it is enabled:

Both field options take placeholders that FOX replaces for each currency: __CODE__ (USD), __SIGN__ ($), __FLAG__ (the flag image) and __DESCR__, the text in the currency's Description column in the Currencies tab. To change a text like "USA dollar", edit that description. If a field is left empty, FOX shows the currency code instead, so an empty Hover field(s) does not remove the hover text; the CSS below does.

The switcher lists every currency whose Visible switch in the Currencies tab is on. A currency missing from the panel is almost always one with Visible off. The style options of the drop-down and the Designer tab apply to the [woocs] switcher, not to this panel.

Choose the pages where it appears

Show on the pages and Hide on the pages accept page IDs and keywords, separated by commas without spaces. FOX splits the list at each comma and does not trim it, so in product, shop the second entry is " shop" and never matches; write product,shop.

Numbers are treated as page IDs and work only for WordPress pages; a product or post ID matches nothing. When Show on the pages has any value, the switcher is hidden everywhere else. An entry in Hide on the pages wins over the show list. For example, woocommerce,cart in the show list keeps the panel on the catalogue and the cart and takes it off the blog and the checkout.

To keep it off the checkout only, there is a simpler option: Hide switcher on checkout page in the Options tab hides the side switcher on the checkout and order payment pages, and also the [woocs] switcher on the checkout page.

Conditions the fields cannot express

Blog posts, products and course pages are all "single" entries, so the fields cannot tell them apart. After applying its settings, FOX passes its decision through the woocs_show_side_swither filter, and what you return wins. The hook name is spelled swither in the plugin; use it exactly like that.

/*
 * FOX side switcher: final decision on where it is shown.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woocs_show_side_swither', function ($show) {
    if (is_singular('post') || is_home()) {
        return false; // blog posts and the blog page
    }
    if (is_singular('course')) {
        return true;  // replace "course" with your custom post type
    }
    return $show;     // everywhere else the Side tab settings decide
});

Phones and tablets

Behavior for devices has the highest priority: when it hides the switcher, the page lists and the filter are not consulted. It uses the WordPress function wp_is_mobile(), which looks at the browser's user agent on the server. Two consequences:

• With a page cache, the HTML built for the first visitor is served to everybody. If the cache does not keep separate copies for mobile devices, a phone can receive the desktop version, switcher included, or the other way round.
• Some tablets, iPads in particular, identify themselves as desktop browsers and count as desktop.

When either matters, keep Show on all devices and hide the panel by screen width in CSS, which the browser decides on every page view:

/* Hide the FOX side switcher on screens up to 767px wide */
@media (max-width: 767px) {
    body .woocs_auto_switcher {
        display: none !important;
    }
}

Buttons under the switcher cannot be tapped

Classic blocks sits in a fixed, transparent box 200 pixels wide and 220 pixels high, and Roll blocks in a column of 90 pixels. On a phone that box can cover a slider arrow, an add-to-cart button or the menu icon, and taps land on the empty part of the switcher. Round select lets taps through while it is closed. Shrink the box to its content and drop it below the theme's own layers:

/* FOX side switcher: no invisible area, below sticky headers and menus */
body .woocs_auto_switcher {
    width: auto;
    height: auto;
    z-index: 99;
}
/* Round select has its own, stronger rule for the stacking order */
body .woocs_auto_switcher.cd-stretchy-nav {
    z-index: 99;
}

The switcher's default stacking order is 99999 (9999 for Round select), above almost everything a theme draws. With 99 the theme's menu, cart drawer or cookie banner opens above it. If the theme then covers the switcher itself, raise the number step by step.

A tap changes the currency by accident

Touch screens have no hover, so the slide-out panel of Classic blocks can open on a tap and lie over the page, and the next tap on that area switches currency. Turn the panel off on touch screens:

/* Classic blocks: no slide-out panel on touch screens */
@media (hover: none) {
    body ul.woocs_auto_switcher li a span {
        display: none !important;
    }
}

A long list does not fit on the screen

A fixed panel does not scroll, so with many currencies the last ones end below the bottom of a phone screen and cannot be reached. Either show fewer currencies (the Visible switch), or let the panel scroll with the page on small screens:

/* The panel scrolls with the page on small screens */
@media (max-width: 767px) {
    body .woocs_auto_switcher,
    body .woocs_auto_switcher.cd-stretchy-nav {
        position: absolute;
    }
}

For a narrower panel, set Basic field(s) to __SIGN__ or __FLAG__. For different settings on phones, use the filter at the end of this guide.

CSS recipes

Add CSS to your theme's Additional CSS (Appearance → Customize → Additional CSS, or Styles → Additional CSS in the Site Editor of a block theme), then purge the page cache. The body prefix makes the rules stronger than the plugin's own styles. Start with Main color and Hover color; the rules below cover what they do not.

/* Smaller flags (Classic blocks and Roll blocks), default 35px */
body .woocs_auto_switcher img.flag_auto_switcher {
    width: 24px;
}

/* Classic blocks: let a long hover text wrap instead of overflowing */
body ul.woocs_auto_switcher li a span {
    height: auto;
}
body ul.woocs_auto_switcher li a span div {
    white-space: pre-wrap;
}

/* Classic blocks: gradient buttons; the current currency keeps the Hover color */
body ul.woocs_auto_switcher li a {
    background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
}

/* Round select: gradient background of the opened panel */
body .woocs_auto_switcher.cd-stretchy-nav .stretchy-nav-bg {
    background: linear-gradient(180deg, #1e3c72 0%, #2a5298 100%);
}

If the panel does not react to a rule, inspect it in the browser's developer tools: Classic blocks is a ul.woocs_auto_switcher, Roll blocks and Round select are a nav.woocs_auto_switcher, with the class left or right for the side.

Different settings per device: woocs_side_switcher_data

All panel settings pass through the woocs_side_switcher_data filter before the panel is built. The array has the keys skin (classic_blocks, roll_blocks or round_select), side, top, color, hover_color, basic_field and add_field (the hover field). This example shows a compact round button on the right on phones and leaves the desktop settings alone:

/*
 * FOX side switcher: other settings on mobile devices.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woocs_side_switcher_data', function ($data) {
    if (wp_is_mobile()) {
        $data['skin']        = 'round_select';
        $data['side']        = 'right';
        $data['top']         = '30%';
        $data['basic_field'] = '__SIGN__';
    }
    return $data;
});

It relies on wp_is_mobile() too, so the page cache remark above applies. If you would rather have a drop-down pinned to a corner than a side panel, see how to place the currency switcher at the bottom of the site.

If it still does not show

• Enable / Disable is on in the Side tab and the settings were saved.
• The page lists have no spaces and use product_category, not product-category.
• Behavior for devices and Hide switcher on checkout page do not hide it on the page you are testing.
• At least two currencies have Visible on.
• The page cache and the browser cache were purged after the change, and no snippet returns false from woocs_show_side_swither.

If the panel still does not appear or behaves differently from the settings, open a topic on the FOX support forum with the page link and your Side tab settings, and we will look at it.