在 WooCommerce 訂單列表中顯示訂單備註欄位

在經營 WooCommerce 電商時，訂單備註是一項重要的訊息來源，無論是使用者留言或是系統訊息，都可以幫助業者更好地掌握訂單狀態。然而，在 WooCommerce 的預設訂單列表中，並不會顯示這些備註，都是必須要點進訂單去看詳細，因此若能在訂單列表中加入備註欄位，將大幅提高操作便利性。本文將介紹如何在 WooCommerce 訂單列表頁面中新增備註欄位，並顯示所有的訂單備註內容。

以下是完整的程式碼，您可以將它加入到佈景主題資料夾中的 functions.php，或使用 Code Snippet 外掛來執行此功能。這樣的方式比依賴外掛更加穩定，也不會受到 WordPress 外掛更新的影響。

// 在 WooCommerce 訂單列表新增備註欄位
add_filter('manage_edit-shop_order_columns', 'add_order_note_column', 20);
function add_order_note_column($columns) {
    $new_columns = array();

    foreach ($columns as $column_name => $column_info) {
        $new_columns[$column_name] = $column_info;
        if ('order_status' === $column_name) {
            $new_columns['order_notes'] = '訂單備註';
        }
    }

    return $new_columns;
}

add_action('manage_shop_order_posts_custom_column', 'display_order_note_column_content');
function display_order_note_column_content($column) {
    global $post, $the_order;

    if ('order_notes' === $column) {
        $order = wc_get_order($post->ID);
        $notes = wc_get_order_notes(array('order_id' => $post->ID));

        if (!empty($notes)) {
            foreach ($notes as $note) {
                echo esc_html($note->content) . '
';
            }
        } else {
            echo '無備註';
        }
    }
}

文章目錄

程式碼運作原理

新增備註欄位：首先，我們透過 add_filter 並使用 manage_edit-shop_order_columns 這個篩選器，將新的「訂單備註」欄位加入訂單列表。函式 add_order_note_column 的目的就是在原有欄位中插入新的「訂單備註」欄位，並設定顯示標題為「訂單備註」。在 foreach 迴圈中，我們複製了現有欄位的結構，並在 order_status 欄位後面插入新的 order_notes 欄位。這樣，WooCommerce 訂單列表會出現新的「訂單備註」欄位。
顯示備註內容：接著，我們利用 add_action 來使用 manage_shop_order_posts_custom_column，並將 display_order_note_column_content 函式連結到新增的「訂單備註」欄位上。在這個函式中，我們判斷當前的欄位是否為 order_notes，如果是，我們會獲取該訂單的所有備註。使用 wc_get_order_notes 來取得該訂單的備註後，我們檢查備註是否存在。若有備註，會逐一輸出備註內容；若無備註，則顯示「無備註」的訊息。這樣的設計使得業者可以在訂單列表頁面即時檢視每筆訂單的備註內容。

如何應用這段程式碼

將上述程式碼直接貼到 functions.php 檔案或是使用 Code Snippet 外掛新增一段程式碼即可。在貼上或儲存後，您可以進入 WooCommerce 的「訂單」頁面檢視效果。新欄位「訂單備註」會顯示在「訂單狀態」欄位之後，並列出該訂單的所有備註。

進一步調整欄位格式

如果需要進一步調整欄位的外觀，您可以使用自訂的 CSS 來改善顯示方式，讓訂單備註的欄位在訂單列表中更易於閱讀。您可以在 wp-admin 的外觀 > 自訂 > 附加的 CSS 中加入以下範例 CSS 來調整欄位寬度：

/* 設定 WooCommerce 訂單備註欄位的寬度 */
.column-order_notes {
    width: 20%;
}

這段 CSS 程式碼將「訂單備註」欄位的寬度設為 20%，您可以根據需求調整寬度，確保備註內容能夠顯示完整。

常見問題

Q1: 如果訂單沒有備註內容會如何顯示？

當訂單沒有備註內容時，系統會顯示「無備註」，讓管理員可以快速了解該訂單是否有重要訊息。

Q2: 是否可以顯示特定條件的備註？

是的，您可以在取得訂單備註時使用額外參數，例如篩選出系統自動新增的備註或特定使用者新增的備註，這樣可以更精確地顯示訂單資訊。