WooCommerce 后台订单列表新增备注列,订单详情新增备注输入框

订单详情页:在「产品 item 模块」的最上方(整个 item 列表之前)加一个「后台备注」输入框(一个订单只有一个备注,不是每个商品)。

订单列表页:增加一列「后台备注」,显示该字段(仅后台可见)。

在functions.php文件中

/**
 * 后台订单备注功能(独立模块,仅管理员可见)
 */

add_action( 'woocommerce_admin_order_items_after_line_items', function( $order_id ) {
    $order = wc_get_order( $order_id );
    $note  = $order ? $order->get_meta( '_admin_order_note' ) : '';
    ?>
    <div class="order-admin-note" style="margin:15px 0; padding:10px; background:#f9f9f9; border:1px solid #ddd;">
        <label for="admin_order_note"><strong>后台备注(仅管理员可见):</strong></label><br>
        <textarea name="admin_order_note" id="admin_order_note" rows="3" style="width:100%;"><?php echo esc_textarea( $note ); ?></textarea>
    </div>
    <?php
});

// =====================
// 3. 保存备注
// =====================
add_action( 'woocommerce_process_shop_order_meta', function( $order_id ) {
    if ( isset( $_POST['admin_order_note'] ) ) {
        $order = wc_get_order( $order_id );
        if ( $order ) {
            $note = sanitize_textarea_field( $_POST['admin_order_note'] );
            $order->update_meta_data( '_admin_order_note', $note );
            $order->save();
        }
    }
});

// =====================
// 4. 订单列表增加列(在“订单状态”后)
// =====================
add_filter( 'woocommerce_shop_order_list_table_columns', function( $columns ) {
    $new_columns = [];

    foreach ( $columns as $key => $label ) {
        $new_columns[ $key ] = $label;
        if ( 'order_status' === $key ) {
            $new_columns['admin_order_note'] = '后台备注';
        }
    }

    return $new_columns;
}, 20 );

// 输出后台备注列内容
add_action( 'manage_woocommerce_page_wc-orders_custom_column', function( $column, $order ) {
    if ( 'admin_order_note' === $column ) {
        $note = $order->get_meta( '_admin_order_note' );
        echo $note ? esc_html( $note ) : '—';
    }
}, 20, 2 );

代码的效果如下:

在 WooCommerce 订单列表里为「后台备注」添加完整的快速编辑 UI,实现如下功能:

整体和 WordPress 的标准快速编辑一致

快速编辑弹窗里显示「后台备注」字段

支持修改并保存

保存后列表列显示最新值

// =====================
// 2. 输出后台备注列内容,带隐藏 input 供 JS 使用
// =====================
add_action( 'manage_woocommerce_page_wc-orders_custom_column', function( $column, $order ) {
    if ( 'admin_order_note' === $column ) {
        $note = $order->get_meta( '_admin_order_note' );
        echo '<span class="admin-order-note-display">' . ( $note ? esc_html( $note ) : '—' ) . '</span>';
        echo '<input type="hidden" class="admin-order-note-data" value="' . esc_attr( $note ) . '">';
    }
}, 20, 2 );

// =====================
// 3. 添加快速编辑 JS 和 textarea
// =====================
add_action( 'admin_footer-edit.php', function() {
    global $current_screen;
    if ( 'edit-shop_order' !== $current_screen->id ) return;
    ?>
    <script>
    jQuery(document).ready(function($){
        // 在快速编辑表单中添加 textarea
        var $inlineEditRow = $('#inline-edit');
        if ( $inlineEditRow.length && !$inlineEditRow.find('#admin_order_note').length ) {
            var $colRight = $inlineEditRow.find('.inline-edit-col-right');
            $colRight.append('<fieldset class="inline-edit-col-left"><div class="inline-edit-group"><label><span>后台备注</span><textarea name="admin_order_note" id="admin_order_note" style="width:100%;min-height:50px;"></textarea></label></div></fieldset>');
        }

        // 点击快速编辑时填充已有备注值
        $('a.editinline').on('click', function(){
            var post_id = inlineEditPost.getId(this);
            var $row = $('#post-' + post_id);
            var note = $row.find('.admin-order-note-data').val();
            $('#admin_order_note').val(note);
        });
    });
    </script>
    <style>
        /* 微调快速编辑表单 */
        #inline-edit #admin_order_note {
            width: 100%;
            min-height: 50px;
            margin-top: 5px;
        }
    </style>
    <?php
});

// =====================
// 4. 保存快速编辑内容
// =====================
add_action( 'save_post_shop_order', function( $post_id ) {
    if ( isset( $_POST['admin_order_note'] ) ) {
        $note = sanitize_textarea_field( $_POST['admin_order_note'] );
        $order = wc_get_order( $post_id );
        if ( $order ) {
            $order->update_meta_data( '_admin_order_note', $note );
            $order->save();
        }
    }
});

🔹 功能说明

  1. 列表列显示
    • 列名:后台备注
    • 显示值:订单保存的 _admin_order_note
    • 默认无备注显示
  2. 快速编辑弹窗
    • 弹窗右侧添加 textarea,标题为「后台备注」
    • 点击快速编辑时自动填充当前备注
    • 修改后保存,自动更新列表列显示
  3. 保存机制
    • 使用 save_post_shop_order 钩子保存
    • 与 WooCommerce 标准 meta 保存方式一致
  4. 体验
    • 和 WordPress 原生快速编辑一致
    • 不影响订单详情页原有模块

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论