So formatieren Sie WooCommerce-Preise

Aus Gründen des Designs, der Präsentation oder um mit dem Laden- oder Markenthema übereinzustimmen, möchten wir unsere Preise möglicherweise oft in unterschiedlichen Formaten anzeigen. In diesem Beitrag erfahren Sie, wie Sie WooCommerce-Preise mit der Option Einstellungen sowie dem Code-Editor formatieren.

Der Beitrag umfasst die folgenden drei Punkte:

1. Ersetzen von Dezimaltrennzeichen
2. Ersetzen von Tausendertrennzeichen
3. Formatierungspreise zum Anwenden von Stilen wie Fett, Kursiv oder Unterstrichen

1. Dezimaltrennzeichen ersetzen:

Oft haben Sie Dezimalwerte in Ihren Produktpreisen. Dies ist im Falle eines Online-Lebensmittelgeschäfts, in dem die Preise durch das Gewicht des Gemüses bestimmt werden, durchaus üblich:

In vielen Ländern wird das Dezimaltrennzeichen durch einen Punkt (.) dargestellt. Dies gilt jedoch nicht für viele andere Länder wie Spanien, Südafrika, Brasilien, Schweden, China und 70 weitere Länder, in denen das Dezimaltrennzeichen ein Komma ist.

Länder wie Brasilien verwenden manchmal den Punkt (.), um Tausende zu trennen. Beispielsweise schreibt man Zwölftausendfünfhundert nicht als „12.500“, sondern als „12.500“ oder sogar „12.500“.

Preise müssen daher anders angezeigt werden, wenn ein Geschäft für ein bestimmtes Publikum oder eine bestimmte Nationalität gestaltet wird. Wir werden sehen, wie wir in WooCommerce Dezimalpunkte durch Kommas oder Leerzeichen ersetzen können.

Es gibt zwei Möglichkeiten, dies zu tun – entweder direkt über die WooCommerce-Einstellungen oder über den Code-Editor.
Ändern des Dezimaltrennzeichens über die WooCommerce-Einstellungen
Bewegen Sie die Maus über das WooCommerce-Label in Ihrem WordPress-Dashboard und klicken Sie auf Einstellungen. In WooCommerce->Einstellungen zeigt die Registerkarte Allgemein Folgendes, wenn Sie nach unten scrollen:

Hier können Sie den Wert von „Dezimaltrennzeichen“ von „.“ ändern. zu ","

Wenn Sie dies tun und auf „Änderungen speichern“ klicken, wird der Dezimalpunkt als Komma angezeigt:

Auf diese Weise können Sie beliebige Trennzeichen verwenden.
Ändern des Dezimaltrennzeichens über den Code-Editor
Während WooCommerce eine direkte Möglichkeit bietet, das Dezimaltrennzeichen zu ändern, ist es hilfreich, dies per Code zu lernen. In diesem Beispiel zeigen wir, wie Sie den Dezimalpunkt mithilfe des Code-Editors durch ein Leerzeichen ersetzen.

Dazu gibt es ein kleines Code-Snippet, das Sie in die Datei functions.php Ihres Child-Themes einfügen können. (Um zu erfahren, warum wir die functions.php des Child-Themes bearbeiten und nicht direkt die functions.php-Datei, lesen Sie diesen Beitrag.)

Code-Auszug:

 add_filter( 'wc_price', 'woo_hide_decimal_point', 10, 4 );
Funktion woo_hide_decimal_point( $return, $price, $args, $unformatted_price ) {
$Einheit = Intervall( $Preis );
$dezimal = sprintf( '%02d', ( $price-$unit ) * 100 );
return sprintf( '%s %d %s', get_woocommerce_currency_symbol(), $unit, $decimal );
}

Und das Ergebnis ist, dass der Dezimalpunkt entfernt und durch ein Leerzeichen ersetzt wird:

Hinweis: Der Code funktioniert nur, nachdem Sie das Dezimaltrennzeichen auf „.“ gesetzt haben. in WooCommerce->Einstellungen.

Sie können das Leerzeichen auf ähnliche Weise durch ein Komma ersetzen, indem Sie den Code nur ein wenig ändern.

 add_filter( 'wc_price', 'woo_replace_decimal_point', 10, 4 );
