~/blog/woocommerce-webhook-automation-guide.md
電商與 WooCommerce · 2025 / 11 / 29

訂單處理還在複製貼上?解析 WooCommerce Webhook 自動化魔法,打造你的 24H 全自動電商大腦!

Eric — 浪花科技創辦人 / AI 架構師
Eric
浪花科技創辦人 · AI 架構師
訂單處理還在複製貼上?解析 WooCommerce Webhook 自動化魔法,打造你的 24H 全自動電商大腦!
目錄 table-of-contents.md

還記得剛開始幫客戶架設電商網站時,每次聽到後台「叮咚!您有新訂單!」的音效,都跟著客戶一起興奮。但這股興奮感,在訂單量從一天 10 張變成 100 張後,就漸漸被無盡的「複製貼上」給消磨殆盡。複製客戶資料到 ERP、貼上訂單編號到出貨系統、手動通知倉管人員、再把客戶加入電子報名單... 這一連串的人工作業,不僅耗時,更容易出錯,簡直是營運成長的隱形殺手。

身為一個看到重複性工作就渾身不對勁的工程師,我必須說:放開那個滑鼠,讓程式來!今天,我們就要來聊聊 WooCommerce 中一個極其強大卻常被忽略的神器——Webhook。它能將你的電商網站從一個被動的資訊孤島,轉變成一個會主動出擊、串連各個系統的全自動化商業大腦。

Webhook 是什麼?跟 API 有什麼不一樣?

很多非技術背景的朋友聽到 Webhook 就覺得頭大,別擔心,我用個簡單的比喻讓你秒懂。

  • 傳統 API 查詢 (Polling):就像你每隔五分鐘就要走到門口的貓眼看一下,有沒有訪客來。非常沒效率,而且大部分時間都在做白工。你必須不斷地主動去「拉取 (Pull)」資訊。
  • Webhook (Push):這就像是為你的網站裝上一個「智慧門鈴」。當有訪客(例如:新訂單成立)時,他會主動按門鈴通知你。你的系統不需要再傻傻地輪詢,而是被動地等待事件發生時,由對方主動「推送 (Push)」通知給你。

簡單來說,Webhook 是一種由事件驅動的機制。在 WooCommerce 的世界裡,這些事件可以是「訂單成立」、「商品庫存變低」、「客戶更新資料」等等。一旦事件觸發,WooCommerce 就會立即將相關資料打包成一份 JSON,送到你指定的「網址」。這個過程是即時的,讓你能夠以最快的速度做出反應。

實戰第一步:在 WooCommerce 設定 Webhook

說了這麼多,我們直接來動手設定。設定 WooCommerce Webhook 的過程非常直觀,就算不是工程師也能輕鬆上手。

Step 1: 進入 Webhook 設定頁面

首先,登入你的 WordPress 後台,依序點擊:

  • WooCommerce > 設定 (Settings)
  • 切換到 進階 (Advanced) 頁籤
  • 點擊 Webhook

在這裡,你會看到目前所有已設定的 Webhook 列表。讓我們來新增一個吧!

Step 2: 新增並設定 Webhook

點擊「新增 Webhook」按鈕,你會看到以下幾個欄位需要填寫:

  • 名稱 (Name):給這個 Webhook 取個好記的名字,例如「新訂單通知 Slack」。
  • 狀態 (Status):務必設定為「啟用 (Active)」,它才會開始工作。
  • 主題 (Topic):這是最重要的部分!你要選擇觸發這個 Webhook 的事件。常用的有:「訂單已建立 (Order created)」、「訂單已更新 (Order updated)」、「商品庫存不足 (Product low in stock)」等等。我們先選擇「訂單已建立」。
  • 傳送 URL (Delivery URL):這個 URL 就是負責接收 WooCommerce 通知的地方,也就是我們前面說的「智慧門鈴」的地址。你需要提供一個公開的網址。初期測試時,我強烈推薦使用 webhook.site 這個免費工具,它會給你一個臨時網址,讓你即時看到 WooCommerce 送出了什麼資料。
  • 密鑰 (Secret):這個欄位非常、非常、非常重要!它是一組你自訂的密碼,用來驗證收到的通知真的是從你的 WooCommerce 網站發出的,而不是駭客偽造的。千萬別留空!隨便產生一組複雜的字串填進去,然後妥善保管。後面程式碼的部分會教你如何使用它。

設定完成後,按下「儲存 Webhook」,你就成功建立了一個監聽器!現在,你可以去你的商店下一筆測試訂單,然後回到 webhook.site 的頁面,你會驚喜地發現,一筆詳細的訂單資料已經即時地被傳送過來了!

剖析心臟:Webhook Payload 裡有什麼?

