最後更新：2026/10/13
網店開起來之後，常常會有一些小小的想法：加入購物車按鈕下面放一句「下單後 2 個工作天內出貨」、商品列表上幫高價商品貼一個「單件就免運」的小標籤、商品頁那一行「分類：手工皂」看起來很多餘想拿掉。這些需求不大，但佈景主題的設定裡通常找不到。
很多台灣的店家第一個想到的是去改佈景主題的檔案。改得動，可是主題一更新，改過的地方就被蓋回原樣。WooCommerce 為這種需求準備了另一條路：hook（中文介面翻成「掛鉤」）。學會它，大部分的小調整都不用碰主題檔案。
不想自己改？把這篇交給 AI
把這篇的網址（或全文）連同下面這段話貼給 AI：
我的網站是 WordPress，有裝 WooCommerce。我想照下面這篇文章，用 hook 在商品頁加一段出貨說明、在商品列表加小標籤，並拿掉用不到的資訊。
請先問我：我的佈景主題是傳統的還是區塊佈景主題、購物車頁是哪一種、我想加或拿掉什麼。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）改之前先備份，密碼不要貼給 AI。
hook 是什麼
可以把 hook 想成頁面上預先留好的插座。WooCommerce 在畫商品頁的時候，每畫到一個段落就會喊一聲：「我現在到了 woocommerce_single_product_summary 這個位置，有誰要在這裡插東西嗎？」標題、價格、加入購物車按鈕，本身就是 WooCommerce 自己插在這個插座上的。
同一個插座上插了好幾樣東西，靠一個數字決定先後，數字小的先出現。商品頁右側摘要區的預設順序是這樣：
| 數字 | 內容 |
|---|---|
| 5 | 商品名稱 |
| 10 | 評分、價格 |
| 20 | 簡短說明 |
| 30 | 數量和加入購物車按鈕 |
| 40 | 貨號、分類、標籤 |
| 50 | 分享按鈕 |
所以想把一段字放在加入購物車按鈕的下面、分類的上面，選 30 和 40 之間的數字就對了。
hook 分兩種。action 是「到這個位置時，順便做一件事」，例如印出一段字；filter 是「把一份資料交給你，改完再還回來」，例如把價格的寫法換掉。這篇的例子都是 action，filter 會在之後改價格、改通知信的文章用到。
例一：加入購物車按鈕下面放出貨說明
// 1. 商品頁：加入購物車按鈕下面，加一段出貨說明（數字 31：排在加入購物車 30 之後）
add_action('woocommerce_single_product_summary', function () {
echo '<p class="mimi-ship-note">現貨商品：下單後 2 個工作天內出貨，滿 NT$1,000 免運。</p>';
}, 31);add_action 的三個部分依序是：插座的名字、要做的事、數字。程式碼要放在 Code Snippets 這類外掛或子主題，放法和備份方式見〈WooCommerce 結帳頁改成台灣習慣〉。
例二：商品列表價格下面加小標籤
// 2. 商店列表：價格下面加「滿額免運」小標籤（價格是 10，所以用 15）
add_action('woocommerce_after_shop_loop_item_title', function () {
global $product;
if ($product && (float) $product->get_price() >= 1000) {
echo '<span class="mimi-badge">單件就免運</span>';
}
}, 15);商品列表每一格都會經過 woocommerce_after_shop_loop_item_title，評分排在 5、價格排在 10。global $product 拿到的是「目前正在畫的這一格商品」，所以可以依價格、分類、庫存決定要不要顯示。標籤的樣子再用 CSS 的 .mimi-badge 調整。
例三：拿掉用不到的東西
既然標題、價格這些也是插上去的，反過來就可以拔掉。商品頁的「分類、標籤」那一行，是 WooCommerce 用 woocommerce_template_single_meta 插在 40 的位置：
// 3. 商品頁：拿掉「分類、標籤」那一行（原本掛在 40）
add_action('init', function () {
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
});拔的時候插座名字、要拔的東西、數字三樣都要和當初插上去的一模一樣，數字寫錯就不會有任何反應。外面包一層 init，是為了等 WooCommerce 先把東西插好再拔，不然有可能你先拔、它後插，等於白做。
想知道某個東西是用哪個名字、哪個數字插上去的，最準的資料就在 WooCommerce 外掛裡的 includes/wc-template-hooks.php。這個檔案把商品頁、商品列表、購物車、結帳頁預設插上的東西全部列在一起，比網路上的整理表更不會過時。
例四：購物車上方提醒還差多少免運
// 4. 傳統購物車頁：上方提醒還差多少免運
add_action('woocommerce_before_cart', function () {
$threshold = 1000;
$total = WC()->cart ? WC()->cart->get_displayed_subtotal() : 0;
if ($total > 0 && $total < $threshold) {
wc_print_notice('再買 ' . wc_price($threshold - $total) . ' 就免運費！', 'notice');
}
});我們在測試站買了一個 450 元的禮盒，購物車上方出現「再買 NT$550 就免運費！」，湊到 1,000 元以上就自動消失。wc_print_notice 會用 WooCommerce 原本的提示框樣式，不用另外排版。門檻記得和運費設定裡的免運金額一致。
新版區塊佈景主題：有些插座還在，有些不見了
上面四個例子，我們用傳統佈景主題和新版的區塊佈景主題各測了一次。傳統佈景主題四個都正常。區塊佈景主題的結果比較複雜：
例一、例二還是有效。區塊佈景主題的商品頁和商品列表是由一個個區塊組成的，WooCommerce 為了讓舊的程式碼不要壞掉，仍然會在對應的位置喊這些插座，所以插東西沒問題。
例三沒有效果。區塊佈景主題裡，分類、標籤那一行是範本上的一個區塊，不是插上去的，remove_action 拔不到。這種情況改到「外觀 > 編輯器」打開單一商品的範本，直接把那個區塊刪掉，還不用寫程式。
例四只在傳統購物車頁出現。新版的區塊購物車是另一套做法，不會經過 woocommerce_before_cart。你的購物車、結帳頁是哪一種，判斷方法一樣在〈WooCommerce 結帳頁改成台灣習慣〉。
所以在區塊佈景主題上，「加東西」多半還能用 hook，「拿掉或搬動東西」改在網站編輯器裡做會比較順。網路上很多 hook 教學寫在區塊佈景主題出現之前，照著做沒反應的時候，先想想是不是這個原因。
不想寫程式的話
也有外掛把常用的插座做成後台表單，選位置、貼上文字或短代碼就能插進去，適合只想加幾段說明文字的店家。不過外掛只能幫你「放內容」，要依價格、分類、會員身分決定顯示什麼，還是要回到程式碼。
改之前先想清楚放在哪一格
hook 學起來最大的好處，是讓你開始用「位置」去想網站：這句話放在價格旁邊，客人決定要不要買的時候就會看到；放在頁尾，幾乎沒人看。台灣的消費者很在意出貨時間和運費，這兩件事放在加入購物車按鈕附近，比寫在常見問題頁有用得多。
如果你想把商品頁、購物車到結帳的每一格都照你的生意規劃，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，購物車電商網站可以從商品頁的資訊排序到結帳流程一起規劃。MIMI 提供台灣網頁設計服務，各縣市的店家都可以用電話、Email 和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
