Comment formater les prix WooCommerce

Pour des raisons de design, de présentation ou pour être cohérent avec le thème du magasin ou de la marque, nous pouvons souvent souhaiter afficher nos prix dans différents formats. Dans cet article, vous apprendrez à formater les prix WooCommerce à l'aide de l'option Paramètres ainsi que de l'éditeur de code.

Le poste porte sur les trois points suivants :

1. Remplacement des séparateurs décimaux
2. Remplacement des séparateurs de milliers
3. Formatage des prix pour appliquer des styles tels que gras, italique ou souligné

1. Remplacement des séparateurs décimaux :

Souvent, vous pouvez avoir des valeurs décimales dans les prix de vos produits. C'est assez courant dans le cas d'une épicerie en ligne où les prix sont déterminés par le poids des légumes :

Dans de nombreux pays, le séparateur décimal est représenté par un point (.). Cependant, ce n'est pas vrai pour beaucoup d'autres pays comme l'Espagne, l'Afrique du Sud, le Brésil, la Suède, la Chine et 70 autres pays où le séparateur décimal est une virgule.

Des pays comme le Brésil utilisent le point (.) pour séparer parfois des milliers. Par exemple, douze mille cinq cents ne s'écrit pas « 12 500 », mais « 12 500 » ou même « 12 500 ».

Les prix doivent donc être affichés différemment lors de la conception d'un magasin pour un public ou une nationalité particulière. Nous verrons comment nous pouvons remplacer les points décimaux par des virgules ou des espaces dans WooCommerce.

Il existe deux façons de procéder, soit directement via les paramètres WooCommerce, soit via l'éditeur de code.
Modification du séparateur décimal via les paramètres WooCommerce
Passez votre souris sur l'étiquette WooCommerce dans votre tableau de bord WordPress et cliquez sur Paramètres. Dans WooCommerce->Paramètres, l'onglet Général affiche les éléments suivants lorsque vous faites défiler vers le bas :

Ici, vous pouvez changer la valeur de "Séparateur décimal" de "." à ","

Faire cela et cliquer sur "Enregistrer les modifications" affichera le point décimal sous forme de virgule :

De cette façon, vous pouvez utiliser n'importe quel séparateur de votre choix.
Modification du séparateur décimal via l'éditeur de code
Alors que WooCommerce fournit un moyen direct de changer le séparateur décimal, apprendre à le faire via le code est utile. Dans cet exemple, nous allons montrer comment remplacer le point décimal par un espace à l'aide de l'éditeur de code.

Il existe un petit extrait de code que vous pouvez insérer dans le fichier functions.php de votre thème enfant pour ce faire. (Pour savoir pourquoi on édite le functions.php du thème enfant et pas directement le fichier functions.php, lisez ce post.)

Extrait de code:

 add_filter( 'wc_price', 'woo_hide_decimal_point', 10, 4 );
function woo_hide_decimal_point( $return, $price, $args, $unformatted_price ) {
$unité = intval( $prix );
$décimal = sprintf( '%02d', ( $prix-$unité ) * 100 );
return sprintf( '%s %d %s', get_woocommerce_currency_symbol(), $unit, $decimal );
}

Et le résultat est que la virgule décimale est supprimée et remplacée par un espace :

Remarque : Le code ne fonctionnera qu'après avoir défini le séparateur décimal sur "." dans WooCommerce->Paramètres.

Vous pouvez remplacer l'espace par une virgule de la même manière en modifiant légèrement le code.

 add_filter( 'wc_price', 'woo_replace_decimal_point', 10, 4 );
function woo_replace_decimal_point( $return, $price, $args, $unformatted_price ) {
$unité = intval( $prix );
$décimal = sprintf( '%02d', ( $prix-$unité ) * 100 );
return sprintf( '%s %d,%s', get_woocommerce_currency_symbol(), $unit, $decimal );
} 

Pourquoi est-il préférable d'utiliser des extraits de code sur WooCommerce->Paramètres pour remplacer le séparateur décimal :

Utiliser l'éditeur de code plutôt que WooCommerce->Paramètres pour remplacer les points décimaux présente de nombreux avantages.

La première est que vous pouvez formater le prix comme vous le souhaitez. Si vous remarquez dans l'image ci-dessus, le prix a un espace après le symbole monétaire. Cet espace manque dans la première capture d'écran de ce post où le point décimal a été remplacé via WooCommerce-> Paramètres.

Un autre avantage est lorsque vous souhaitez que ces modifications soient effectuées uniquement pour un produit spécifique et non pour tous les produits de votre magasin. L'éditeur de code vous offre cette flexibilité.

En utilisant des extraits de code, vous pouvez également afficher la partie décimale du prix dans différents styles en insérant des balises HTML telles que <b>,<u>,<i>,<sup>,<sub> et bien d'autres.

Exemple : Ajout d'un trait de soulignement à la partie décimale du prix.

 add_filter( 'wc_price', 'woo_format_decimal_value', 10, 4 ); 
