Schwebender Währungsumschalter für WooCommerce: Setup, Seiten, Mobil, CSS

Der schwebende WooCommerce-Währungsumschalter in FOX ist ein Panel, das am linken oder rechten Bildschirmrand fixiert ist. Er bleibt beim Scrollen sichtbar und braucht weder einen Widget-Bereich noch einen Shortcode oder Änderungen am Theme: Sie schalten ihn in den Plugin-Einstellungen ein, und er erscheint auf jeder Seite, die Sie zulassen. Diese Anleitung behandelt seine Einstellungen, wie Sie ihn auf bestimmte Seiten und Geräte beschränken, die Lösungen für die üblichen Probleme auf dem Handy und CSS für die Details, die die Einstellungen nicht erreichen.

Den schwebenden Währungsumschalter einschalten

Öffnen Sie WooCommerce → Einstellungen → Währung (Currency) → Seitenrand (Side) und schalten Sie Aktivieren / Deaktivieren (Enable / Disable) ein. Die übrigen Optionen erscheinen, sobald er aktiviert ist:

Beide Feld-Optionen akzeptieren Platzhalter, die FOX für jede Währung ersetzt: __CODE__ (USD), __SIGN__ ($), __FLAG__ (das Flaggenbild) und __DESCR__, der Text aus der Spalte Beschreibung (Description) im Tab Währungen (Currencies). Um einen Text wie „USA dollar“ zu ändern, bearbeiten Sie diese Beschreibung. Bleibt ein Feld leer, zeigt FOX stattdessen den Währungscode an. Ein leeres Hover-Feld(er) (Hover field(s)) entfernt den Hover-Text also nicht; das gelingt mit dem CSS unten.

Der Umschalter listet jede Währung auf, deren Schalter Sichtbar (Visible) im Tab Währungen (Currencies) eingeschaltet ist. Eine Währung, die im Panel fehlt, hat fast immer Sichtbar (Visible) ausgeschaltet. Die Stiloptionen des Dropdowns und der Tab Designer gelten für den Umschalter [woocs], nicht für dieses Panel.

Die Seiten wählen, auf denen er erscheint

Auf den Seiten anzeigen (Show on the pages) und Auf den Seiten ausblenden (Hide on the pages) akzeptieren Seiten-IDs und Schlüsselwörter, durch Kommas ohne Leerzeichen getrennt. FOX teilt die Liste an jedem Komma und entfernt keine Leerzeichen, in product, shop lautet der zweite Eintrag also „ shop“ und trifft nie zu; schreiben Sie product,shop.

Zahlen werden als Seiten-IDs behandelt und funktionieren nur bei WordPress-Seiten; die ID eines Produkts oder Beitrags trifft auf nichts zu. Hat Auf den Seiten anzeigen (Show on the pages) irgendeinen Wert, wird der Umschalter überall sonst ausgeblendet. Ein Eintrag in Auf den Seiten ausblenden (Hide on the pages) hat Vorrang vor der Anzeigeliste. Zum Beispiel belässt woocommerce,cart in der Anzeigeliste das Panel im Katalog und im Warenkorb und nimmt es vom Blog und vom Checkout.

Wenn er nur im Checkout fehlen soll, gibt es eine einfachere Option: Umschalter auf der Checkout-Seite ausblenden (Hide switcher on checkout page) im Tab Optionen (Options) blendet den seitlichen Umschalter auf den Seiten für Checkout und Zahlung aus, ebenso den Umschalter [woocs] auf der Checkout-Seite.

Bedingungen, die die Felder nicht ausdrücken können

Blogbeiträge, Produkte und Kursseiten sind alle „einzelne“ Einträge, die Felder können sie also nicht unterscheiden. Nachdem FOX seine Einstellungen angewendet hat, schickt es seine Entscheidung durch den Filter woocs_show_side_swither, und was Sie zurückgeben, gilt. Der Hook-Name ist im Plugin swither geschrieben; verwenden Sie ihn genau so.

