如何在WooCommerce产品页描述上方添加额外加入购物车按钮及变体选择

嘿，这两个需求都可以通过WooCommerce的钩子系统+自定义代码实现，完全不用碰核心文件，下面给你分步讲清楚：

可变产品的变体选择表单默认在产品摘要区（标题、价格那一块），我们可以通过“移除默认钩子+挂载到新位置”的方式调整：

function move_variation_form_to_description_top() {
    // 仅在单个产品页面且是可变产品时生效
    if ( ! is_product() || ! wc_get_product()->is_type( 'variable' ) ) {
        return;
    }

    // 移除默认位置的加购表单（包含变体选择组件）
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
    // 将表单添加到产品描述的上方区域
    add_action( 'woocommerce_before_single_product_description', 'woocommerce_template_single_add_to_cart', 10 );
}
add_action( 'wp', 'move_variation_form_to_description_top' );

这段代码会自动识别可变产品，把变体选择模块从原来的位置移到产品描述内容的前面。

额外按钮需要和原生按钮功能完全一致，针对简单产品和可变产品要分别处理（可变产品必须选好变体才能点击）：

function add_extra_add_to_cart_button() {
    global $product;

    // 仅在单个产品页面显示按钮
    if ( ! is_product() ) return;

    if ( $product->is_type( 'simple' ) ) {
        // 简单产品直接显示可点击的按钮
        echo '<button type="submit" class="single_add_to_cart_button button alt extra-add-to-cart">' . esc_html__( '额外加入购物车', 'woocommerce' ) . '</button>';
    } elseif ( $product->is_type( 'variable' ) ) {
        // 可变产品默认禁用，选好变体后WooCommerce的JS会自动启用（和原生按钮逻辑一致）
        echo '<button type="submit" class="single_add_to_cart_button button alt extra-add-to-cart disabled" disabled>' . esc_html__( '额外加入购物车', 'woocommerce' ) . '</button>';
    }
}
add_action( 'woocommerce_after_add_to_cart_button', 'add_extra_add_to_cart_button', 10 );

如果想让按钮和原生按钮并排显示，可以加一点自定义CSS：

.extra-add-to-cart {
    margin-left: 10px;
}

重要提示： #

• 以上代码建议添加到子主题的functions.php文件或者自定义插件中，不要直接修改主题核心文件，避免主题更新后代码丢失。
• 如果你的主题有自定义的产品模板，可能需要调整钩子的优先级或者目标钩子，确保代码生效。

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