Funktion woo_replace_decimal_point( $return, $price, $args, $unformatted_price ) {
$Einheit = Intervall( $Preis );
$dezimal = sprintf( '%02d', ( $price-$unit ) * 100 );
return sprintf( '%s %d,%s', get_woocommerce_currency_symbol(), $unit, $decimal );
} 

Warum es besser ist, Codeschnipsel über WooCommerce->Einstellungen zu verwenden, um das Dezimaltrennzeichen zu ersetzen:

Die Verwendung des Code-Editors im Gegensatz zu WooCommerce->Einstellungen zum Ersetzen von Dezimalpunkten hat viele Vorteile.

Einer davon ist, dass Sie den Preis so formatieren können, wie Sie es möchten. Wie Sie im Bild oben bemerken, hat der Preis ein Leerzeichen nach dem Währungssymbol. Dieses Leerzeichen fehlt im ersten Screenshot dieses Beitrags, wo der Dezimalpunkt durch WooCommerce->Einstellungen ersetzt wurde.

Ein weiterer Vorteil ist, wenn Sie möchten, dass diese Änderungen nur für ein bestimmtes Produkt und nicht für alle Produkte Ihres Geschäfts vorgenommen werden. Die Verwendung des Code-Editors bietet Ihnen diese Flexibilität.

Durch die Verwendung von Codeschnipseln können Sie auch den Dezimalteil des Preises in verschiedenen Stilen anzeigen, indem Sie HTML-Tags wie <b>,<u>,<i>,<sup>,<sub> und viele mehr einfügen.

Beispiel: Hinzufügen eines Unterstrichs zum Dezimalteil des Preises.

 add_filter( 'wc_price', 'woo_format_decimal_value', 10, 4 ); 
Funktion woo_format_decimal_value( $return, $price, $args, $unformatted_price ) { 
$Einheit = Intervall( $Preis ); 
$dezimal = sprintf( '%02d', ( $price-$unit ) * 100 ); 
return sprintf( '%s %d.<u>%s</u>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

Wenn das obige Code-Snippet in die Datei functions.php des Child-Themes eingefügt wird, fügt es dem Dezimalteil des Preises eine Unterstreichung hinzu:

Sie können andere HTML-Tags auf die gleiche Weise verwenden. Wenn Sie wissen möchten, wie Sie den Dezimalwert hoch- oder tiefgestellt darstellen können, lesen Sie diesen Beitrag.

2. Ersetzen von Tausendertrennzeichen:

So wie Dezimaltrennzeichen in manchen Ländern unterschiedlich dargestellt werden, so ist das auch bei Tausendertrennzeichen der Fall.

Beispielsweise werden in Ländern wie Brasilien, Südafrika oder Spanien Tausendertrennzeichen durch ein Leerzeichen oder einen Punkt/Punkt gekennzeichnet. In diesen Ländern könnte dreizehntausendfünfhundert als 13.500 oder 13.500 geschrieben werden

Wenn Sie Ihren Shop für diese Zielgruppe gestalten, müssen Sie sicherstellen, dass Sie das Tausendertrennzeichen entsprechend bearbeiten.

Genauso wie Dezimaltrennzeichen gibt es zwei Möglichkeiten, dies zu tun, entweder über WooCommerce->Einstellungen oder über den Code-Editor.
Ändern des Tausendertrennzeichens über die WooCommerce-Einstellungen
Bewegen Sie die Maus über das WooCommerce-Label in Ihrem WordPress-Dashboard und klicken Sie auf Einstellungen. In WooCommerce->Einstellungen zeigt die Registerkarte Allgemein Folgendes, wenn Sie nach unten scrollen:

Wenn Sie den Wert im Textfeld Tausendertrennzeichen in ein Leerzeichen anstelle eines Kommas („,“) ändern, ändert sich die Art und Weise, wie das Tausendertrennzeichen angezeigt wird. Beachten Sie, dass Sie in dieses Feld ein Leerzeichen eingeben müssen. Das einfache Löschen des Kommas führt nicht dazu, dass das Tausendertrennzeichen in ein Leerzeichen geändert wird.

Klicken Sie auf „Änderungen speichern“ und sehen Sie sich das Produkt an:

Sie sehen, dass anstelle des Tausendertrennzeichens jetzt ein Leerzeichen steht.

Um Verwirrung zu vermeiden, können Sie die Nachkommastellen über WooCommerce->Einstellungen für Preise, bei denen es keine Nachkommastelle gibt, auf „0“ setzen:

Nachdem Sie hier die Anzahl der Dezimalstellen als „0“ eingetragen haben, klicken Sie auf „Änderungen speichern“ und sehen sich das Produkt erneut an:

Ändern des Tausendertrennzeichens über den Code-Editor

Ebenso können wir das Tausendertrennzeichen mithilfe von Codeschnipseln ändern. Wie oben im Abschnitt Dezimaltrennzeichen erwähnt, hat die Verwendung des Code-Editors immer mehr Vorteile, da wir den Preis nach unseren Wünschen anpassen oder gestalten können, und sogar für ein bestimmtes Produkt, wenn nicht für den gesamten Shop.

Versuchen wir nun, das Tausendertrennzeichen mit einem Code-Snippet in einen Punkt (.) zu ändern.

Hinweis: Voraussetzung dafür ist, dass Sie das Tausender-Trennzeichen in WooCommerce->Einstellungen leer lassen. Auch keine Leerzeichen.

 add_filter( 'wc_price', 'woo_format_thousand_separator', 10, 4 ); 
Funktion 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); 
}

