建立按訂單ID顯示WooCommerce訂單詳情的頁面

WooCommerce 是使用 WordPress 構建線上商店的強大工具，可處理從產品展示到購買處理、稅務管理等一切事務。

WooCommerce 的一個突出特點是它能夠儲存詳細的訂單資訊。它可以細緻地儲存訂單的方方面面，包括金額、貨幣、運輸詳情、稅收等。

這些詳細資訊對店主和客戶都很有價值。想象一下，建立一個頁面，使用者可以輕鬆檢視訂單詳細資訊，並自定義頁面以顯示其他資訊。

本指南將引導您完成建立自定義 WooCommerce 頁面的步驟，該頁面可根據訂單 ID 顯示訂單詳細資訊。

為什麼要建立自定義訂單詳情頁？

在 WooCommerce 中建立自定義訂單詳情頁有幾個優勢，既能滿足店主的需求，也能滿足客戶的需求。以下是您選擇這一途徑的幾個令人信服的理由：

1. 增強使用者體驗 – 自定義訂單詳情頁面可讓您展示最符合客戶需求的訂單資訊。它可以讓您定製頁面的佈局和內容，從而突出發貨狀態、產品詳情和交貨日期等重要細節，使客戶更容易快速找到所需的資訊。
2. 附加功能 – 自定義訂單詳情頁面可以讓您新增 WooCommerce 預設情況下無法使用的功能。例如，您可以顯示禮品資訊、特殊說明或每個訂單獨有的個性化備註等自定義欄位。
3. 互動性 – 自定義訂單詳情頁允許您加入互動元素，例如用於跟蹤訂單的進度條、相關產品連結或直接訪問客戶支援，從而為使用者提供更豐富、更吸引人的體驗。
4. 靈活性和適應性 – 建立自定義訂單詳情頁可讓您實施特定的業務邏輯，並適應不斷變化的需求。您可以根據自己商店的獨特標準顯示不同的資訊，如客戶所在位置或訂購的產品型別。

如何從 $order 物件中獲取訂單資料

在 WooCommerce 中，$order 物件是包含特定訂單所有資訊的核心部分。利用該物件，您可以獲取訂單的各種詳細資訊，如訂單 ID、訂單日期、賬單和送貨資訊以及購買的產品。

下面讓我們詳細介紹如何訪問和使用 $order 物件中的這些不同資料。

1. 讀取訂單物件

首先，必須使用 wc_get_order 函式獲取訂單物件。該函式接收訂單 ID 並返回相應的訂單物件。

$order_id = 123; // Example order ID
$order = wc_get_order( $order_id );

2. 訂單基本資訊

獲得 $order 物件後，就可以檢索訂單的基本資訊。下面是一些示例：

• Order ID — 訂單的唯一識別符號。
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  $order_id = $order->get_id();

  echo 'Order ID: ' . $order_id;

  $order_id = $order->get_id(); echo 'Order ID: ' . $order_id;

  $order_id = $order->get_id();
  echo 'Order ID: ' . $order_id;

• Order date — 訂單建立日期。
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  $order_date = $order->get_date_created();

  echo 'Order date: ' . wc_format_datetime( $order_date );

  $order_date = $order->get_date_created(); echo 'Order date: ' . wc_format_datetime( $order_date );

  $order_date = $order->get_date_created();
  echo 'Order date: ' . wc_format_datetime( $order_date );

• Order total — 訂單總金額。
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  $order_total = $order->get_formatted_order_total();

  echo 'Order total: ' . $order_total;

  $order_total = $order->get_formatted_order_total(); echo 'Order total: ' . $order_total;

  $order_total = $order->get_formatted_order_total();
  echo 'Order total: ' . $order_total;

3. 賬單資訊

賬單資訊包括客戶在結賬過程中提供的詳細資訊。您可以使用以下方法獲取這些詳細資訊：

• Billing address:
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  $billing_address = $order->get_formatted_billing_address();

  echo 'Billing address: ' . $billing_address;

  $billing_address = $order->get_formatted_billing_address(); echo 'Billing address: ' . $billing_address;

  $billing_address = $order->get_formatted_billing_address();
  echo 'Billing address: ' . $billing_address;

• Billing email:
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  $billing_email = $order->get_billing_email();

  echo 'Billing email: ' . $billing_email;

  $billing_email = $order->get_billing_email(); echo 'Billing email: ' . $billing_email;

  $billing_email = $order->get_billing_email();
  echo 'Billing email: ' . $billing_email;

