移除WooCommerce默认变体下拉框并确保自定义变体表单正常加购

一、彻底移除默认变体下拉框 #

你之前尝试的代码无效，大概率是钩子优先级不对或者目标元素没匹配准，试试这两种更可靠的方案：

方案1：通过钩子移除变体模板 #

把这段代码放到主题的functions.php文件中，直接移除WooCommerce加载默认变体下拉框的相关钩子：

add_action( 'wp', 'remove_default_variation_elements' );
function remove_default_variation_elements() {
    global $product;
    if ( $product->is_type( 'variable' ) ) {
        // 移除属性选择区
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
        // 移除变体价格和添加按钮区域
        remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
        remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
    }
}

注意：如果你的自定义表格已经重新实现了添加购物车功能，这段代码不会影响核心流程；如果没实现，需要确保自定义表格里包含完整的加购按钮逻辑。

方案2：CSS强制隐藏（备选） #

要是钩子方法依旧无效，直接用CSS隐藏默认下拉框，添加到主题自定义CSS或style.css中：

/* 隐藏属性选择下拉框 */
.variations_form .variations {
    display: none !important;
}
/* 隐藏默认变体加购区域 */
.single_variation_wrap {
    display: none !important;
}

二、修复变体加购时选项字段传递问题 #

要让自定义选项（蓝色标注部分）随变体一起加入购物车，需要从按钮参数和钩子保存两方面处理：

1. 修改表格加购按钮的HTML结构 #

确保你的表格加购按钮旁，添加对应自定义选项的隐藏输入框，同时传递必要的产品ID信息：

<form class="variation-add-to-cart" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
    <!-- 传递自定义选项值 -->
    <input type="hidden" name="custom_option" value="<?php echo esc_attr( $your_custom_option_value ); ?>">
    <!-- 传递变体ID和产品ID -->
    <input type="hidden" name="variation_id" value="<?php echo $variation_id; ?>">
    <input type="hidden" name="product_id" value="<?php echo $product_id; ?>">
    <input type="hidden" name="add-to-cart" value="<?php echo $product_id; ?>">
    <button type="submit" class="button alt">加入购物车</button>
</form>

把代码里的custom_option替换为你实际的选项字段名，$your_custom_option_value替换为用户选择的选项值。

2. 用钩子保存自定义字段到购物车和订单 #

把这段代码放到functions.php中，确保自定义选项能被保存到购物车、显示在购物车/结账页面，最终同步到订单：

// 保存自定义选项到购物车项
add_filter( 'woocommerce_add_cart_item_data', 'save_custom_option_to_cart', 10, 3 );
function save_custom_option_to_cart( $cart_item_data, $product_id, $variation_id ) {
    if ( isset( $_POST['custom_option'] ) && ! empty( $_POST['custom_option'] ) ) {
        $cart_item_data['custom_option'] = sanitize_text_field( $_POST['custom_option'] );
        // 生成唯一标识，避免相同变体合并时丢失选项
        $cart_item_data['unique_key'] = md5( microtime() . rand() );
    }
    return $cart_item_data;
}

// 在购物车和结账页面显示自定义选项
add_filter( 'woocommerce_get_item_data', 'display_custom_option_in_cart', 10, 2 );
function display_custom_option_in_cart( $item_data, $cart_item ) {
    if ( isset( $cart_item['custom_option'] ) ) {
        $item_data[] = array(
            'key' => '自定义选项',
            'value' => wc_clean( $cart_item['custom_option'] )
        );
    }
    return $item_data;
}

// 把自定义选项保存到订单
add_action( 'woocommerce_checkout_create_order_line_item', 'save_custom_option_to_order', 10, 4 );
function save_custom_option_to_order( $item, $cart_item_key, $values, $order ) {
    if ( isset( $values['custom_option'] ) ) {
        $item->add_meta_data( '自定义选项', $values['custom_option'] );
    }
}

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