如何在WooCommerce单品页显示选中变体的单价×数量总价？

问题背景 #

原本通过PHP钩子实现单品页加购按钮显示价格，但切换变体时AJAX无法更新按钮文本；改用jQuery监听found_variation事件后，变体切换时价格显示正常，但调整购买数量时无法自动计算并更新总价。尝试用parseInt解析价格HTML内容失败，需要实现单价×数量的总价实时更新逻辑。

问题根源 #

1. variation.price_html是带HTML标签的字符串（如包含<span class="price">...</span>），直接用parseInt无法提取纯数字单价
2. 未监听数量输入框的变化事件，导致数量调整时无触发总价更新的逻辑
3. 错误将jQuery选择器直接传入parseInt，该函数仅接受数值类型参数，无法解析DOM选择器

解决步骤 #

1. 提取可靠的纯数字单价 #

直接调用WooCommerce变体对象内置的display_price属性，该属性是已处理好的纯数字单价，无需解析HTML字符串。

2. 监听数量变化事件 #

除了found_variation变体切换事件，额外监听数量输入框的input/change事件，确保数量调整时触发总价更新。

3. 封装通用更新逻辑 #

将总价计算、按钮文本更新的逻辑封装为独立函数，方便在多个事件中复用。

完整代码实现 #

jQuery(document).ready(function($) {
    // 封装加购按钮文本更新函数
    function updateAddToCartButton(variation) {
        // 处理数量为空/非数字的情况，默认取1
        var qty = parseInt($('.summary .quantity .qty').val()) || 1;
        // 获取当前变体的纯数字单价
        var unitPrice = variation ? variation.display_price : 0;
        // 计算总价
        var totalPrice = unitPrice * qty;
        
        // 使用WooCommerce内置函数格式化总价，适配站点货币设置
        var formattedTotal = wc_price(totalPrice);
        
        // 更新按钮文本
        $('.summary .single_add_to_cart_button').html('У кошик за ' + formattedTotal);
    }

    // 切换变体时更新按钮
    $(document).on('found_variation', 'form.cart', function(event, variation) {
        updateAddToCartButton(variation);
    });

    // 调整数量时更新按钮
    $('.summary .quantity .qty').on('input change', function() {
        // 获取当前激活的变体数据
        var currentVariation = $('form.cart').data('product_variations')?.find(v => v.is_active);
        if (currentVariation) {
            updateAddToCartButton(currentVariation);
        }
    });

    // 页面初始化时，若有默认选中变体则更新按钮
    var initialVariation = $('form.cart').data('product_variations')?.find(v => v.is_active);
    if (initialVariation) {
        updateAddToCartButton(initialVariation);
    }
});

补充说明 #

• wc_price是WooCommerce内置的前端价格格式化函数，会自动适配站点的货币符号、千分位分隔符等设置，比手动拼接字符串更可靠
• 用parseInt(qty) || 1做容错处理，避免数量为空或非数字时出现计算错误
• 从表单的data('product_variations')中获取当前激活变体，确保数量变化时能拿到正确的单价

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