WooCommerce单品页显示价格×数量问题：未改数量时显示NAN

我来帮你修复这个NaN的bug！问题出在初始加载或未选中变体时，你的JS代码尝试从.woocommerce-variation-price .amount这个元素抓取价格，但这个元素在简单产品页面或者未选择变体的可变产品页面根本不存在，导致parseFloat返回NaN，乘以数量后自然就是NaN了。

下面是修正后的完整代码，我做了几个关键优化：

add_action( 'woocommerce_before_add_to_cart_button', 'woocommerce_total_product_variation_price' );
function woocommerce_total_product_variation_price() {
    global $product;
    
    // 获取默认数量和初始单价
    $default_qty = isset($_POST['quantity']) ? (int)$_POST['quantity'] : 1;
    $initial_price = (float)$product->get_price();
    $initial_total = $initial_price * $default_qty;
    $currency_symbol = get_woocommerce_currency_symbol();
    
    // 输出初始总价容器
    echo sprintf(
        '<div id="product_total_price" style="margin-bottom:20px; display: block;">%s <span class="price">%s %s</span></div>',
        __('总价:', 'woocommerce'),
        wc_format_decimal($initial_total, wc_get_price_decimals()),
        $currency_symbol
    );
?>
<script>
jQuery(function($){
    const currencySymbol = '<?php echo esc_js($currency_symbol); ?>';
    const initialPrice = <?php echo esc_js($initial_price); ?>;
    const priceDecimals = <?php echo esc_js(wc_get_price_decimals()); ?>;
    
    function updateTotalPrice() {
        // 获取当前数量，确保是有效数字
        const qty = parseFloat($('.qty').val()) || 1;
        
        // 获取当前单价：优先用选中的变体价格，没有则用初始价格
        let currentPrice = initialPrice;
        const variationPriceEl = $('.woocommerce-variation-price .amount');
        if (variationPriceEl.length > 0) {
            // 解析变体价格，移除所有非数字和小数点的字符
            const priceText = variationPriceEl.text().replace(/[^0-9.,]/g, '');
            currentPrice = parseFloat(priceText.replace(',', '.')) || initialPrice;
        }
        
        // 计算并格式化总价
        const totalPrice = (currentPrice * qty).toFixed(priceDecimals);
        // 根据站点设置替换小数点和千分位（这里适配逗号作为小数点的情况）
        const formattedTotal = totalPrice.replace('.', ',');
        
        $('#product_total_price .price').text(`${formattedTotal} ${currencySymbol}`);
    }
    
    // 监听数量变化（输入+切换都触发）
    $('[name=quantity]').on('input change', updateTotalPrice);
    
    // 监听变体选择变化
    $('body').on('change', '.variations select', updateTotalPrice);
    
    // 页面加载完成后初始化
    updateTotalPrice();
});
</script>
<?php }

关键修改说明： #

• 初始值兜底：PHP端先计算好初始总价，避免JS初始时抓不到DOM元素导致NaN
• 价格解析容错：增加了判断，变体价格元素不存在时直接用产品的基础价格，同时对解析后的价格做有效性校验，确保不会出现NaN
• 通用货币处理：不再硬编码欧元符号，而是用WooCommerce内置的货币符号和小数位数设置，适配不同站点
• 更灵敏的事件监听：把数量的change事件改成input change，用户输入数量时能实时更新总价
• 安全输出：用esc_js()处理传递给JS的变量，避免XSS风险

这样修改后，不管是简单产品还是可变产品，初始加载、调整数量、切换变体时都能正确显示总价，不会再出现NaN了。

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