本教程详细指导如何在WooCommerce后台订单编辑页面添加自定义可编辑字段。通过利用WordPress和WooCommerce提供的动作钩子，您将学习如何创建输入框、安全地将用户输入的数据保存到数据库，并在后续订单查看时正确地显示这些信息。这对于需要扩展订单数据，如记录车辆总里程等特定业务场景至关重要，确保数据的持久性和可访问性。
1. 在WooCommerce后台订单页添加可编辑字段
要在woocommerce订单编辑页面添加一个自定义的可编辑字段，我们需要利用woocommerce_admin_order_data_after_order_details动作钩子。这个钩子允许我们在订单详情区域之后插入自定义内容。我们使用woocommerce内置的woocommerce_wp_text_input函数来创建一个文本输入框，它能够自动处理字段的渲染和样式。
关键点： 为了确保字段在编辑时能显示已保存的值，value参数必须从数据库中获取当前订单的对应元数据。
/**
* 在WooCommerce后台订单详情后添加自定义可编辑字段。
*
* @param WC_Order $order 当前订单对象。
*/
add_action( 'woocommerce_admin_order_data_after_order_details', 'add_editable_order_custom_km_field', 12, 1 );
function add_editable_order_custom_km_field( $order ) {
// 获取当前订单的自定义公里数，如果不存在则为空。
$custom_km_value = get_post_meta( $order->get_id(), 'custom_km', true );
woocommerce_wp_text_input( array(
'id' => 'custom_km', // 字段的唯一ID，也是元数据的键名
'label' => __( '总公里数:', 'woocommerce' ), // 字段标签
'value' => $custom_km_value, // 显示已保存的值
'wrapper_class' => 'form-field-wide', // CSS类，使字段占据整行宽度
'description' => __( '输入车辆总行驶公里数。', 'woocommerce' ), // 字段描述
) );
}
登录后复制
2. 保存自定义字段数据
仅仅添加了输入框并不能自动保存数据。我们需要另一个动作钩子woocommerce_process_shop_order_meta，它在订单保存时触发。在这个钩子中，我们将获取用户输入的值，并使用update_post_meta函数将其保存到数据库中。为了数据安全，务必使用wc_clean()函数对用户输入进行清理。
/**
* 保存自定义字段数据到订单元数据。
*
* @param int $order_id 当前订单的ID。
*/
add_action( 'woocommerce_process_shop_order_meta', 'save_custom_km_field_data' );
function save_custom_km_field_data( $order_id ) {
// 检查字段是否存在且非空
if ( isset( $_POST['custom_km'] ) ) {
// 清理并保存数据
update_post_meta( $order_id, 'custom_km', wc_clean( $_POST['custom_km'] ) );
}
}
登录后复制
3. 显示已保存的自定义字段
要将已保存的自定义字段值显示在WooCommerce后台订单详情页的特定位置，我们可以使用各种WooCommerce提供的钩子。例如，woocommerce_admin_order_data_after_billing_address钩子允许我们在账单地址之后显示信息。
/**
* 在WooCommerce后台订单详情页显示已保存的自定义公里数。
*
* @param WC_Order $order 当前订单对象。
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_km_on_admin_order', 10, 1 );
function display_custom_km_on_admin_order( $order ) {
// 获取已保存的自定义公里数
$custom_km = get_post_meta( $order->get_id(), 'custom_km', true );
// 如果有值，则显示
if ( ! empty( $custom_km ) ) {
echo '<p><strong>' . __( '总公里数:', 'woocommerce' ) . '</strong><br>' . esc_html( $custom_km ) . '</p>';
}
}
登录后复制
完整示例代码
您可以将以下所有代码添加到您主题的functions.php文件或一个自定义插件中。
<?php
/**
* WooCommerce 后台订单自定义字段管理
*
* 本文件包含在WooCommerce后台订单页面添加、保存和显示自定义字段的函数。
*/
/**
* 1. 在WooCommerce后台订单详情后添加自定义可编辑字段。
*
* 使用 woocommerce_admin_order_data_after_order_details 钩子在订单详情区域后插入输入框。
*
* @param WC_Order $order 当前订单对象。
*/
add_action( 'woocommerce_admin_order_data_after_order_details', 'add_editable_order_custom_km_field', 12, 1 );
function add_editable_order_custom_km_field( $order ) {
// 获取当前订单的自定义公里数，如果不存在则为空。
// 这确保了字段在编辑时能显示已保存的值。
$custom_km_value = get_post_meta( $order->get_id(), 'custom_km', true );
woocommerce_wp_text_input( array(
'id' => 'custom_km', // 字段的唯一ID，也是元数据的键名
'label' => __( '总公里数:', 'woocommerce' ), // 字段标签
'value' => $custom_km_value, // 显示已保存的值
'wrapper_class' => 'form-field-wide', // CSS类，使字段占据整行宽度
'description' => __( '输入车辆总行驶公里数。', 'woocommerce' ), // 字段描述
) );
}
/**
* 2. 保存自定义字段数据到订单元数据。
*
* 使用 woocommerce_process_shop_order_meta 钩子在订单保存时触发。
*
* @param int $order_id 当前订单的ID。
*/
add_action( 'woocommerce_process_shop_order_meta', 'save_custom_km_field_data' );
function save_custom_km_field_data( $order_id ) {
// 检查字段是否存在且非空，并对用户输入进行清理以确保数据安全。
if ( isset( $_POST['custom_km'] ) ) {
update_post_meta( $order_id, 'custom_km', wc_clean( $_POST['custom_km'] ) );
}
}
/**
* 3. 在WooCommerce后台订单详情页显示已保存的自定义公里数。
*
* 使用 woocommerce_admin_order_data_after_billing_address 钩子在账单地址后显示信息。
* 您可以根据需要选择其他钩子来调整显示位置。
*
* @param WC_Order $order 当前订单对象。
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_km_on_admin_order', 10, 1 );
function display_custom_km_on_admin_order( $order ) {
// 获取已保存的自定义公里数。
$custom_km = get_post_meta( $order->get_id(), 'custom_km', true );
// 如果有值，则显示。使用 esc_html() 进行输出转义以防止XSS攻击。
if ( ! empty( $custom_km ) ) {
echo '<p><strong>' . __( '总公里数:', 'woocommerce' ) . '</strong><br>' . esc_html( $custom_km ) . '</p>';
}
}
登录后复制
注意事项
- 钩子选择： WooCommerce提供了大量的动作钩子，允许您将自定义字段放置在订单详情页的不同位置。除了示例中使用的钩子，您还可以探索其他如woocommerce_admin_order_data_after_order_details（订单详情后）、woocommerce_admin_order_data_after_billing_address（账单地址后）、woocommerce_admin_order_data_after_shipping_address（配送地址后）等，选择最适合您业务需求的插入点。
- 数据安全与清理： 在保存用户输入数据到数据库之前，务必使用wc_clean()（WooCommerce提供的清理函数）或WordPress的sanitize_text_field()等函数进行数据清理，以防止潜在的安全漏洞，如SQL注入或跨站脚本（XSS）攻击。在显示数据时，使用esc_html()等函数进行输出转义。
- 代码位置： 建议将此类自定义代码放入一个独立的WordPress插件中，而不是直接修改主题的functions.php文件。这样可以确保在主题更新时您的自定义功能不会丢失，并且更易于管理和迁移。
- 国际化： 示例代码中使用了__()函数进行字符串的国际化处理，这使得您的字段标签和描述可以被翻译成不同的语言，提升插件的可用性。
- 字段类型： woocommerce_wp_text_input用于文本输入，WooCommerce还提供了其他类似的函数，如woocommerce_wp_checkbox()、woocommerce_wp_select()等，可以根据您的需求选择不同的字段类型。
总结
通过上述步骤，您已经成功地在WooCommerce后台订单编辑页面添加了一个可编辑的自定义字段，并实现了其数据的保存和显示。这个过程涉及理解WooCommerce的动作钩子机制，以及如何安全地处理和存储自定义数据。掌握这些技能将使您能够灵活地扩展WooCommerce的功能，以满足各种复杂的业务需求。
以上就是在WooCommerce后台订单页添加可编辑自定义字段并保存显示的详细内容，更多请关注php中文网其它相关文章！