Changer le symbole de la devise dans WooCommerce : signes et position

26 January 2027

Pour changer le symbole de la devise dans WooCommerce lorsque FOX est actif, modifiez-le dans FOX, pas dans WooCommerce. FOX décide du symbole que chaque prix affiche, y compris pour la devise de base, si bien qu'un snippet ou un réglage de WooCommerce n'a aucun effet visible. Vous trouverez ci-dessous comment choisir un symbole pour une devise, en ajouter un qui manque dans la liste (US$, CA$, HK$, S/, ou un texte simple comme AED), le placer à gauche ou à droite du montant, utiliser une image pour les signes qui n'ont pas encore de caractère, et corriger un symbole qu'un thème ou un plugin de traduction remplace sans cesse.

D'où FOX tire le symbole de la devise

Chaque devise de l'onglet Devises (Currencies) des réglages de FOX (WooCommerce → Réglages → Devise) correspond à une ligne, et deux de ses colonnes commandent le signe : Symbole (Symbol) et Position. Sur le site, FOX répond aux filtres woocommerce_currency_symbol et woocommerce_price_format de WooCommerce avec la priorité 9999, en utilisant les valeurs de la devise que le visiteur a sélectionnée. Cela a trois conséquences :

Le symbole et la Position de la devise (Currency position) dans WooCommerce → Réglages → Général n'ont plus d'importance. La devise de base reçoit son symbole et sa position de sa ligne FOX, comme toutes les autres devises.
Un snippet woocommerce_currency_symbol avec la priorité par défaut s'exécute avant FOX, et FOX écrase son résultat. Ce snippet est donc inutile.
Tout ce qui affiche des prix via WooCommerce (pages produit, panier, mini-panier, paiement, e-mails envoyés dans cette devise) montre automatiquement le même symbole.

La colonne Symbole (Symbol) est une liste déroulante, pas un champ de texte. Elle propose la liste intégrée des symboles du monde, plus vos propres symboles personnalisés ; un signe absent de la liste doit donc être ajouté d'abord.

Ajouter un symbole de devise absent de la liste

La liste intégrée ne contient qu'un signe par devise, ce qui ne suffit souvent pas : $ désigne le peso argentin en Argentine et le dollar américain ailleurs, les roupies indienne et pakistanaise se ressemblent dans beaucoup de polices, et certains marchés préfèrent un code comme AED ou SAR au signe local. Ajoutez le vôtre :

Dans l'onglet Devises (Currencies), cliquez sur Ajouter des symboles monétaires personnalisés (Add custom currency symbols). Cela ouvre l'onglet Options au niveau du champ Symboles monétaires personnalisés (Custom currency symbols).
Saisissez les symboles séparés par des virgules, sans espace après les virgules, par exemple US$,CA$,HK$,S/,AED. Un espace après une virgule fait partie du symbole suivant.
Enregistrez les réglages. Les nouveaux symboles ne sont ajoutés à la fin de chaque liste déroulante Symbole (Symbol) qu'après cet enregistrement.
Revenez à l'onglet Devises (Currencies), choisissez le nouveau symbole dans la ligne de la devise (ou ajoutez d'abord la devise avec Ajouter une devise (Append Currency)), puis enregistrez de nouveau.

Le champ accepte du texte brut. Les lettres, les signes Unicode et les codes courts fonctionnent ; le HTML est échappé, si bien qu'une balise <img> ne peut pas servir de symbole (voir la méthode par image plus bas). Gardez un symbole personnalisé dans le champ tant qu'une devise l'utilise : la liste déroulante ne propose que les symboles listés, donc si vous le supprimez, l'enregistrement suivant donnerait à cette devise le premier symbole de la liste.

Les développeurs peuvent ajouter des symboles dans le code avec le filtre woocs_currency_symbols, qui reçoit la liste complète :

