如何格式化 WooCommerce 價格

出於設計、展示或與商店或品牌主題保持一致的原因，我們可能經常希望以不同的格式顯示我們的價格。 在這篇文章中，您將學習如何使用設置選項以及代碼編輯器來格式化 WooCommerce 價格。

該帖子涵蓋以下三點：

1. 替換小數分隔符
2. 更換千位分隔符
3. 格式化價格以應用粗體、斜體或下劃線等樣式

1. 替換小數分隔符：

通常，您的產品價格中可能包含十進制值。 這在網上雜貨店的情況下很常見，價格由蔬菜的重量決定：

在許多國家/地區，小數分隔符由點 (.) 表示。 但是，對於西班牙、南非、巴西、瑞典、中國和其他 70 個小數點分隔符為逗號的國家/地區，情況並非如此。

巴西等國家有時使用點 (.) 來分隔數千。 例如，一萬二千五百不是寫成“12,500”，而是寫成“12.500”甚至是“12500”。

因此，在為特定受眾或國籍設計商店時，需要以不同的方式顯示價格。 我們將看到如何在 WooCommerce 中用逗號或空格替換小數點。

有兩種方法可以直接通過 WooCommerce 設置或通過代碼編輯器執行此操作。
通過 WooCommerce 設置更改小數分隔符
將鼠標懸停在 WordPress 儀表板中的 WooCommerce 標籤上，然後單擊設置。 在 WooCommerce-> 設置中，當您向下滾動時，常規選項卡會顯示以下內容：

在這裡，您可以從“.”更改“小數分隔符”的值。 至 ”，”

執行此操作並單擊“保存更改”會將小數點顯示為逗號：

這樣，您可以使用您選擇的任何分隔符。
通過代碼編輯器更改小數分隔符
雖然 WooCommerce 提供了更改小數點分隔符的直接方法，但通過代碼學習這樣做很有用。 在此示例中，我們將演示如何使用代碼編輯器將小數點替換為空格。

您可以在子主題的functions.php 文件中插入一個小代碼片段來執行此操作。 （要知道為什麼我們編輯子主題的functions.php而不是直接編輯functions.php文件，請閱讀這篇文章。）

代碼片段：

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

結果是小數點被刪除並替換為空格：

注意：代碼只有在您將小數點分隔符設置為“.”後才能工作。 在 WooCommerce-> 設置中。

您可以通過稍微更改代碼以類似的方式將空格替換為逗號。

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

為什麼最好在 WooCommerce->Settings 上使用代碼片段來替換小數點分隔符：

使用代碼編輯器而不是 WooCommerce-> 設置來替換小數點有很多優點。

一是您可以按照自己的方式格式化價格。 如果您在上圖中註意到，價格在貨幣符號後有一個空格。 這篇文章的第一個屏幕截圖中缺少這個空格，其中小數點已通過 WooCommerce-> 設置替換。

另一個優勢是當您希望僅針對特定產品而不是商店的所有產品進行這些更改時。 使用代碼編輯器為您提供了這種靈活性。

通過使用代碼片段，您還可以通過插入 HTML 標籤（例如 <b>、<u>、<i>、<sup>、<sub> 等）以不同的樣式顯示價格的小數部分。

示例：在價格的小數部分添加下劃線。

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

上面的代碼片段，當插入到子主題的 functions.php 文件中時，會在價格的小數部分添加下劃線：

您可以以相同的方式使用其他 HTML 標記。 如果您想知道如何將十進制值顯示為上標或下標，請閱讀這篇文章。

2.更換千位分隔符：

就像在某些國家/地區以不同方式顯示小數分隔符一樣，千位分隔符也是如此。

例如，在巴西、南非或西班牙等國家/地區，千位分隔符由空格或點/點表示。 在這些國家，13500 可以寫成 13500 或 13500

當您為這些受眾設計商店時，您必須確保相應地編輯千位分隔符。

就像小數分隔符一樣，有兩種方法可以做到這一點，通過 WooCommerce->Settings 或通過代碼編輯器。
通過 WooCommerce 設置更改千位分隔符
將鼠標懸停在 WordPress 儀表板中的 WooCommerce 標籤上，然後單擊設置。 在 WooCommerce-> 設置中，當您向下滾動時，常規選項卡會顯示以下內容：

將千位分隔符文本框中的值更改為空格代替逗號 (“,”)，將更改千位分隔符的顯示方式。 請注意，您必須在此框中輸入一個空格。 簡單地刪除逗號不會導致千位分隔符變為空格。

單擊“保存更改”並查看產品：

您可以看到現在有一個空格代替千位分隔符。

為避免混淆，您可以通過 WooCommerce->Settings 將小數位設置為“0”，以設置沒有小數的價格：

在此處輸入小數位數為“0”後，點擊“保存更改”，再次查看產品：

通過代碼編輯器更改千位分隔符

同樣，我們可以使用代碼片段更改千位分隔符。 正如上面在小數分隔符部分中提到的，使用代碼編輯器總是具有更多優勢，因為我們可以按照我們想要的方式自定義或設置價格樣式，甚至可以針對特定產品（如果不是整個商店）。

現在讓我們嘗試使用代碼片段將千位分隔符更改為點 (.)。

注意：先決條件是您必須在 WooCommerce-> 設置中將千位分隔符框留空。 也沒有空格。

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

number_format函數是一個內置的 PHP 函數，它接受 4 個參數：

1. 數量或在我們的例子中是價格。
2. 小數位數。 我們已將其設置為 0，因為我們不希望顯示任何十進制值。
3. 您希望使用的小數分隔符。 我們已將其設置為空白值。
4. 千位分隔符。 我們已將其設置為點 (.)。

這段代碼片段，當添加到您的子主題的functions.php 文件時，會將千位分隔符顯示為一個點或點(.)，如下面的屏幕截圖所示：

3. 格式化 WooCommerce 價格：

現在您知道如何格式化十進制值和千位分隔符，這同樣適用於一般價格。 雖然您無法使用“設置”選項直接格式化這些值，但您可以使用代碼編輯器對上面的代碼進行輕微修改，從而做到這一點。

示例：以斜體書寫產品價格。

默認情況下，產品價格顯示如下：

如果你想給它添加一個樣式，比如用斜體寫呢？

您可以通過對上面的代碼片段稍作修改來實現這一點。

只需將此代碼複製到您的子主題的 functions.php 文件中：

 add_filter('wc_price', 'woo_format_price_italics', 10, 4); 
功能 woo_format_price_italics（$return，$price，$args，$unformatted_price）{ 
$unit = intval($price); 
$decimal = sprintf('%02d', ($price-$unit) * 100); 
return sprintf('<i>%s %d.%s</i>', get_woocommerce_currency_symbol(), $unit, $decimal); 
}

這樣做會以斜體顯示價格和小數點：

代碼片段中的微小變化也會使小數部分不顯示：

 add_filter('wc_price', 'woo_format_price_italics', 10, 4); 
功能 woo_format_price_italics（$return，$price，$args，$unformatted_price）{ 
$unit = intval($price); 
return sprintf('<i>%s %d</i>', get_woocommerce_currency_symbol(), $unit); 
}

如您所見，您可以在此處以斜體查看價格，沒有小數部分：

研究該片段將使您能夠以自己的方式輕鬆格式化 WooCommerce 價格。