Die Funktion number_format ist eine eingebaute PHP-Funktion, die 4 Argumente akzeptiert:

1. Die Anzahl oder in unserem Fall der Preis.
2. Anzahl der Dezimalstellen. Wir haben es auf 0 gesetzt, da wir keine Dezimalwerte anzeigen möchten.
3. Das Dezimaltrennzeichen, das Sie verwenden möchten. Wir haben dies auf einen leeren Wert gesetzt.
4. Das Tausendertrennzeichen. Wir haben dies auf einen Punkt (.) gesetzt.

Wenn dieses Code-Snippet zur Datei functions.php Ihres Child-Themes hinzugefügt wird, wird das Tausendertrennzeichen als Punkt oder Punkt (.) angezeigt, wie im folgenden Screenshot dargestellt:

3. WooCommerce-Preise formatieren:

Nachdem Sie nun wissen, wie Dezimalwerte und Tausendertrennzeichen formatiert werden, gilt das Gleiche für Preise im Allgemeinen. Obwohl Sie diese Werte nicht direkt mit der Option Einstellungen formatieren können, können Sie dies mit dem Code-Editor tun, indem Sie geringfügige Änderungen am obigen Code vornehmen.

Beispiel: Den Produktpreis kursiv schreiben.

Standardmäßig wird der Produktpreis wie folgt angezeigt:

Was ist, wenn Sie einen Stil hinzufügen möchten, z. B. kursiv schreiben?

Sie können dies erreichen, indem Sie geringfügige Änderungen an den obigen Code-Snippets vornehmen.

Kopieren Sie einfach diesen Code in die Datei functions.php Ihres Child-Themes:

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
Funktion woo_format_price_italics( $return, $price, $args, $unformatted_price ) { 
$Einheit = Intervall( $Preis ); 
$dezimal = sprintf( '%02d', ( $price-$unit ) * 100 ); 
return sprintf( '<i>%s %d.%s</i>', get_woocommerce_currency_symbol(), $unit, $decimal ); 
}

Dadurch wird der Preis zusammen mit dem Dezimalpunkt in Kursivschrift angezeigt:

Eine geringfügige Änderung im Code-Snippet verhindert auch, dass der Dezimalteil angezeigt wird:

 add_filter( 'wc_price', 'woo_format_price_italics', 10, 4 ); 
Funktion woo_format_price_italics( $return, $price, $args, $unformatted_price ) { 
$Einheit = Intervall( $Preis ); 
return sprintf( '<i>%s %d</i>', get_woocommerce_currency_symbol(), $unit); 
}

Wie Sie sehen können, können Sie hier den Preis ohne Dezimalstelle in Kursivschrift anzeigen:

Wenn Sie das Snippet studieren, können Sie WooCommerce-Preise ganz einfach auf Ihre eigene Weise formatieren.