• Billing phone:
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  $billing_phone = $order->get_billing_phone();

  echo 'Billing phone: ' . $billing_phone;

  $billing_phone = $order->get_billing_phone(); echo 'Billing phone: ' . $billing_phone;

  $billing_phone = $order->get_billing_phone();
  echo 'Billing phone: ' . $billing_phone;

4. 發貨資訊

發貨資訊包括訂單發貨地的詳細資訊。與賬單資訊類似，您可以使用 $order 物件訪問這些詳細資訊：

• Shipping address:
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  $shipping_address = $order->get_formatted_shipping_address();

  echo 'Shipping address: ' . $shipping_address;

  $shipping_address = $order->get_formatted_shipping_address(); echo 'Shipping address: ' . $shipping_address;

  $shipping_address = $order->get_formatted_shipping_address();
  echo 'Shipping address: ' . $shipping_address;

5. 訂購專案

您可以檢索訂單中包含的專案，如果您想顯示已購買的產品，這一點尤其有用。下面是獲取訂單專案的方法：

$items = $order->get_items();
foreach ( $items as $item_id => $item ) {
$product_name = $item->get_name();
$product_quantity = $item->get_quantity();
$product_total = $item->get_total();
echo 'Product name: ' . $product_name . '<br>';
echo 'Quantity: ' . $product_quantity . '<br>';
echo 'Total: ' . wc_price( $product_total ) . '<br>';
}

6. 付款和發貨方式

您還可以檢索有關訂單所使用的付款和發貨方式的資訊：

• 付款方式：
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  $payment_method = $order->get_payment_method_title();

  echo 'Payment method: ' . $payment_method;

  $payment_method = $order->get_payment_method_title(); echo 'Payment method: ' . $payment_method;

  $payment_method = $order->get_payment_method_title();
  echo 'Payment method: ' . $payment_method;

• 運輸方式：
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  $shipping_methods = $order->get_shipping_methods();

  foreach ( $shipping_methods as $shipping_method ) {

  echo 'Shipping method: ' . $shipping_method->get_name();

  }

  $shipping_methods = $order->get_shipping_methods(); foreach ( $shipping_methods as $shipping_method ) { echo 'Shipping method: ' . $shipping_method->get_name(); }

  $shipping_methods = $order->get_shipping_methods();
  foreach ( $shipping_methods as $shipping_method ) {
  echo 'Shipping method: ' . $shipping_method->get_name();
  }

7. 訂單狀態

訂單狀態有助於實現各種功能，如跟蹤訂單進度：

$order_status = wc_get_order_status_name( $order->get_status() );
echo 'Order status: ' . $order_status;

建立按訂單 ID 顯示訂單詳細資訊的頁面

為給客戶提供無縫體驗，建立一個自定義頁面，讓他們只需輸入訂單 ID 就能檢視訂單詳情，這樣做很有益處。

讓我們指導你建立一個頁面，包括設定模板和顯示訂單資訊。

Step 1：建立自定義頁面模板

首先，在 WordPress 主題中建立一個自定義頁面模板。該模板將用於顯示訂單詳細資訊。

為此，請訪問專案的原始碼。

在你的子主題目錄下建立一個名為 page-order-details.php 的新檔案。在該檔案中新增以下程式碼：

<?php
/**
* Template Name: Order Details
*/
get_header();
?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php
if ( isset( $_GET['order_id'] ) ) {
$order_id = intval( $_GET['order_id'] );
display_order_details( $order_id );
} else {
echo '<p>No order ID provided.</p>';
}
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_footer();
// Function to display order details
function display_order_details( $order_id ) {
$order = wc_get_order( $order_id );
if ( ! $order ) {
echo '<p>Invalid order ID.</p>';
return;
}
echo '<h2>Order Details</h2>';
echo '<ul>';
echo '<li>Order ID: ' . $order->get_id() . '</li>';
echo '<li>Order Date: ' . wc_format_datetime( $order->get_date_created() ) . '</li>';
echo '<li>Order Total: ' . $order->get_formatted_order_total() . '</li>';
echo '<li>Billing Address: ' . $order->get_formatted_billing_address() . '</li>';
echo '<li>Shipping Address: ' . $order->get_formatted_shipping_address() . '</li>';
echo '<li>Billing Email: ' . $order->get_billing_email() . '</li>';
echo '<li>Billing Phone: ' . $order->get_billing_phone() . '</li>';
echo '<li>Payment Method: ' . $order->get_payment_method_title() . '</li>';
echo '<li>Order Status: ' . wc_get_order_status_name( $order->get_status() ) . '</li>';
echo '</ul>';
echo '<h3>Order Items</h3>';
echo '<ul>';
$items = $order->get_items();
foreach ( $items as $item_id => $item ) {
echo '<li>';
echo 'Product Name: ' . $item->get_name() . '<br>';
echo 'Quantity: ' . $item->get_quantity() . '<br>';
echo 'Total: ' . wc_price( $item->get_total() ) . '<br>';
echo '</li>';
}
echo '</ul>';
}

