如何格式化 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 价格。