Woodmart主题下如何调整WooCommerce产品变体描述的显示位置（移至woocommerce_single_product_summary并移除原位置）

嗨，我看你已经迈出了把变体描述移到woocommerce_single_product_summary区域的第一步，但遇到了原位置描述还在的问题对吧？别担心，咱们一步步来解决这个问题——既要让变体描述乖乖待在你想要的新位置，还要彻底把原位置的描述给去掉。

你的现有思路其实是对的，用JS监听变体选择事件来更新新容器的内容，咱们只要在这个基础上，加上移除原描述的操作就行。下面给你两种靠谱的方案，你可以根据自己的需求选：

方案一：JS隐藏原描述+完善新位置逻辑（简单直观） #

这个方案直接在你现有的代码基础上修改，同时处理原描述隐藏和空变体时的内容清空，体验更流畅：

add_action( 'woocommerce_single_product_summary', 'variable_product_description_on_selection', 25 );
function variable_product_description_on_selection() {
    global $product;
    if ( ! $product->is_type( 'variable' ) ) return;

    // 给新容器加个自定义类，避免和原容器冲突，方便后续样式调整
    echo '<div class="variation-description custom-variation-desc"></div>';

    wc_enqueue_js( "
        // 页面加载完成就立刻隐藏原位置的变体描述
        jQuery(document).ready(function($) {
            $('.woocommerce-variation-description').hide();
        });

        // 选择变体时更新新容器的描述内容
        $(document).on('found_variation', 'form.cart', function( event, variation ) {
            $('.custom-variation-desc').html(variation.variation_description);
        });

        // 重置变体选择时清空新容器，避免残留内容
        $(document).on('reset_data', 'form.cart', function() {
            $('.custom-variation-desc').empty();
        });
    " );
}

方案二：PHP层面移除原描述+JS更新新位置（更彻底，无闪现） #

如果担心页面加载时原描述会短暂闪现，那咱们直接从PHP层面把原描述的输出给移除掉，从根源解决问题：

// 先移除WooCommerce默认的原位置变体描述输出
remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_description', 10 );

// 再在目标位置添加变体描述的容器和逻辑
add_action( 'woocommerce_single_product_summary', 'variable_product_description_on_selection', 25 );
function variable_product_description_on_selection() {
    global $product;
    if ( ! $product->is_type( 'variable' ) ) return;

    echo '<div class="variation-description custom-variation-desc"></div>';

    wc_enqueue_js( "
        // 选择变体时更新新容器内容
        $(document).on('found_variation', 'form.cart', function( event, variation ) {
            $('.custom-variation-desc').html(variation.variation_description);
        });

        // 重置变体时清空内容
        $(document).on('reset_data', 'form.cart', function() {
            $('.custom-variation-desc').empty();
        });
    " );
}

几个关键注意事项 #

• 代码要加在哪里？ 你可以把代码放到子主题的functions.php文件末尾，或者用专门的自定义代码插件（比如Code Snippets）来添加，千万别直接修改Woodmart主题的核心文件，不然主题更新后代码就丢了。
• 为什么用优先级25？ woocommerce_single_product_summary钩子下的元素有不同的优先级数值，25这个值能让你的变体描述放在价格、加入购物车按钮附近的位置。如果你想调整它在这个区域内的上下位置，直接修改这个数字就行——数字越小越靠前，越大越靠后。
• 要是方案一隐藏后原描述还能看到？ 那可能是Woodmart主题给原描述加了自定义类名。你可以按F12打开浏览器开发者工具，找到原变体描述的元素，看看它的类名是什么，然后把JS里的.woocommerce-variation-description换成对应的类名就OK了。

这样操作下来，原位置的变体描述就会被彻底移除/隐藏，新的描述只会出现在你指定的woocommerce_single_product_summary区域里，完美解决你的问题！

内容来源于stack exchange