WooCommerce 后台订单页添加、保存与显示可编辑自定义字段

在某些业务场景下，默认的 WooCommerce 订单信息可能无法满足所有的数据记录需求。例如，一个汽车服务网站可能需要在订单完成后记录车辆的总里程数。此时，在 WooCommerce 后台订单详情页添加一个自定义的可编辑字段就显得尤为重要。本文将指导您完成从字段显示、数据保存到数据检索的全过程。

1. 添加可编辑的自定义字段

要在 WooCommerce 后台订单详情页添加一个可编辑的文本输入框，我们需要利用 woocommerce_admin_order_data_after_order_details 动作钩子和 woocommerce_wp_text_input 函数。这个钩子允许我们在订单详情区域的特定位置插入自定义内容。

woocommerce_wp_text_input 函数是 WooCommerce 提供的一个便捷函数，用于生成标准的文本输入字段，它会自动处理字段的 HTML 结构和样式。

以下是实现代码，建议将其添加到您的主题 functions.php 文件或自定义插件中：

/**
 * 在 WooCommerce 后台订单详情页添加可编辑的自定义字段。
 *
 * @param WC_Order $order 订单对象。
 */
add_action( 'woocommerce_admin_order_data_after_order_details', 'add_editable_order_custom_field', 12, 1 );
function add_editable_order_custom_field( $order ){
    // 获取当前订单的自定义里程值，如果不存在则为空
    $custom_km_value = get_post_meta( $order->get_id(), 'custom_km', true );

    // 使用 woocommerce_wp_text_input 函数创建文本输入框
    woocommerce_wp_text_input( array(
        'id'            => 'custom_km', // 字段的唯一ID，用于保存和检索数据
        'label'         => __("总里程 (Km):", "woocommerce"), // 字段标签
        'value'         => $custom_km_value, // 字段的当前值，用于预填充
        'wrapper_class' => 'form-field-wide', // 字段的包装类，用于样式控制
        'description'   => __('请输入车辆的总里程数。', 'woocommerce'), // 字段描述
    ) );
}

代码解析：

• add_action(...): 将我们的函数挂载到 woocommerce_admin_order_data_after_order_details 钩子上。
• get_post_meta($order->get_id(), 'custom_km', true): 这一行非常关键，它用于从数据库中检索当前订单已保存的 custom_km 值，并将其作为输入框的 value 预填充，确保编辑时能看到当前数据。如果尚未保存，则返回空。
• id: 字段的唯一标识符，后续保存和检索数据时会用到。
• label: 在后台界面显示给用户的字段名称。
• value: 字段的默认值或已保存的值。
• wrapper_class: 用于控制字段在界面上的布局和样式。

2. 保存自定义字段数据

仅仅显示字段是不够的，用户输入的值还需要被保存到数据库中。WooCommerce 提供了 woocommerce_process_shop_order_meta 钩子，它在订单数据被保存或更新时触发。我们可以利用这个钩子来捕获用户输入的数据并将其存储为订单的元数据。

订单的元数据存储在 wp_postmeta 表中，每个订单实际上都是一个 post_type 为 shop_order 的文章。因此，我们可以使用 WordPress 提供的 update_post_meta 函数来保存数据。

FashionLabs

AI服装模特、商品图，可商用，低价提升销量神器

38

查看详情

/**
 * 保存自定义字段数据到订单元数据。
 *
 * @param int $order_id 订单ID。
 */
add_action( 'woocommerce_process_shop_order_meta', 'save_custom_order_field_data' );
function save_custom_order_field_data( $order_id ){
    // 检查 $_POST['custom_km'] 是否存在且非空，并进行数据清理
    if ( isset( $_POST['custom_km'] ) && ! empty( $_POST['custom_km'] ) ) {
        // 使用 wc_clean() 清理数据，防止XSS攻击等安全问题
        update_post_meta( $order_id, 'custom_km', wc_clean( $_POST['custom_km'] ) );
    } else {
        // 如果字段为空，可以选择删除或清空元数据
        delete_post_meta( $order_id, 'custom_km' );
    }
}