讓我們來分析一下這段程式碼，以便大家理解。

首先，你會注意到 get_header() 和 get_footer() 函式，它們包含了WordPress頁面的標準頁首和頁尾，確保了網站的整體設計和佈局。

我們還使用了一些基本的 HTML 標記，它們對於在網頁上顯示文字非常重要。下一個值得注意的重要程式碼是檢查是否將 order_id 作為 URL 引數傳遞的條件。

if ( isset( $_GET['order_id'] ) ) {
$order_id = intval( $_GET['order_id'] );
display_order_details( $order_id );
} else {
echo '<p>No order ID provided.</p>';
}

它的做法是，如果存在 order_id，就使用 intval() 對輸入進行消毒，然後呼叫 display_order_details 函式。如果沒有提供 order_id，則會輸出一條提示資訊。

display_order_details 函式是在 get_footer() 下面宣告的函式。該函式將訂單 ID 作為輸入，並使用 wc_get_order() 獲取相應的訂單物件。

如果訂單 ID 無效，它將輸出一條錯誤資訊。否則，它會以無序列表的形式檢索並顯示各種訂單詳細資訊，如訂單 ID、日期、總額、賬單地址和送貨地址、電子郵件、電話、付款方式和訂單狀態。

此外，它還會迴圈顯示訂單專案，並在另一個無序列表中顯示每個專案的產品名稱、數量和總價。

Step 2：將模板新增到主題中，並在 WordPress 中建立新頁面

在您的子主題目錄中儲存page-order-details.php檔案。這樣，在 WordPress 中建立新頁面時就可以選擇該模板。

接下來，在 WordPress 管理面板中進入頁面>新頁面。給頁面命名，然後在右側的 “頁面屬性” 部分，從模板下拉選單中選擇 “Order Details” 模板。

如果沒有看到 “頁面屬性” 部分，可以返回到 “頁面“，將滑鼠懸停在每個頁面上時，會看到所有頁面的列表和一些選項。選擇 “快速編輯”，然後就能看到 “頁面屬性” 部分。

釋出頁面，現在就可以測試自定義訂單詳情頁面了。

要進行測試，請瀏覽瀏覽器並在 URL 上新增 ?order_id=ORDER_ID，用有效的 WooCommerce 訂單 ID 替換 ORDER_ID 。例如，https://yourwebsite.com/order-details/?order_id=70

這將顯示指定訂單 ID 的訂單詳情。

從訂單 ID 獲取訂單詳細資訊。

然後，您就可以在模板中隨意新增樣式了。

使用 WooCommerce 訂單跟蹤簡碼建立訂單詳情頁面

您可能不知道的另一個選項是 WooCommerce 訂單跟蹤簡碼，它為使用者提供了一個使用者介面，使用者只需輸入訂單號和電子郵件地址即可搜尋訂單詳情。

來自 WooCommerce 訂單跟蹤簡碼的訂單詳情。

該頁面顯示訂單號、日期、狀態、專案、發貨和賬單地址。如果您不打算顯示更詳細的資訊，這將非常有用。

使用 WooCommerce 訂單跟蹤簡碼建立訂單跟蹤頁面是提升客戶體驗的直接方法，無需深入研究自定義編碼。

請按照以下步驟操作：

1. 登入 WordPress 儀表板。
2. 然後，導航至 “頁面“>”新頁面“，建立一個新頁面。
3. 給頁面一個標題，然後在頁面編輯器中新增以下簡碼：
   Plain text

   Copy to clipboard

   Open code in new window

   EnlighterJS 3 Syntax Highlighter

   [woocommerce_order_tracking]

   [woocommerce_order_tracking]

   [woocommerce_order_tracking]

4. 然後，點選 “釋出” 按鈕，使頁面生效。

就這麼簡單。但這樣做可能無法實現你想要的靈活性。

小結

在 WooCommerce 中建立訂單詳情頁可以方便地訪問訂單資訊，提高透明度和客戶滿意度，從而增強客戶體驗。