WooCommerce：将可变产品加入购物车按钮移至描述下方

一、仅移动「加入购物车」按钮（确保功能正常） #

你之前的按钮能工作是因为它在可变产品的表单<form class="variations_form cart">内部，直接移到描述下方会脱离表单导致失效。下面的方案会添加一个独立按钮，并通过JS关联原表单实现提交：

add_action( 'woocommerce_after_single_product_summary', 'second_add_to_cart_button_after_description', 30 );
function second_add_to_cart_button_after_description() {
    global $product;

    // 仅对可变产品生效
    if ( ! $product->is_type( 'variable' ) ) return;

    echo '<div class="second-add-to-cart-wrapper" style="margin-top:20px;">';
    echo '<button type="button" class="single_add_to_cart_button button alt second-add-to-cart-btn">'. esc_html( $product->single_add_to_cart_text() ).'</button>';
    echo '</div>';

    // 添加JS让按钮触发原表单提交
    ?>
    <script>
        (function($) {
            $('.second-add-to-cart-btn').on('click', function(e) {
                e.preventDefault();
                // 触发可变产品表单的提交动作
                $('.variations_form.cart').submit();
            });
        })(jQuery);
    </script>
    <?php
}

• 钩子woocommerce_after_single_product_summary优先级设为30，确保按钮在产品描述tabs之后显示（默认tabs优先级为20）。
• 如果想把按钮放在描述tab内容的内部下方，只需把钩子换成woocommerce_description_panel即可。

二、复制完整区域（价格+变量选择器+加购按钮） #

如果需要完整复制顶部的可变产品交互区域，直接调用WooCommerce的模板文件就能实现功能完整的副本：

add_action( 'woocommerce_after_single_product_summary', 'duplicate_variable_add_to_cart_section_after_description', 30 );
function duplicate_variable_add_to_cart_section_after_description() {
    global $product;

    // 仅对可变产品生效
    if ( ! $product->is_type( 'variable' ) ) return;

    echo '<div class="duplicate-variable-add-to-cart-section" style="margin-top:30px; padding-top:20px; border-top:1px solid #eee;">';
    echo '<h3>'. __('再次加入购物车', 'woocommerce').'</h3>';

    // 输出产品价格
    wc_get_template( 'single-product/price.php' );

    // 输出变量选择器和加购按钮（包含完整表单逻辑）
    wc_get_template( 'single-product/add-to-cart/variable.php' );

    echo '</div>';
}

可选样式优化

复制的区域可能和原有样式冲突，可添加自定义CSS调整：

.duplicate-variable-add-to-cart-section .variations {
    margin-bottom: 15px;
}
.duplicate-variable-add-to-cart-section .single_variation_wrap {
    margin-top: 10px;
}

注意事项 #

1. 代码需添加到你的主题functions.php文件或自定义插件中，避免主题更新丢失。
2. 测试时确保已清除浏览器缓存，避免JS/CSS缓存导致样式或功能异常。

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