如何实现WooCommerce变体商品描述在单页显示并随变体切换更新

我来帮你搞定这个问题！要实现变体描述在商品描述下方动态切换，咱们分两步走：先在页面上准备好显示容器，再用JS监听变体切换事件更新内容。

第一步：添加变体描述的显示容器（PHP代码） #

首先，咱们需要在单商品页面的产品描述下方，添加一个用来展示变体描述的容器，同时默认加载选中的第一个变体的描述。把下面的代码加到你主题的functions.php文件里，或者用自定义代码插件（比如Code Snippets）来添加：

add_action('woocommerce_after_single_product_summary', 'display_variant_description_container', 15);
function display_variant_description_container() {
    global $product;
    
    // 只对可变产品生效
    if (!$product->is_type('variable')) return;
    
    // 获取默认选中的变体（第一个变体）
    $default_variant = current($product->get_available_variations());
    $variant_description = isset($default_variant['meta']['_variant_description'][0]) ? $default_variant['meta']['_variant_description'][0] : '';
    
    // 输出容器
    echo '<div class="variant-description-wrapper">';
    echo '<h3>'.__('变体详情', 'woocommerce').'</h3>';
    echo '<div id="variant-description-content">'.wpautop($variant_description).'</div>';
    echo '</div>';
}

注意：这里的_variant_description是假设你给变体添加的自定义字段的meta key，如果你的字段名不一样，记得改成你实际用的那个！

如果你的变体描述是用其他方式存储的（比如某个插件添加的），可以调整获取描述的逻辑，比如直接获取变体ID的post meta：

// 替换上面的$variant_description部分
$default_variant_id = $default_variant['variation_id'];
$variant_description = get_post_meta($default_variant_id, '_variant_description', true);

第二步：添加JS实现变体切换时更新描述 #

接下来，咱们需要监听WooCommerce的变体切换事件，当用户选择不同变体时，自动更新描述内容。把下面的代码加到主题的functions.php里，或者加到自定义JS文件中：

add_action('wp_footer', 'variant_description_dynamic_update');
function variant_description_dynamic_update() {
    global $product;
    
    if (!$product->is_type('variable')) return;
?>
<script>
jQuery(document).ready(function($) {
    // 监听变体选择变化事件
    $('form.variations_form').on('woocommerce_variation_has_changed', function() {
        var $form = $(this);
        var variation = $form.find('.variation_id').val();
        
        // 如果没有选中变体，清空描述
        if (!variation) {
            $('#variant-description-content').html('');
            return;
        }
        
        // 获取当前选中变体的描述（从变体数据里提取）
        var variation_data = $form.data('product_variations');
        var current_variation = variation_data.find(function(item) {
            return item.variation_id == variation;
        });
        
        if (current_variation) {
            // 同样，这里的_meta_key要对应你的自定义字段
            var description = current_variation.meta._variant_description ? current_variation.meta._variant_description[0] : '';
            $('#variant-description-content').html(wpautop(description));
        }
    });
});
</script>
<?php
}

小提示：如果你的变体描述里有HTML格式，wpautop()会自动处理段落换行，让显示更规整；如果不需要这个功能，直接用description替换wpautop(description)即可。

额外优化：样式调整 #

如果需要给变体描述加一些样式，让它和页面风格统一，可以添加CSS：

.variant-description-wrapper {
    margin: 20px 0;
    padding: 15px;
    border-top: 1px solid #eee;
}
.variant-description-wrapper h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #333;
}
#variant-description-content {
    line-height: 1.6;
    color: #666;
}

这样操作之后，当用户切换变体时，描述就会自动更新啦！

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