/*
 * FOX: add symbols to the Symbol drop-down of the currency rows.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woocs_currency_symbols', function ($symbols) {
    $symbols[] = 'US$';
    $symbols[] = 'CA$';
    return $symbols;
});

Une devise sans code ISO (une unité de fidélité, les Telegram Stars) demande plus qu'un symbole, car WooCommerce valide les codes de devise. Ce cas est traité dans codes de devise personnalisés.

Position du symbole monétaire : à gauche ou à droite, avec ou sans espace

La colonne Position de chaque ligne propose quatre options :

Option	Résultat pour 129.99 en PLN
$P - à gauche ($P - left)	zł129.99
P$ - à droite (P$ - right)	129.99zł
$ P - à gauche avec espace ($ P - left space)	zł 129.99
P $ - à droite avec espace (P $ - right space)	129.99 zł

L'espace est une espace insécable, de sorte que le symbole ne passe jamais seul à la ligne suivante, séparé du montant. Chaque devise garde sa propre position, ce qui permet à une même boutique d'afficher côte à côte $1,299.00 et 1 299,00 €. Les décimales et les séparateurs se règlent dans la même ligne ; voir symboles monétaires du monde pour les conventions des différents marchés.

Si la position est correcte dans FOX mais qu'un type de prix affiche encore le signe du mauvais côté (souvent les fourchettes de produits variables ou les prix dans un widget de constructeur de pages), ce prix n'est pas construit par le formateur de WooCommerce : un modèle de thème ou un autre plugin assemble lui-même la chaîne. Passez à un thème par défaut comme Storefront sur une copie de test, ou désactivez un à un les plugins liés aux prix, pour trouver le responsable. Deux réglages sont souvent pris pour la position du symbole. L'onglet Latéral (Side) positionne le sélecteur flottant. Le champ Format de prix personnalisé (Custom price format) de l'onglet Options enveloppe tout le prix formaté : __PRICE__ (__CODE__) affiche le prix avec son symbole puis le code de la devise, par exemple 129.99 zł (PLN), mais il ne déplace pas le symbole.

Afficher un autre symbole sans convertir les prix

Parfois, le but est seulement d'avoir un autre signe pour une région, avec les mêmes nombres. Ajoutez la devise, mettez son taux à 1 et saisissez 1 dans les deux champs Plancher (Floor) et Plafond (Ceiling) de sa colonne Plancher/plafond du taux (Rate floor/ceiling). Les mises à jour automatiques des taux ne peuvent alors plus éloigner le taux de 1, et passer à cette devise ne change que le symbole (et le code de la devise, si la boutique permet aux clients de payer dans la devise sélectionnée).

Symboles sans caractère : le nouveau signe du dirham et autres images

Certains signes, comme le signe du dirham que les Émirats arabes unis ont introduit en 2025, n'existent pas encore sous forme de caractère que les polices courantes savent afficher. Ils n'existent que sous forme d'image. La configuration fiable consiste à utiliser un symbole texte qui fonctionne partout (AED, Dhs) et un petit script qui remplace ce texte par l'image dans le navigateur du visiteur :

/*
 * FOX: show an image instead of a text currency symbol.
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    ?>
    <script>
    (function () {
        var symbolText = 'AED'; // the text symbol selected for the currency in FOX
        var imageUrl = '/wp-content/uploads/dirham-sign.svg'; // your image in the Media Library

        function swapSymbols() {
            document.querySelectorAll('.woocommerce-Price-currencySymbol').forEach(function (el) {
                if (el.textContent.trim() === symbolText) {
                    el.innerHTML = '<img src="' + imageUrl + '" alt="' + symbolText + '" class="fox-symbol-img">';
                }
            });
        }

        swapSymbols();
        // prices added later: mini cart, checkout updates, AJAX product lists
        new MutationObserver(swapSymbols).observe(document.body, {childList: true, subtree: true});
    })();
    </script>
    <style>
    .fox-symbol-img { display: inline-block; height: 0.8em; width: auto; margin: 0; vertical-align: baseline; }
    </style>
    <?php
}, 999);

Le script modifie chaque élément woocommerce-Price-currencySymbol, c'est-à-dire l'endroit où WooCommerce place le signe dans chaque prix formaté. Le symbole texte reste là où aucun script de navigateur ne s'exécute ou là où les prix sont dessinés autrement : e-mails de commande, factures PDF, administration, liste déroulante du sélecteur (une option de liste déroulante ne peut pas contenir d'image) et panier et paiement basés sur des blocs, qui affichent le symbole dans le texte du montant. C'est pourquoi le symbole texte doit être un signe que vos clients comprennent à lui seul.

Un symbole différent selon la langue

Sur un site multilingue, vous pouvez vouloir د.إ sur la version arabe et AED sur la version anglaise. FOX fait passer les données de devise par le filtre woocs_currency_data_manipulation côté visiteur, de sorte que le symbole peut être modifié pour chaque requête. La page de réglages lit les devises sans ce filtre, ce qui laisse intacts vos symboles enregistrés.

/*
 * FOX: currency symbol per site language (WPML).
 * With Polylang use: $lang = function_exists('pll_current_language') ? pll_current_language() : '';
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woocs_currency_data_manipulation', function ($currencies) {
    $lang = apply_filters('wpml_current_language', null);

    if ($lang === 'ar' && isset($currencies['AED'])) {
        $currencies['AED']['symbol'] = 'د.إ';
    }

    return $currencies;
}, 20);

Pour changer la devise elle-même lorsque la langue change, voir comment changer de devise avec la langue dans WPML.

Le mauvais symbole apparaît sur le site

Un plugin de traduction réécrit le symbole

FOX ne traduit pas les symboles. Les plugins de traduction automatique et la traduction intégrée du navigateur, si : ils lisent SEK comme un mot et le transforment en kr, ou traduisent un symbole texte dans une autre langue. Excluez les prix de la traduction dans les réglages du traducteur (la plupart proposent une option « ne pas traduire » ou d'exclusion qui accepte des sélecteurs CSS) : .woocommerce-Price-amount couvre tous les prix affichés par WooCommerce, .woocs_price_code est l'enveloppe FOX autour des prix de produit, et .woocs_price_info est le bloc d'informations de prix de FOX.

Le symbole s'affiche comme un carré vide ou un autre signe

La police du thème n'a pas de glyphe pour ce caractère, et le navigateur se rabat sur une autre police ou dessine un carré. C'est courant avec les signes récents et avec la roupie et la hryvnia. Choisissez une police qui contient le caractère, ou passez la devise à un symbole texte comme Rs ou UAH via le champ des symboles personnalisés.

Le symbole ne change pas du tout

Le nouveau symbole a été saisi dans le champ des symboles personnalisés mais n'a pas été sélectionné dans la ligne de la devise, ou les réglages n'ont pas été enregistrés après la sélection.
Un cache de page sert encore le HTML généré avant la modification. Videz le cache du site et celui du CDN, puis vérifiez dans une fenêtre privée.
Le thème ou un plugin affiche les prix depuis son propre modèle avec un signe codé en dur. Si le signe est correct avec un thème par défaut, le thème est la cause.

Si le symbole est correct dans les réglages de FOX mais reste faux avec un thème par défaut et les autres plugins désactivés, décrivez la page et la devise sur le forum d'assistance de FOX.