iOS/Safari下WooCommerce商品价格小数点前末尾0被截断问题求解

• 服务端逻辑无异常：PHP代码运行在服务端，返回给所有客户端的内容完全一致，var_dump()结果也验证了$price输出值符合预期，排除WooCommerce去零过滤器、自定义正则逻辑的问题。
• 诱因是iOS Safari的默认行为：iOS Safari默认开启电话号码自动识别功能，会将页面中连续数字判定为可点击电话号码，识别过程中会错误裁剪末尾的0，属于Safari的已知兼容性问题。

方案1：全局禁用Safari电话号码识别（优先推荐） #

在网站<head>标签中添加如下meta标签，直接禁止Safari自动识别页面内的数字为电话号码：

<meta name="format-detection" content="telephone=no">

方案2：仅禁用价格区域的识别（需要保留其他位置电话号码识别时使用） #

修改价格输出代码，给价格容器添加属性避免被Safari识别为电话号码，同时添加语义化标注：

$raw_price = $product->get_variation_price( 'max', true );
$price = preg_replace( '/' . preg_quote( wc_get_price_decimal_separator(), '/' ) .  '0++$/', '', $raw_price );
// 增加属性避免识别
echo '<div class="corner" role="text" data-not-tel="true">$' . esc_html($price) . '</div>';

方案3：替换自定义正则为WooCommerce原生格式化方法 #

你的自定义正则逻辑可以替换为WooCommerce官方提供的价格格式化函数，自动适配你开启的woocommerce_price_trim_zeros配置，兼容性更强：

$raw_price = $product->get_variation_price( 'max', true );
$price = wc_price($raw_price, [
    'decimal_separator' => wc_get_price_decimal_separator(),
    'trim_zeros' => true
]);
echo '<div class="corner">' . $price . '</div>';

方案4：前端兜底修复 #

如果上述方案仍不生效，可以通过前端JS强制渲染正确价格：

1. 修改PHP输出代码，新增存储原始价格的自定义属性：

echo '<div class="corner" data-raw-price="' . esc_attr($price) . '">$' . esc_html($price) . '</div>';

2. 页面添加JS逻辑，加载完成后强制覆盖价格内容：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.corner[data-raw-price]').forEach(el => {
    el.textContent = '$' + el.dataset.rawPrice;
  });
});

内容的提问来源于stack exchange，提问作者JayStone22