WooCommerce存档页为简单产品添加Grade下拉选框并同步至购物车

步骤1：修正前端下拉框的表单关联 #

现有代码仅渲染了下拉框，但未确保它属于产品的添加购物车表单，导致参数无法正确传递。修改渲染逻辑，通过WooCommerce钩子将下拉框插入到添加购物车按钮的表单范围内：

// 在子主题的functions.php中添加，用于在存档页产品添加购物车按钮前插入Grade下拉框
add_action( 'woocommerce_before_add_to_cart_button', 'display_grade_dropdown_on_archive' );
function display_grade_dropdown_on_archive() {
    global $product;
    if ( ! $product->is_type('simple') ) return;

    $grade = $product->get_attribute('pa_grade');
    if ( empty($grade) ) return;

    echo '<div class="grade-select-wrapper">';
    echo '<label for="product_grade">Grade:</label>';
    echo '<select name="addon_grade" id="product_grade" required>';
    echo '<option value="">Select Grade</option>';

    $grade_values = array_map('trim', explode(',', $grade));
    foreach ($grade_values as $grade_value) {
        echo '<option value="' . esc_attr($grade_value) . '">' . esc_html($grade_value) . '</option>';
    }

    echo '</select>';
    echo '</div>';
}

这里将下拉框的name改为addon_grade，并添加required属性强制用户选择后才能加入购物车，同时通过钩子确保它处于添加购物车表单的有效范围内。

步骤2：保存选中的Grade到购物车项 #

通过WooCommerce钩子捕获选中的Grade值，将其保存到购物车项的元数据中：

// 处理添加购物车时的自定义参数，保存Grade到购物车项
add_filter( 'woocommerce_add_cart_item_data', 'save_grade_to_cart_item_data', 10, 3 );
function save_grade_to_cart_item_data( $cart_item_data, $product_id, $variation_id ) {
    if ( isset( $_POST['addon_grade'] ) && ! empty( $_POST['addon_grade'] ) ) {
        $grade_value = sanitize_text_field( $_POST['addon_grade'] );
        $cart_item_data['addon_grade'] = $grade_value;
        // 添加唯一键，确保相同产品不同Grade视为独立购物车项（可根据需求删除此行）
        $cart_item_data['unique_key'] = md5( microtime() . rand() );
    }
    return $cart_item_data;
}

步骤3：在购物车页面显示选中的Grade #

通过钩子修改购物车项的显示内容，让用户能看到自己选择的Grade：

// 在购物车页面展示选中的Grade
add_filter( 'woocommerce_get_item_data', 'display_grade_in_cart', 10, 2 );
function display_grade_in_cart( $item_data, $cart_item ) {
    if ( isset( $cart_item['addon_grade'] ) ) {
        $item_data[] = array(
            'key'     => 'Grade',
            'value'   => wc_clean( $cart_item['addon_grade'] ),
            'display' => '',
        );
    }
    return $item_data;
}

步骤4：将Grade同步到订单与邮件 #

确保选中的Grade能出现在订单详情、确认邮件及用户账户的订单记录中：

// 保存Grade到订单元数据，同步到订单与邮件
add_action( 'woocommerce_checkout_create_order_line_item', 'save_grade_to_order_item', 10, 4 );
function save_grade_to_order_item( $item, $cart_item_key, $values, $order ) {
    if ( isset( $values['addon_grade'] ) ) {
        $item->add_meta_data( 'Grade', $values['addon_grade'] );
    }
}

额外提示 #

• 若不需要将相同产品的不同Grade视为独立购物车项，可删除$cart_item_data['unique_key']这一行代码。
• 可通过自定义CSS美化.grade-select-wrapper的样式，调整下拉框与添加按钮的间距。
• 测试前请清空购物车，避免旧缓存数据影响结果。

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