function woo_format_decimal_value( $return, $price, $args, $unformatted_price ) { 
$unité = intval( $prix ); 
$décimal = sprintf( '%02d', ( $prix-$unité ) * 100 ); 
return sprintf( '%s %d.<u>%s</u>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

L'extrait de code ci-dessus, lorsqu'il est inséré dans le fichier functions.php du thème enfant, ajoute un trait de soulignement à la partie décimale du prix :

Vous pouvez utiliser d'autres balises HTML de la même manière. Si vous souhaitez savoir comment afficher la valeur décimale en exposant ou en indice, lisez cet article.

2. Remplacement des séparateurs de milliers :

Tout comme les séparateurs décimaux sont affichés différemment dans certains pays, il en va de même pour les séparateurs de milliers.

Par exemple, dans des pays comme le Brésil, l'Afrique du Sud ou l'Espagne, les séparateurs de milliers sont désignés par un espace ou un point/point. Dans ces pays, treize mille cinq cents pourraient s'écrire 13 500 ou 13 500

Lorsque vous concevez votre magasin pour ce public, vous devez vous assurer que vous modifiez le séparateur de milliers en conséquence.

Tout comme les séparateurs décimaux, il existe deux façons de procéder, soit via WooCommerce-> Paramètres, soit via l'éditeur de code.
Modification du séparateur de milliers via les paramètres WooCommerce
Passez votre souris sur l'étiquette WooCommerce dans votre tableau de bord WordPress et cliquez sur Paramètres. Dans WooCommerce->Paramètres, l'onglet Général affiche les éléments suivants lorsque vous faites défiler vers le bas :

La modification de la valeur dans la zone de texte Séparateur de milliers par un espace à la place d'une virgule (« »,) modifiera la façon dont le séparateur de milliers est affiché. Notez que vous devez entrer un espace dans cette case. Le simple fait d'effacer la virgule n'entraînera pas la transformation du séparateur de milliers en espace.

Cliquez sur « Enregistrer les modifications » et affichez le produit :

Vous pouvez voir qu'il y a maintenant un espace à la place du séparateur de milliers.

Pour éviter toute confusion, vous pouvez définir les décimales sur "0" via WooCommerce->Paramètres pour les prix sans décimale :

Après avoir saisi ici le nombre de décimales sous la forme « 0 », cliquez sur « Enregistrer les modifications » et visualisez à nouveau le produit :

Modification du séparateur de milliers via l'éditeur de code

De même, nous pouvons changer le séparateur de milliers à l'aide d'extraits de code. Comme mentionné ci-dessus dans la section séparateur décimal, l'utilisation de l'éditeur de code présente toujours plus d'avantages car nous pouvons personnaliser ou styliser le prix comme nous le souhaitons, et même pour un produit spécifique, voire l'ensemble du magasin.

Essayons maintenant de remplacer le séparateur de milliers par un point (.) à l'aide d'un extrait de code.

Remarque : Une condition préalable à cela est que vous devez laisser la zone de séparation des milliers vide dans WooCommerce-> Paramètres. Pas d'espaces non plus.

 add_filter( 'wc_price', 'woo_format_thousand_separator', 10, 4 ); 
fonction woo_format_thousand_separator( $return, $price, $args, $unformatted_price) 
{ 
  $formatted_price=number_format($price,0,' ','.'); 
  return sprintf( '%s %s', get_woocommerce_currency_symbol(), $formatted_price); 
}

La fonction number_format est une fonction PHP intégrée qui accepte 4 arguments :

1. Le nombre ou dans notre cas, le prix.
2. Nombre de décimales. Nous l'avons mis à 0 car nous ne souhaitons pas afficher de valeurs décimales.
3. Le séparateur décimal que vous souhaitez utiliser. Nous l'avons défini sur une valeur vide.
4. Le séparateur de milliers. Nous l'avons défini sur un point (.).

Cet extrait de code, lorsqu'il est ajouté au fichier functions.php de votre thème enfant, affichera le séparateur de milliers sous la forme d'un point ou d'un point (.) comme illustré par la capture d'écran ci-dessous :

3. Formatage des prix WooCommerce :

Maintenant que vous savez comment formater les valeurs décimales et les séparateurs de milliers, il en va de même pour les prix en général. Bien que vous ne puissiez pas formater directement ces valeurs à l'aide de l'option Paramètres, vous pouvez le faire à l'aide de l'éditeur de code en apportant de légères modifications au code ci-dessus.

Exemple : Écrire le prix du produit en italique.

Dans des circonstances par défaut, le prix du produit est affiché comme suit :

Et si vous voulez ajouter un style à cela, par exemple l'écrire en italique ?

Vous pouvez y parvenir en apportant de légères modifications aux extraits de code ci-dessus.

Copiez simplement ce code dans le fichier functions.php de votre thème enfant :

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
function woo_format_price_italics( $return, $price, $args, $unformatted_price ) { 
$unité = intval( $prix ); 
$décimal = sprintf( '%02d', ( $prix-$unité ) * 100 ); 
return sprintf( '<i>%s %d.%s</i>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

Cela affichera le prix, ainsi que la virgule décimale, en italique :

Une légère modification de l'extrait de code empêchera également la partie décimale de s'afficher :

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
function woo_format_price_italics( $return, $price, $args, $unformatted_price ) { 
$unité = intval( $prix ); 
return sprintf( '<i>%s %d</i>', get_woocommerce_currency_symbol(), $unit); 
}

Comme vous pouvez le voir, vous pouvez voir le prix en italique ici, sans la partie décimale :

L'étude de l'extrait vous permettra de formater facilement les prix WooCommerce à votre manière.