當你在 webhook.site 看到那一大包 JSON 資料時,別慌張,這就是你的寶藏。這包資料我們稱為「Payload」(有效負載),裡面包含了觸發事件的所有相關資訊。以「訂單已建立」為例,你大概會看到以下這些關鍵資訊:

  • id: 獨一無二的訂單 ID。
  • status: 訂單狀態,例如 `processing`。
  • total: 訂單總金額。
  • billing: 帳單地址,包含姓名、電話、Email 等。
  • shipping: 運送地址。
  • line_items: 一個陣列,包含了所有購買的商品項目,每個項目都有品名、數量、價格等詳細資訊。
  • payment_method_title: 付款方式。

有了這些結構化的資料,自動化的可能性就無限大了。你可以將 `billing` 裡的 Email 加到 Mailchimp,將 `shipping` 的地址傳給物流公司 API,將 `line_items` 的商品 SKU 同步到你的庫存系統...等等。

工程師的回合:打造滴水不漏的 Webhook 接收器 (PHP 實戰)

webhook.site 雖然好用,但終究只是個測試工具。要讓自動化流程真正落地,我們需要自己寫一個接收器。身為工程師,看到這裡應該開始興奮了吧?下面我提供一個基礎但完整的 PHP 範例,教你如何安全地接收並處理 WooCommerce Webhook。

Step 1: 建立你的接收端點 PHP 檔案

在你的伺服器上建立一個 PHP 檔案,例如 `my-webhook-listener.php`,並將它的公開 URL 填入 WooCommerce Webhook 設定的「傳送 URL」欄位。

Step 2: 撰寫程式碼

這段程式碼包含了三個核心步驟:驗證簽名、解析資料、執行動作

<?php

// Step 0: 設定你的秘密金鑰(必須跟 WooCommerce 後台設定的一樣)
$secret_key = '你在 WooCommerce 設定的超級秘密金鑰';

// Step 1: 取得 Webhook 送來的資料和簽名
// 從 HTTP Header 取得 WooCommerce 產生的簽名
$wc_signature = isset($_SERVER['HTTP_X_WC_WEBHOOK_SIGNATURE']) ? $_SERVER['HTTP_X_WC_WEBHOOK_SIGNATURE'] : '';

// 取得請求的原始內容 (JSON 字串)
$payload = file_get_contents('php://input');

// 如果沒有簽名或內容,直接中止,這是不合法的請求
if (empty($wc_signature) || empty($payload)) {
    http_response_code(400); // Bad Request
    exit('Invalid request.');
}

// Step 2: 驗證簽名!這是最重要的安全防線!
// 使用 HMAC-SHA256 演算法,搭配你的密鑰,對收到的 payload 進行加密
$calculated_hash = base64_encode(hash_hmac('sha256', $payload, $secret_key, true));

// 比對我們計算出來的簽名,跟 WooCommerce 送來的簽名是否一致
if (!hash_equals($wc_signature, $calculated_hash)) {
    // 簽名不符,代表這可能是偽造的請求,立即中止!
    http_response_code(401); // Unauthorized
    exit('Invalid signature.');
}

// Step 3: 處理業務邏輯
// 恭喜!通過驗證,可以安心處理資料了
$data = json_decode($payload, true); // 將 JSON 字串解碼成 PHP 陣列

// --- 在這裡開始你的自動化魔法 --- //

// 範例 1: 記錄訂單資訊到一個 log 檔案
$order_id = $data['id'];
$order_total = $data['total'];
$customer_email = $data['billing']['email'];
$log_message = sprintf("新訂單 #%s 已接收,金額: %s,客戶: %s\n", $order_id, $order_total, $customer_email);
file_put_contents('webhook_log.txt', $log_message, FILE_APPEND);

// 範例 2: 如果訂單金額超過 5000,就發送通知到 Slack
if ((float)$order_total > 5000) {
    $slack_webhook_url = '你的 Slack Webhook URL';
    $message = ['text' => "注意!接到一張大訂單 #{$order_id},金額為 {$order_total} 元!"];
    
    $ch = curl_init($slack_webhook_url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($message));
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
    curl_exec($ch);
    curl_close($ch);
}

// --- 自動化魔法結束 --- //

// Step 4: 回應 200 OK 狀態碼
// 務必回覆一個 200 狀態碼給 WooCommerce,告訴它你已經成功收到了
// 如果沒有回覆 200,WooCommerce 會認為傳送失敗,並在之後重試,可能導致重複處理!
http_response_code(200);
echo 'Webhook received successfully.';

?>

