WooCommerce多币种切换：非商品区域价格无法转换求助

方案一：用WooCommerce原生PHP函数/短代码输出价格 #

WooCommerce的wc_price()函数会自动调用多币种转换逻辑，不要硬写静态HTML，而是通过PHP或封装的短代码输出价格：

1. 直接用PHP代码（适用于主题模板文件） #

如果是在首页模板、自定义页面模板里，直接写入：

<?php
// 输出55欧元转换后的对应币种价格，currency参数指定原始货币
echo wc_price( 55, array( 'currency' => 'EUR' ) );
?>

wc_price()会根据当前选中的币种自动转换，并输出符合WooCommerce样式的价格HTML。

2. 封装短代码（适用于文章、编辑器内容） #

如果需要在博客文章、首页编辑器里插入价格，将以下代码添加到主题的functions.php或自定义插件中：

function custom_convertible_price_shortcode( $atts ) {
    // 设置短代码默认参数
    $atts = shortcode_atts( array(
        'amount' => 0,
        'currency' => 'EUR', // 默认原始货币为欧元
    ), $atts );
    
    // 验证并转换价格
    $amount = floatval( $atts['amount'] );
    if ( $amount <= 0 ) return '';
    
    return wc_price( $amount, array( 'currency' => esc_attr( $atts['currency'] ) ) );
}
add_shortcode( 'convertible_price', 'custom_convertible_price_shortcode' );

之后在编辑器里直接用短代码插入价格：

这件商品售价[convertible_price amount="55" currency="EUR"]

切换币种时，短代码输出的价格会自动同步转换。

方案二：静态HTML配合自定义JS实现前端转换 #

如果必须使用静态HTML结构，需要给价格元素标记原始数据，再通过JS监听币种切换事件完成转换：

1. 修改静态HTML结构 #

给价格容器添加原始金额和货币的自定义属性：

这件商品售价
<span class="custom-convertible-price" data-original-amount="55" data-original-currency="EUR">
    <span class="woocommerce-Price-amount amount"><bdi>55&nbsp;<span class="woocommerce-Price-currencySymbol">€</span></bdi></span>
</span>

2. 添加自定义JS代码 #

将以下代码添加到主题的自定义JS文件或后台「外观->自定义->额外JS」区域：

document.addEventListener('DOMContentLoaded', function() {
    // 定义转换逻辑
    function updateCustomPrices() {
        const priceElements = document.querySelectorAll('.custom-convertible-price');
        if (!priceElements.length) return;
        
        // 获取WooCommerce多币种的全局数据
        const wcMC = window.wc_multi_currency;
        if (!wcMC) return;
        
        const currentCurrency = wcMC.current_currency;
        const rates = wcMC.rates;
        const symbols = wcMC.currency_symbols;
        const locale = wcMC.locale;
        
        priceElements.forEach(el => {
            const originalAmount = parseFloat(el.dataset.originalAmount);
            const originalCurrency = el.dataset.originalCurrency;
            
            // 验证数据有效性
            if (!originalAmount || !rates[originalCurrency] || !rates[originalCurrency][currentCurrency]) return;
            
            // 计算转换后金额并格式化
            const convertedAmount = originalAmount * rates[originalCurrency][currentCurrency];
            const formattedPrice = new Intl.NumberFormat(locale, {
                style: 'currency',
                currency: currentCurrency,
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(convertedAmount);
            
            // 拆分金额和符号，匹配原有HTML结构
            const [amountPart, symbolPart] = formattedPrice.split(/(\D+)$/);
            const priceHTML = `<bdi>${amountPart.trim()}&nbsp;<span class="woocommerce-Price-currencySymbol">${symbolPart.trim()}</span></bdi>`;
            
            // 更新DOM内容
            el.querySelector('.woocommerce-Price-amount').innerHTML = priceHTML;
        });
    }
    
    // 页面加载时初始化转换
    updateCustomPrices();
    
    // 监听币种切换事件
    document.addEventListener('wc_multi_currency_switch', updateCustomPrices);
});

这段JS会在页面加载和用户切换币种时，自动读取原始价格数据，用WooCommerce提供的汇率计算并更新显示。

注意事项 #

• 优先使用方案一，后端转换更稳定，不会受JS禁用等问题影响。
• 方案二中的全局变量window.wc_multi_currency是WooCommerce Payments Multi-Currency内置的，确保插件版本兼容。

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