WooCommerce可变产品自定义字段Einheitspreis预选值显示异常求助

看起来你碰到的是WooCommerce版本更新后，可变产品页面首次加载时预选中变体的"Einheitspreis"自定义字段不渲染的问题——确实，你猜的没错，问题就出在页面初始化时没有处理预选中变体的逻辑，原来的代码只监听了下拉框的change事件，没在页面刚加载时主动执行一次字段填充。

下面是修复后的完整代码，我会标注关键修改点：

修复后的代码 #

<?php 
$custom_data = array(); 
$has_custom_field = false; // 新增：标记是否有变体存在自定义字段

foreach ($available_variations as $prod_variation) : 
    $variation_id = $prod_variation['variation_id']; 
    $variation_object = get_post($variation_id); 
    $variable_custom_field = get_post_meta( $variation_object->ID, '_text_field', true); 
    $custom_data[$variation_id] = array( 
        "custom_field_value" => $variable_custom_field 
    ); 
    // 检查当前变体是否有自定义字段，只要有一个就标记为true
    if (!empty($variable_custom_field)) {
        $has_custom_field = true;
    }
endforeach; 
?>
<?php if ($has_custom_field) { ?> <!-- 修改：用新增的标记判断，避免循环外变量为空的问题 -->
<span>Einheitspreis: <span class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></span>
</span>
<?php } ?>
<script>
jQuery(function($) {
    var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
        variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
        $selected_variation_custom_field = $('.selected-variation-custom-field');

    // 新增：把字段填充逻辑抽成独立函数，方便初始化和change事件复用
    function updateCustomField() {
        var custom_field_value = "";
        // 获取当前选中的变体ID（WooCommerce自带的选中变体数据）
        var selectedVariationId = $('form.variations_form').find('.variation_id').val();
        
        if (selectedVariationId && variation_custom_fields[selectedVariationId]) {
            custom_field_value = variation_custom_fields[selectedVariationId].custom_field_value;
        }
        
        $selected_variation_custom_field.text( custom_field_value );
    }

    // 监听下拉框变化，更新字段
    $('table.variations').on('change', 'select', updateCustomField);

    // 新增：页面初始化时立即执行一次，处理预选中的变体
    updateCustomField();
});
</script>

关键修改说明 #

1. PHP部分优化：

   • 新增$has_custom_field变量，循环中检查所有变体是否存在自定义字段，解决原来循环外$variable_custom_field仅保留最后一个变体值导致的判断错误
   • 调整字段显示的条件判断，确保只要有变体有自定义字段就显示"Einheitspreis"元素

2. JS部分核心修复：

   • 把字段填充逻辑抽成updateCustomField函数，避免重复代码
   • 利用WooCommerce自带的.variation_id隐藏字段获取当前预选中的变体ID（比原来通过属性匹配更准确，尤其是多属性的可变产品）
   • 页面初始化完成后主动调用updateCustomField()，确保首次加载时预选中变体的自定义字段能正常显示

这样修改后，不管是页面首次加载还是切换变体选项，"Einheitspreis"字段都会正确对应当前选中的变体值啦。

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