/*
 * 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
});

Handys und Tablets

Verhalten für Geräte (Behavior for devices) hat die höchste Priorität: Blendet es den Umschalter aus, werden weder die Seitenlisten noch der Filter beachtet. Es nutzt die WordPress-Funktion wp_is_mobile(), die auf dem Server den User-Agent des Browsers auswertet. Daraus folgen zwei Dinge:

• Bei einem Seiten-Cache wird das HTML, das für den ersten Besucher erzeugt wurde, an alle ausgeliefert. Hält der Cache keine getrennten Kopien für mobile Geräte vor, kann ein Handy die Desktop-Version samt Umschalter erhalten, oder umgekehrt.
• Manche Tablets, vor allem iPads, melden sich als Desktop-Browser und zählen als Desktop.

Wenn eines davon zutrifft, lassen Sie Auf allen Geräten anzeigen (Show on all devices) stehen und blenden das Panel per CSS nach Bildschirmbreite aus, worüber der Browser bei jedem Seitenaufruf neu entscheidet:

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

Schaltflächen unter dem Umschalter lassen sich nicht antippen

Klassische Blöcke (Classic blocks) sitzt in einem fixierten, transparenten Kasten von 200 Pixeln Breite und 220 Pixeln Höhe, Rollblöcke (Roll blocks) in einer Spalte von 90 Pixeln. Auf einem Handy kann dieser Kasten einen Slider-Pfeil, eine Schaltfläche „In den Warenkorb“ oder das Menüsymbol verdecken, und Taps landen auf dem leeren Teil des Umschalters. Rundes Auswahlfeld (Round select) lässt Taps durch, solange es geschlossen ist. Verkleinern Sie den Kasten auf seinen Inhalt und setzen Sie ihn unter die eigenen Ebenen des Themes:

/* 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;
}

Die Standard-Stapelreihenfolge des Umschalters ist 99999 (9999 bei Rundes Auswahlfeld (Round select)), über fast allem, was ein Theme zeichnet. Mit 99 öffnen sich das Menü, die Warenkorb-Schublade oder das Cookie-Banner des Themes über ihm. Verdeckt das Theme dann den Umschalter selbst, erhöhen Sie die Zahl schrittweise.

Ein Tap ändert versehentlich die Währung

Touchscreens kennen kein Hover, daher kann sich das ausgleitende Panel von Klassische Blöcke (Classic blocks) bei einem Tap öffnen und über der Seite liegen, und der nächste Tap auf diesen Bereich wechselt die Währung. Schalten Sie das Panel auf Touchscreens ab:

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

Eine lange Liste passt nicht auf den Bildschirm

Ein fixiertes Panel scrollt nicht, sodass bei vielen Währungen die letzten unterhalb des Rands eines Handy-Bildschirms landen und nicht erreichbar sind. Zeigen Sie entweder weniger Währungen an (der Schalter Sichtbar (Visible)), oder lassen Sie das Panel auf kleinen Bildschirmen mit der Seite scrollen:

/* 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;
    }
}

Für ein schmaleres Panel setzen Sie Basisfeld(er) (Basic field(s)) auf __SIGN__ oder __FLAG__. Für andere Einstellungen auf Handys nutzen Sie den Filter am Ende dieser Anleitung.

CSS-Rezepte

Fügen Sie das CSS im Bereich „Zusätzliches CSS“ Ihres Themes ein (Design → Customizer → Zusätzliches CSS, oder Stile → Zusätzliches CSS im Site-Editor eines Block-Themes) und leeren Sie danach den Seiten-Cache. Das Präfix body macht die Regeln stärker als die eigenen Stile des Plugins. Beginnen Sie mit Hauptfarbe (Main color) und Hover-Farbe (Hover color); die folgenden Regeln decken ab, was diese nicht leisten.

/* 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%);
}

Reagiert das Panel nicht auf eine Regel, untersuchen Sie es in den Entwicklertools des Browsers: Klassische Blöcke (Classic blocks) ist ein ul.woocs_auto_switcher, Rollblöcke (Roll blocks) und Rundes Auswahlfeld (Round select) sind ein nav.woocs_auto_switcher, mit der Klasse left oder right für die Seite.

Unterschiedliche Einstellungen pro Gerät: woocs_side_switcher_data

Alle Panel-Einstellungen laufen durch den Filter woocs_side_switcher_data, bevor das Panel aufgebaut wird. Das Array hat die Schlüssel skin (classic_blocks, roll_blocks oder round_select), side, top, color, hover_color, basic_field und add_field (das Hover-Feld). Dieses Beispiel zeigt auf Handys eine kompakte runde Schaltfläche rechts und lässt die Desktop-Einstellungen unangetastet:

/*
 * 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;
});

Auch das stützt sich auf wp_is_mobile(), daher gilt der Hinweis zum Seiten-Cache von oben. Wenn Sie lieber ein in einer Ecke verankertes Dropdown als ein seitliches Panel möchten, lesen Sie wie Sie den Währungsumschalter am unteren Rand der Website platzieren.

Wenn er trotzdem nicht erscheint

• Aktivieren / Deaktivieren (Enable / Disable) ist im Tab Seitenrand (Side) eingeschaltet, und die Einstellungen wurden gespeichert.
• Die Seitenlisten enthalten keine Leerzeichen und verwenden product_category, nicht product-category.
• Verhalten für Geräte (Behavior for devices) und Umschalter auf der Checkout-Seite ausblenden (Hide switcher on checkout page) blenden ihn auf der Seite, die Sie testen, nicht aus.
• Bei mindestens zwei Währungen ist Sichtbar (Visible) eingeschaltet.
• Der Seiten-Cache und der Browser-Cache wurden nach der Änderung geleert, und kein Snippet gibt aus woocs_show_side_swither den Wert false zurück.

Erscheint das Panel weiterhin nicht oder verhält es sich anders als in den Einstellungen, eröffnen Sie ein Thema im FOX-Support-Forum mit dem Link zur Seite und Ihren Einstellungen im Tab Seitenrand (Side), und wir sehen es uns an.