代码解析：

• add_action('woocommerce_process_shop_order_meta', ...): 将我们的保存函数绑定到订单保存的钩子上。
• $order_id: 钩子会自动传递当前正在处理的订单ID。
• isset( $_POST['custom_km'] ): 检查表单提交的数据中是否存在名为 custom_km 的字段。
• wc_clean( $_POST['custom_km'] ): 这是非常重要的一步，用于对用户输入的数据进行安全清理。wc_clean() 是 WooCommerce 提供的函数，它会去除不安全的 HTML、PHP 标签等，防止跨站脚本攻击（XSS）和其他安全漏洞。
• update_post_meta( $order_id, 'custom_km', ...): 将清理后的数据保存为订单ID为 $order_id 的元数据，元数据键名为 custom_km。如果该键已存在，则更新其值；如果不存在，则添加。
• delete_post_meta($order_id, 'custom_km'): 如果用户清空了字段并保存，我们应该将对应的元数据从数据库中删除，保持数据整洁。

3. 显示已保存的自定义数据（非编辑模式）

除了在编辑模式下显示字段值，有时我们可能希望在订单详情页的某个区域，以只读的方式显示这个自定义数据，例如在账单地址下方。这有助于管理员快速浏览关键信息。

我们可以使用 woocommerce_admin_order_data_after_billing_address 钩子来在账单地址下方显示数据。

/**
 * 在 WooCommerce 后台订单详情页显示已保存的自定义里程数据。
 *
 * @param WC_Order $order 订单对象。
 */
add_action('woocommerce_admin_order_data_after_billing_address', 'display_custom_distance_km', 10, 1);
function display_custom_distance_km($order)
{
    // 获取已保存的自定义里程数据
    $custom_km_value = get_post_meta($order->get_ID(), 'custom_km', true);

    // 如果存在值，则显示
    if ( ! empty( $custom_km_value ) ) {
        echo '<p><strong>总里程 (Km):</strong><br>' . esc_html($custom_km_value) . '</p>';
    }
}

代码解析：

• add_action('woocommerce_admin_order_data_after_billing_address', ...): 将函数挂载到账单地址后的钩子。
• get_post_meta($order->get_ID(), 'custom_km', true): 再次使用 get_post_meta 获取 custom_km 的值。
• esc_html($custom_km_value): 在输出数据到 HTML 之前，使用 esc_html() 函数进行转义，防止潜在的 XSS 攻击。

注意事项与最佳实践

1. 代码位置： 建议将上述代码放置在自定义插件中，而不是直接修改主题的 functions.php 文件。这样可以确保在主题更新时代码不会丢失，并且更易于管理和维护。
2. 钩子选择： WooCommerce 提供了大量的动作钩子，您可以根据需要选择最适合显示和保存自定义字段的位置。例如，如果您希望字段显示在订单总计下方，可以查找 woocommerce_admin_order_totals_after_tax 等相关钩子。
3. 数据类型： 本教程以文本输入框为例，但您可以根据需求使用其他类型的输入字段，如下拉选择框 (woocommerce_wp_select)、复选框 (woocommerce_wp_checkbox)、日期选择器等。每种类型都有对应的 woocommerce_wp_ 函数。
4. 数据验证： 在 save_custom_order_field_data 函数中，除了 wc_clean() 进行基本清理外，如果字段有特定的数据格式要求（例如必须是数字、邮箱格式等），您应该添加额外的数据验证逻辑，例如 is_numeric()、filter_var() 等。
5. 国际化： 示例代码中的字符串使用了 __() 函数进行国际化处理，这有助于您的网站支持多语言。

通过遵循本教程，您将能够灵活地为 WooCommerce 后台订单管理添加和管理自定义数据，极大地提升您的电商平台的功能性和用户体验。

以上就是WooCommerce 后台订单页添加、保存与显示可编辑自定义字段的详细内容，更多请关注php中文网其它相关文章！