工程師的小囉嗦:看到 `hash_equals()` 了嗎?請務必使用它來比較簽名,而不是用 `==`。`hash_equals()` 可以有效防止「時序攻擊 (Timing Attack)」,這是一個小細節,但卻是專業與業餘的差別。安全,永遠是我們工程師擺在第一位的。

進階思維:打造企業級的自動化流程

上面的範例雖然能動,但如果你的業務邏輯很複雜(例如:產生客製化 PDF 發票、串接多個外部 API),直接寫在接收器裡可能會導致超時。這時候就需要導入更進階的架構:

  • 日誌記錄 (Logging):務必記錄下每一次接收到的 Webhook 內容和處理結果。當流程出錯時,這些日誌就是你除錯的唯一線索。監控伺服器 Log 是每個網站管理員的基本功。
  • 非同步處理 (Asynchronous Processing):對於耗時的任務,接收器應該只做一件事:驗證簽名,然後把 Payload 丟進一個背景任務隊列 (Queue) 中,並立即回覆 `200 OK` 給 WooCommerce。這樣可以確保你的網站結帳流程不會被卡住,同時也能保證複雜任務的穩定執行。
  • 錯誤處理與重試機制:如果你的自動化流程因為外部 API 暫時掛掉而失敗,該怎麼辦?你需要在你的處理邏輯中加入錯誤處理和優雅的重試機制,例如指數退讓 (Exponential Backoff),避免一次失敗就讓整個流程中斷。

透過 WooCommerce Webhook,你等於是為你的電商網站打通了任督二脈,讓它能夠與世界溝通。從簡單的訂單通知,到複雜的 ERP、CRM、物流系統整合,都始於這個小小的設定。現在,就動手把那些重複性的工作交給程式,把寶貴的時間花在更有價值的商業決策上吧!

延伸閱讀

如果你對於打造複雜的 WooCommerce 自動化訂單流程感到頭痛,或是有更進階的企業系統整合需求,別忘了浪花科技的專業團隊就在這裡。我們擅長將複雜的商業邏輯轉化為穩定、高效的自動化系統。歡迎填寫表單聯繫我們,讓我們的技術專業為您的事業加速!

// FAQ

常見問題

WooCommerce 的 Webhook 和傳統 API 查詢有什麼不同?
傳統 API 查詢是輪詢(Polling),你的系統得不斷主動去「拉取」資料,效率低且延遲高。Webhook 則是事件驅動的「推送」機制:當訂單成立、庫存變低等事件發生時,WooCommerce 會立即把相關資料打包成 JSON 主動送到你指定的網址,反應即時且不浪費伺服器資源。
在 WooCommerce 後台要去哪裡設定 Webhook?
登入 WordPress 後台後,依序進入 WooCommerce > 設定(Settings),切換到「進階」(Advanced)頁籤,再點擊「Webhook」,即可看到列表並新增。新增時需填寫名稱、狀態(設為啟用)、主題(觸發事件,如「訂單已建立」)、傳送 URL 以及密鑰(Secret)。
WooCommerce Webhook 設定中的密鑰(Secret)有什麼作用,可以留空嗎?
密鑰絕對不可留空。它是一組自訂密碼,用來驗證收到的通知確實來自你的 WooCommerce 網站而非偽造請求。接收端會用此密鑰以 HMAC-SHA256 演算法對收到的內容重新計算簽名,與 WooCommerce 透過 HTTP Header 送來的簽名比對,一致才處理,藉此防止惡意偽造。
如何安全地接收並驗證 WooCommerce Webhook?
接收端先從 HTTP Header 取得 X-WC-Webhook-Signature,並以 file_get_contents('php://input') 取得原始 payload。接著用 base64_encode(hash_hmac('sha256', $payload, $secret_key, true)) 算出簽名,再以 hash_equals 與收到的簽名比對;不一致就回傳 401 中止,驗證通過後才用 json_decode 解析資料並執行業務邏輯。
WooCommerce 訂單 Webhook 的 Payload 裡有哪些常用資料?
以「訂單已建立」事件為例,Payload 通常包含訂單 ID、訂單狀態(status,如 processing)、訂單總金額(total)、帳單地址(billing,含姓名、電話、Email)、運送地址(shipping)、商品項目陣列(line_items,含品名、數量、價格)以及付款方式(payment_method_title)。這些結構化資料可串接 Email 行銷、物流 API 或庫存系統。
~/roamer-tech/newsletter // FREE
// newsletter

訂閱免費電子報

把 AI 自動化、企業系統設計與 WordPress / Laravel 開發的真實案例和可直接照做的技巧,整理成電子報寄給你。只寄精選內容、不灌垃圾信,一鍵就能退訂。

$
// final.exec()

準備好讓你的網站開始為你工作了嗎?