如何为WooCommerce变体色板追加对应变体价格？

问题出在你依赖found_variation事件获取价格——这个事件仅在用户选中某个变体时触发，拿到的是当前选中变体的价格，自然无法匹配所有色板对应的不同变体价格。正确的思路是先一次性获取产品所有变体的价格数据，再给每个色板匹配对应的值。

修正后的代码 #

jQuery(document).ready(function($) {
    $('.variations_form').each(function() {
        var $form = $(this);
        // 获取WooCommerce内置的所有变体数据
        var allVariations = $form.data('product_variations');
        if (!allVariations) return;

        // 构建「属性值-对应价格」的映射表
        var variationPriceMap = {};
        $.each(allVariations, function(_, variation) {
            // 提取当前变体的尺寸属性值（对应你的pa_afmeting属性）
            var attrValue = variation.attributes['attribute_pa_afmeting'];
            if (!attrValue) return;

            // 处理价格显示：有促销价则同时显示原价和促销价，否则只显示常规价
            var priceHtml = variation.display_price !== variation.display_regular_price 
                ? `<del>${wc_price(variation.display_regular_price)}</del> <ins>${wc_price(variation.display_price)}</ins>`
                : wc_price(variation.display_price);
            
            variationPriceMap[attrValue] = priceHtml;
        });

        // 给每个色板追加对应价格
        $('.single-product [swatches-attr="attribute_pa_afmeting"] .cfvsw-swatches-option').each(function() {
            var $swatch = $(this);
            var swatchValue = $swatch.data('value');
            
            // 仅当存在对应价格且未添加过时追加
            if (variationPriceMap[swatchValue] && !$swatch.find('.swatch-price').length) {
                $swatch.append(`<span class="swatch-price">${variationPriceMap[swatchValue]}</span>`);
            }
        });
    });
});

代码说明 #

1. 获取全量变体数据：通过$form.data('product_variations')直接读取WooCommerce存储的所有变体信息，无需依赖用户交互事件。
2. 构建价格映射表：遍历所有变体，将每个尺寸属性值与对应价格（含促销价逻辑）绑定，方便后续快速匹配。
3. 匹配色板与价格：针对每个色板，通过data-value属性拿到对应属性值，从映射表中取出价格并追加，同时避免重复添加。

可选样式优化 #

可以添加CSS调整价格的显示位置和样式，比如：

.swatch-price {
    display: block;
    font-size: 0.9em;
    margin-top: 4px;
    color: #666;
    font-weight: normal;
}

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