WooCommerce 商品頁籤客製化教學:新增自訂欄位
WooCommerce 商品頁預設有商品描述、附加資訊、評論三個頁籤。本篇教你依品類規劃頁籤,用 woocommerce_product_tabs filter 改名、排序或關閉,並介紹 ACF 自訂欄位與 YIKES 外掛。
作者:褚崇名(Sliven)
本頁目錄
- 為什麼商品頁籤是「資訊架構」問題,不是版面裝飾
- WooCommerce 預設的三個商品頁籤,到底各自裝了什麼
- 先定內容模型:不同品類的商品頁該開哪些頁籤
- 改名、排序、關掉預設頁籤的三種基本操作
- 改名:把「商品描述」改成更口語的標題
- 排序:用 priority 數字決定頁籤先後
- 關掉不要的頁籤
- 用程式碼新增一個會自動帶出資料的自訂頁籤
- 第一步:用 ACF 建立欄位
- 第二步:新增頁籤並讀取欄位
- 不寫程式也能做:頁籤外掛的取捨
- 自訂欄位的資料怎麼進得去:後台流程與批次匯入
- 手機摺疊、頁面效能、結構化資料,三個最常被略過的細節
- 手機上的頁籤會自動變成垂直摺疊
- 頁籤內容會被算進頁面效能
- 商品頁的結構化資料會受到頁籤內容影響
- 做完之後怎麼驗證有效:客服、停留與轉換
- 動手前的六步檢查清單
WooCommerce 的商品頁,預設會把資訊塞進三個頁籤裡:商品描述、附加資訊、評論。這個設計很合理,問題在於大多數商店從來沒回頭檢查「這三個頁籤到底放對東西了沒」。就多數 WooCommerce 商店來看,商品頁的第一個問題通常出在資訊沒有被分類,跟內容多寡關係不大。
規格寫在描述裡,洗滌方式也寫在描述裡,退換貨政策還是寫在描述裡。一個商品描述拉到四五千字,顧客要找一個洗滌建議得捲動好幾屏。這篇要解決的就是這件事:怎麼把商品頁的頁籤客製化到符合你自己的品類需求,新增自訂欄位與自訂頁籤,讓每一類資訊都站在它該站的位置。
快速重點整理:先決定內容模型(該開哪些頁籤),再用
woocommerce_product_tabs這個 filter 改名、排序、關掉預設頁籤,接著用自訂欄位配一支 callback 新增能自動帶出資料的頁籤;不寫程式則選擇仍在維護、資料可匯出的頁籤外掛,並處理手機摺疊、效能與結構化資料三個細節。
根據 W3Techs 的長期統計(2026 年 6 月),WooCommerce 在其追蹤的網站中維持可觀的使用比例。因此,商品頁籤的客製化已有成熟的官方擴充方式可循,這篇會把相關做法一次理清楚。
先說這篇適合誰。如果你是已經用 WooCommerce 架好站、商品也上架了一陣子,但覺得商品頁「資訊很多卻不好找」,這篇是寫給你的。如果你還在選平台階段,建議先從 WooCommerce 整體認識起,等商店跑起來再回頭處理頁籤細節。文章裡的程式碼都假設你有一個子主題可以放 functions.php,並且願意裝 ACF 這類自訂欄位外掛;完全不碰程式碼的讀者,可以直接跳到外掛方案那段,一樣能把頁籤做起來。
為什麼商品頁籤是「資訊架構」問題,不是版面裝飾
商品頁的頁籤系統,本質上是一套資訊導覽。讀者看到一個商品,腦袋裡會依序問幾個問題:這是什麼?多少錢?規格是什麼?適合我嗎?買了之後出問題怎麼辦?頁籤存在的目的,就是讓每一個問題都對應到一塊獨立、可預期、好找的內容。
很多人把頁籤當成「把字塞進去就好的容器」。描述欄太長就拆一個頁籤出來放規格、再拆一個放常見問題,至於拆出來之後頁籤叫什麼、順序怎麼排、跟其他商品有沒有一致,很少人管。結果是同一個分類裡,A 商品的規格寫在「附加資訊」、B 商品的規格寫在「商品規格」、C 商品根本沒寫規格。顧客每點進一個商品,都要重新學一次這個站的資訊結構。
換個方式想。實體店面為什麼會把成分、洗滌、產地做成固定位置的小標籤縫在衣服上?因為消費者已經被訓練成「翻到某個位置就會看到某類資訊」。電商商品頁的頁籤也是同一套邏輯,差別只在電商可以做得更彈性、更結構化,前提是你把它當成一個該被設計的系統,而不是一個放資料的垃圾桶。
這裡還可以引入一個衡量的角度:讀者在商品頁上「找到某個特定資訊」要花多少成本?這個成本由兩件事決定,一是資訊有沒有被分類(結構),二是分類用的標題有沒有講人話(命名)。一個叫做「附加資訊」的頁籤,對顧客來說幾乎等於沒有名字,他不知道點進去會看到規格還是成分。把同一個頁籤改名成「商品規格」或「成分與尺寸」,點擊前的預期就會清楚很多。命名這件事看似小,卻是頁籤客製化裡投資報酬率最高的一步。
以服飾電商這類商品頁整理專案來看,最常見的狀況是商品描述欄把洗滌、尺寸、成分、退換貨全塞在一起,頁面拉到四五千字,顧客要找一個洗滌資訊得捲動好幾屏。問題的根源在資訊沒有被分類,跟字數多寡其實沒有直接關係。分類之後字數還是那麼多,但找資料的成本會立刻降下來。這也是為什麼商品頁 SEO 要做對,第一步通常是先把資訊結構拆乾淨,把字寫多這件事反而是次要的,相關的整體優化觀念可以參考WooCommerce 商品頁 SEO。
WooCommerce 預設的三個商品頁籤,到底各自裝了什麼
WooCommerce 出廠會給你三個商品頁籤,先把它們摸清楚,才知道哪些該留、哪些該改、哪些該拆掉重做。
| 頁籤名稱 | 內部識別名 | 預設內容 | 資料來源 |
|---|---|---|---|
| 商品描述 | description |
商品長描述(主編輯器內容) | WordPress the_content() |
| 附加資訊 | additional_information |
商品屬性(尺寸、顏色、材質等) | 商品屬性與變動屬性 |
| 評論 | reviews |
評論列表與星等評分 | WordPress comments+評分 meta |
這裡有兩個關鍵很多人沒注意。第一,「附加資訊」頁籤只有在商品設定了「商品屬性」時才會出現。沒有設定屬性的商品,這個頁籤會自動消失。這也是為什麼有些商店的商品頁看起來「少一個頁籤」,原因是根本沒有屬性資料可以顯示,並沒有人刻意把它關掉。不同商品類型在這裡的行為也不太一樣,簡單商品跟可變商品的屬性設定流程差很多。
第二個關鍵是「商品描述」頁籤讀的是 WordPress 主編輯器的內容。這代表它的內容完全手寫,跟結構化欄位無關。你想在這裡放一段統一的「出貨說明」,得每個商品都貼一次,這正是後來自訂頁籤搭配自訂欄位要解決的痛點。「評論」頁籤則是 WooCommerce 內建的評論系統,跟商品評分綁在一起,資料存在 WordPress 的 comment meta。評論能補充購買決策資訊,但是否改善轉換與搜尋表現,仍要看評論品質與實際數據。
屬性本身還分兩種:一種是「商品專用屬性」,只在這一個商品上手填,不會進入全域屬性庫;另一種是「全域屬性」,會進入後台的屬性庫,可以跨商品重複使用,也能拿來做篩選、做變動商品(variable product)的規格選項。兩種屬性在「附加資訊」頁籤裡都能顯示,但對後續目錄管理的意義不同。商品專用屬性方便但較難統一維護,全域屬性一開始設定較花功夫,卻能讓整個目錄的規格用語保持一致。如果商品規格會被顧客拿來跨商品比較(例如服飾的尺寸、3C 的容量),優先採用全域屬性會比較好管理。
還有一個觀念要先建立:上面這三個頁籤的資料來源是固定的,但呈現方式會被你的佈景主題影響。同樣是 description 頁籤,Astra、Flatsome、Storefront 印出來的 HTML 結構、CSS class、手機摺疊行為都不完全一樣。這也是為什麼有些人照著教學貼了一段 CSS 卻沒反應,因為選擇器對不上。要客製化頁籤的長相,先搞清楚你的主題把頁籤包在哪個容器裡,用瀏覽器的開發者工具檢查一下,會比盲目貼程式碼快得多。挑主題時也可以把「頁籤的彈性」算進去,有些主題把頁籤樣式寫死,你要改還得覆寫一堆樣式。若還在比較主題,不妨把 Flatsome 開店教學一併納入參考,把頁籤彈性放進整體開店流程一起評估。
先定內容模型:不同品類的商品頁該開哪些頁籤
這是最關鍵、卻最少被討論的一步。在動手改程式碼或裝外掛之前,你應該先回答一個問題:這個品類的顧客,買之前最需要哪些資訊?下面這張表是常見品類的頁籤建議,你可以當起點,再根據自己的商品特性調整。
| 品類 | 建議頁籤組合 | 背後的原因 |
|---|---|---|
| 服飾/配件 | 描述、尺寸表、洗滌保養、退換貨 | 退貨率高,尺寸與洗滌是退貨主因 |
| 3C/家電 | 描述、完整規格、保固與維修、常見問題 | 規格比價是主力,保固影響購買決策 |
| 食品/保健 | 描述、成分與營養標示、保存與物流、認證資訊 | 食安敏感,成分與認證是信任關鍵 |
| 美妝/保養 | 描述、全成分、使用方式、保存期限 | 過敏與保存期限是高頻客服問題 |
| B2B/工業耗材 | 描述、規格表、詢價、技術文件下載 | 採購需要完整文件才能報價 |
| 虛擬/數位商品 | 描述、檔案格式與系統需求、授權條款 | 沒有實體,檔案資訊就是商品本體 |
注意到了嗎?「評論」並沒有特別寫在每一欄,因為它幾乎所有品類都該保留,不需要被「規劃」,只需要被「留下」。這張表只是起點,用意是幫你跳過「從零想該開什麼頁籤」的空白頁階段。你會看到一個共同點:愈是會引發客服來信、退貨、客訴的資訊,愈該被獨立成一個頁籤,並給它一個清楚的標題,免得它埋在描述裡沒人找得到。
以中小型服飾與配件站為例,把尺寸、洗滌、退換貨拆到清楚命名的頁籤後,理論上能減少找資料的成本。客服來信、停留時間與加入購物車率是否改善,仍應用改版前後的數據驗證,不能只憑版面變整齊就下結論。
表格裡的建議是單一品類的情境,實務上很多商店是混合的。一個賣戶外用品的站,同時有服飾(排汗衣)、裝備(帳篷)、耗材(瓦斯罐),三種商品的頁籤需求完全不同。這時候不必強迫全站用同一套頁籤,按分類給不同的頁籤組合會更實際。程式碼做法是在 callback 裡判斷商品隸屬哪個分類,只顯示該分類需要的頁籤;外掛則要確認是否支援依分類套用。頁籤只保留顧客完成決策所需的內容,並用手機實測是否容易掃讀,不必追求固定數量。
改名、排序、關掉預設頁籤的三種基本操作
理解了內容模型之後,接下來是實作。WooCommerce 提供一個 filter 叫 woocommerce_product_tabs,所有頁籤的陣列都會經過它,你在這裡做的任何修改都會在商品頁生效。這是客製化頁籤的總開關。下面三個是最常用的操作。
為什麼優先用 filter,不建議直接改範本檔?因為 filter 是 WooCommerce 保留的擴充點,通常比覆寫範本更容易維護。直接去改 content-single-product.php 這類範本檔,等於跟主題與外掛搶同一個檔案的控制權。即使使用 filter,主題或外掛仍可能改變輸出方式,所以更新前一樣要做相容性測試。
改名:把「商品描述」改成更口語的標題
陣列裡每個頁籤都有一個 title 欄位,改它就好。這對中文商店特別重要,預設翻譯有時候不夠口語,或不符合你的品牌語氣。把這段放進子主題的 functions.php:
add_filter( 'woocommerce_product_tabs', 'rename_default_product_tabs', 98 );
function rename_default_product_tabs( $tabs ) {
$tabs['description']['title'] = __( '商品介紹', 'your-textdomain' );
$tabs['additional_information']['title'] = __( '商品規格', 'your-textdomain' );
$tabs['reviews']['title'] = __( '買家評價', 'your-textdomain' );
return $tabs;
}
排序:用 priority 數字決定頁籤先後
每個頁籤都有一個 priority 數字,數字愈小排在愈前面。預設是描述 10、附加資訊 20、評論 30。你想把評論往前推,就把它的 priority 改成 5。這比改 HTML 順序乾淨多了,因為 WooCommerce 自己會照 priority 重新排列。
add_filter( 'woocommerce_product_tabs', 'reorder_product_tabs', 98 );
function reorder_product_tabs( $tabs ) {
$tabs['reviews']['priority'] = 5;
$tabs['description']['priority'] = 10;
$tabs['additional_information']['priority'] = 20;
return $tabs;
}
關掉不要的頁籤
用 unset() 把陣列裡的某個頁籤拿掉,它就不會顯示。最常見的情境是商品沒有屬性、「附加資訊」頁籤形同虛設,或你不想開放評論。
add_filter( 'woocommerce_product_tabs', 'remove_unused_product_tabs', 98 );
function remove_unused_product_tabs( $tabs ) {
// 沒有商品屬性時,附加資訊頁籤沒意義
unset( $tabs['additional_information'] );
// 不開放評論時
unset( $tabs['reviews'] );
return $tabs;
}
上面這種寫法是「全站一律關掉」。更進階的做法是條件式關閉:只在某一個商品真的沒有屬性時,才把附加資訊頁籤拿掉,有屬性的商品還是保留。做法是在 filter 裡用 global $product; 拿到當前商品物件,再判斷 $product->get_attributes() 是不是空的。這種條件邏輯讓頁籤「自動適應」每個商品的實際狀態,不必人工逐個商品去勾選,目錄愈大、效益愈明顯。同樣的手法也能用來判斷商品分類、商品類型(簡單商品跟可變商品顯示不同頁籤)。
小提醒:這些修改要放進子主題(child theme)的
functions.php或自製外掛,不要直接改主題檔案,否則下次主題更新會被覆蓋掉。對子主題與 WooCommerce 整合不熟的話,可以從 Astra Pro 加 WooCommerce 這類主題的處理方式看起。
用程式碼新增一個會自動帶出資料的自訂頁籤
改名、排序、關掉,處理的都是預設頁籤。真正讓商品資訊「更完整」的關鍵,是新增你自己的頁籤,而且這個頁籤的內容最好能從結構化的自訂欄位自動帶出來,免得每個商品都要手 key 一遍。這裡給你一個完整做法:用 ACF(Advanced Custom Fields)建立自訂欄位,再用 woocommerce_product_tabs 新增一個頁籤去讀它。
第一步:用 ACF 建立欄位
在 ACF 新增一個欄位群組,位置規則設成「文章類型等於 product」,欄位例如 wash_care(洗滌保養說明)。欄位類型用文字區或所見即所得編輯器,看你要多複雜。存好之後,每個商品的後台編輯頁就會多出這個欄位可填。你也能用 ACF 的 Repeater 欄位做「成分表」「規格清單」這類一筆一筆的資料,前端再用迴圈印出來。ACF 的安裝流程跟一般外掛一樣,安裝 WordPress 外掛的步驟這裡不再重複。
第二步:新增頁籤並讀取欄位
這段程式碼會讓頁籤只在該商品有填資料時出現。如果所有商品都固定顯示一個空的「洗滌保養」頁籤,只會造成版面雜訊;它本身不會自動產生或填入結構化資料欄位。
add_filter( 'woocommerce_product_tabs', 'add_wash_care_tab' );
function add_wash_care_tab( $tabs ) {
$content = get_field( 'wash_care' );
if ( empty( $content ) ) {
return $tabs; // 沒填資料的商品,不顯示這個頁籤
}
$tabs['wash_care_tab'] = array(
'title' => __( '洗滌保養', 'your-textdomain' ),
'priority' => 25,
'callback' => function() use ( $content ) {
echo '<div class="wash-care-content">' . wp_kses_post( $content ) . '</div>';
},
);
return $tabs;
}
這個模式可以無限複製:出貨說明、保固條款、size guide、FAQ,每一個都開一個 ACF 欄位配一個對應的頁籤 callback。做完一次,之後每一個新商品只要在後台填欄位就好,頁籤會自動出現、自動排版。這就是結構化思維勝過手寫描述的地方。
這裡補充兩個觀念。第一是 priority 數字其實有很大的彈性空間,你不必拘泥在 10、15、20 這些預設值,自訂頁籤給 30、40 也行,數字之間留點間隔,之後想插入新頁籤才不用把整組重排。第二是 callback 裡建議用 wp_kses_post 做一次內容過濾,因為 ACF 的所見即所得欄位會包含 HTML 標籤,如果你完全信任輸入、直接 echo 出來,一旦後台帳號被盜用或填寫者貼了來路不明的內容,就會變成 XSS 漏洞。資安的基本功在頁籤客製化裡一樣適用,不要因為是「內部後台」就掉以輕心。
如果你的規格或成分是一筆一筆的清單(例如多種成分各有比例、多個規格各有數值),可以改用 ACF 的 Repeater 欄位。Repeater 讓你定義一組子欄位(成分名、百分比),後台可以動態增減列數,前端再用迴圈把每一列印成表格的一行。這比把整張表塞進所見即所得編輯器乾淨,因為資料是結構化的,未來要改排版或匯出,都還有救。
不寫程式也能做:頁籤外掛的取捨
不是每個商店老闆都有辦法或意願改 PHP。頁籤客製化在 WordPress 生態有成熟的外掛,多數是「裝了就能在後台拖拉設定」。但外掛跟程式碼之間有真實的取捨,整理如下。
| 方案 | 優點 | 缺點 | 適合誰 |
|---|---|---|---|
| 程式碼(functions.php + ACF) | 完全可控、無額外負載、可串結構化欄位 | 要會寫、要維護、要子主題 | 有技術力、欄位結構穩定的站 |
| 單品頁籤外掛(免費方案) | 逐商品新增頁籤、所見即所得編輯器 | 每商品獨立、無全域頁籤、不能批次 | 頁籤內容差異大、商品數少 |
| 全域頁籤管理外掛(付費方案) | 全域頁籤、套用至分類、批次管理 | 要年費、綁特定外掛生態 | 商品多、需要統一頁籤結構 |
| 條件式頁籤管理外掛 | 進階排序、條件顯示、虛擬頁籤 | 付費、功能對小站過重 | 大型目錄、多分類商店 |
這裡的關鍵判斷是:你的頁籤內容是「逐商品不同」還是「全站統一」?出貨說明、退換貨政策這類通常是全站統一,用程式碼寫一個全域頁籤最乾淨,內容改一次全部商品同步。洗滌方式、成分表這類逐商品不同,用自訂欄位配 callback,或選擇支援逐商品編輯的外掛比較合理。安裝前要檢查目前相容版本、更新紀錄與資料匯出方式。更多 WooCommerce 生態的外掛脈絡,可以看WooCommerce 必裝外掛的整理。
程式碼方案能減少對第三方介面的依賴,但同樣有維護與相容性成本;外掛是否增加查詢或前端資源,則要看實作。如果商店商品不多,而且頁籤內容每個都不一樣,使用仍在維護的外掛可能更省工。依資料可攜性、維護能力與實測效能選擇即可。
外掛方案有一個風險要提醒:資料綁定。各外掛可能把頁籤內容存在文章 meta、自訂資料表或自己的資料格式裡。日後換外掛或改用程式碼時,資料不一定能直接沿用。選外掛前應先查清楚儲存格式、匯出方式與停用後的資料狀態,並用測試商品演練一次遷移。
自訂欄位的資料怎麼進得去:後台流程與批次匯入
頁籤跟欄位都建好了,真正的考驗才開始:資料要怎麼填進去?一個有五百個商品的服飾站,不可能每個商品都手動進後台填洗滌方式、成分、尺寸表。這一步處理不好,前面的架構做得再漂亮也是空的。有三個進資料的方式:
- 手動逐筆填入。適合商品數在五十以下的站,或只有少量主力商品需要詳細頁籤。後台編輯商品時,ACF 欄位或 Custom Product Tabs for WooCommerce(YIKES)的頁籤區塊會直接出現,所見即所得編輯器跟寫文章一樣。
- 透過 WooCommerce 的 CSV 匯入匯出。先在匯出器勾選自訂 meta,匯出一個現有商品當範本,再確認目標欄位是否真的出現在檔案與匯入對應畫面。不同外掛、隱藏欄位與欄位群組的輸出方式可能不同,不要直接假設所有自訂欄位都會自動帶出。
- 寫一支小型匯入腳本。商品上千、或資料來自另一個系統(ERP、供應商試算表)時,用 WP-CLI 或自訂 PHP 腳本批次寫入 post meta 最有效率。這需要一點技術力,但處理大目錄是唯一可行的路。
這裡有一個常見的教訓:自訂欄位的 meta_key 命名,一開始就要想好,而且不要事後改名。ACF 的欄位 key 改名後,舊資料不會自動跟著搬,你會以為欄位空了,其實是資料還掛在舊 key 上。上線前先用三五個商品測試完整流程:填資料、前台顯示、匯出 CSV、再匯入回去,確認 key 與顯示都正確,再批次鋪資料。這個測試最好在本機做,本機架站流程可以參考MAMP 本機架站。
CSV 匯入的欄名與映射規則可能隨 WooCommerce 版本及匯入工具不同。最穩妥的做法是先匯出一筆已填好的商品當範本,在測試環境匯回,確認 meta key 與欄位映射都正確後再批次處理。多語系商店還要依所用外掛的欄位翻譯規則分開測試,避免不同語言互相覆蓋。
手機摺疊、頁面效能、結構化資料,三個最常被略過的細節
頁籤做好、資料填好,還沒完。有三個細節大多數教學沒講,但它們直接決定你的頁籤有沒有「真的在幫你」。
手機上的頁籤會自動變成垂直摺疊
桌機上的頁籤是橫向選單,手機上多半會被主題自動轉成垂直摺疊(accordion)。這其實是好事,螢幕窄時一次只展開一個頁籤比橫向捲動更友善。但你要確認兩件事:一是預設展開的是哪個頁籤(通常是描述,這沒問題);二是摺疊展開時不會把畫面跳掉,讓讀者不知道自己看到了哪裡。根據 Statista 的長期追蹤(2026 年 4 月),全球網頁流量有相當高的比例來自行動裝置。你的商品頁在手機上的頁籤體驗,就是你的成交體驗,手機讀者找到資訊的成本愈低,跳出率就愈低。
實際檢查的方法很簡單:拿自己的手機,用行動網路(不要用 Wi-Fi)打開幾個主力商品頁,逐一點開每個頁籤,看展開動畫順不順、展開後畫面會不會亂跳、讀者會不會迷失位置。也順手把螢幕方向轉成橫向再轉回直向,看頁籤有沒有正確重排。這個十分鐘的手動檢查,比任何模擬工具都誠實,因為它就是你顧客的真實體驗。
順著手機檢查,也建議測一下鍵盤與螢幕閱讀器的可及性。頁籤本質上是切換顯示區塊,主題輸出的頁籤導覽應有正確的 ARIA 狀態與鍵盤操作。你可以在桌機上用 Tab 與方向鍵走一遍商品頁,確認焦點、選取狀態與內容面板能正確對應。前面的 callback 只負責輸出頁籤內容;若另行改寫頁籤導覽本身,才需要一併處理其互動與 ARIA 標記。
頁籤內容會被算進頁面效能
WooCommerce 預設頁籤範本與多數傳統主題會先把各頁籤 HTML 輸出到頁面,再用 CSS 或 JavaScript 切換顯示;採用延遲載入頁籤的主題或外掛則可能不同。因此,在「洗滌保養」頁籤放入大型圖片仍應檢查實際網路請求,不能因為內容預設收合就忽略它。
web.dev 的文件明確指出,頁面載入速度直接影響使用者體驗與轉換。處理方式很標準:圖片壓縮、啟用 lazy loading、控制頁籤內的多媒體數量。這跟一般網站速度優化是同一套邏輯,只是範圍縮在商品頁。主題本身的程式碼品質也會影響,挑主題時可以把這個算進去。
順帶一提快取的互動。WooCommerce 商品頁通常會被頁面快取(page cache)處理,這對靜態的頁籤內容沒有問題,反而能加速。但要注意兩個地方:一是如果你的自訂頁籤 callback 裡讀了會隨時間變動的資料(例如即時庫存、限時優惠),頁面快取會讓它「凍結」在快取那一刻,這類動態內容要走 AJAX 或區塊快取(fragment cache)分開處理;二是商品更新後,要確認快取有正確失效,否則顧客看到的還是舊的頁籤內容。用好一點的快取外掛通常會自動處理商品頁的快取失效,但自己心裡要有這個機制的概念。
商品頁的結構化資料會受到頁籤內容影響
Product 結構化資料的 description、brand、aggregateRating 等值,來自頁面實際輸出的 JSON-LD 或微資料,不是 Google 從頁籤文字自動補成欄位。可見的頁籤內容仍可能被索引,因此頁面文字與結構化資料應保持一致,並以複合搜尋結果測試工具檢查實際輸出。
實務上有兩個動作該做。一是保留精煉、可見的商品介紹,並確認 SEO 外掛或 WooCommerce 實際輸出的 description 與頁面一致;二是只標記頁面上看得到、資料正確且符合 Google 文件的 Product 欄位。商品屬性不會因為出現在「附加資訊」頁籤就自動成為 Product schema 屬性,仍要檢查產生結構化資料的外掛如何映射。結構化資料的完整觀念可以參考結構化資料 SEO 指南。
做完之後怎麼驗證有效:客服、停留與轉換
頁籤客製化是個沒有直接 KPI 的工程,沒有人會因為「你新增了一個洗滌頁籤」就立刻下單。但它會在三個地方慢慢發酵,你需要有方法看到這些訊號。
| 觀察指標 | 怎麼看 | 預期的變化方向 |
|---|---|---|
| 客服來信數量與類型 | 追蹤「洗滌怎麼洗」「尺寸怎麼挑」「出貨多久」這類來信的頻率 | 觀察是否下降,並排除季節與訂單量差異 |
| 商品頁停留時間與跳出率 | 用 Google Analytics 看商品頁這兩個指標 | 觀察互動是否改善,不單看停留時間 |
| 加入購物車與結帳轉換率 | 看購物車事件與結帳完成數 | 最終指標,但受太多變數影響,難單獨歸因 |
不要期待頁籤一改完數字就跳上來。客服來信、互動與轉換率都會受訂單量、流量來源與促銷影響,應選一段可比較的改版前後期間觀察。把頁籤當成「降低購買摩擦」的基礎工程,而不是能單獨保證轉換的戰術,比較符合它真正的價值。
有一個常見的測量誤區要提醒:不要只看「頁籤被點擊了幾次」。多數分析工具預設不會追蹤頁籤切換事件,你得自己用 Google Tag Manager 綁定點擊事件才看得到數據。而且就算看到某個頁籤點擊率偏低,也不代表它沒用,可能剛好是多數顧客在描述頁就找到了答案。真正該看的是「有沒有減少購買前的摩擦」,客服來信的類型變化,比頁籤點擊率更能誠實反映這件事。
還有一個動作建議在改頁籤之前就先做:記下現況的基準值。把目前客服信箱裡「尺寸」「洗滌」「出貨」這類來信的數量與比例記下來,把商品頁目前的平均停留時間與跳出率截圖存檔。沒有這個基準,改完之後你根本無從判斷到底有沒有進步,只能憑感覺。憑感覺在小事上可以,在會影響商品頁轉換的決策上不夠用。基準值不必精細,哪怕只是一張試算表記著「這個月這三類來信各幾封」,都比事後回想可靠得多。
動手前的六步檢查清單
給你一個可以照著走的行動清單,這是一份商品頁整理專案的流程濃縮版。
- 列出顧客最常問的十個問題,這就是你的頁籤候選清單。客服信箱、LINE 對話紀錄、評論區的提問都是來源。
- 對照本文的品類頁籤表,決定該開哪些頁籤、哪些資訊放同一個頁籤、哪些該獨立出來。
- 在測試環境先做改名、排序、關掉預設頁籤這三個基本操作,確認
woocommerce_product_tabsfilter 在你的主題上能正常運作,不要直接在正式站上試。 - 決定哪些頁籤用程式碼、哪些用外掛。全站統一的用程式碼、逐商品不同的用外掛,並把自訂欄位的 meta_key 命名一次定案,之後不改。
- 用三五個主力商品測試完整流程:填欄位、前台顯示、匯出 CSV、再匯入回去,確認資料鏈路通。
- 上線後設定觀察期(至少一個月),追蹤客服來信類型、商品頁停留時間與跳出率,再決定要不要進一步調整。
維護層面也要留意:頁籤客製化會跟著 WooCommerce、主題與外掛版本一起運作。更新可能調整範本結構或相容性,建議升級前先在測試環境跑一輪,確認頁籤顯示正常、自訂欄位讀得到,再更新正式站。做好網站備份是這一步的底線,有備份才有回滾的餘地。
WooCommerce 商品頁的頁籤,做對了不會讓你一夕爆單,但做錯了會讓顧客在結帳前默默離開、讓客服信箱每天收到本來不必存在的問題。把這套資訊架構一次做好,之後每一個上架的商品都會自動受惠,這就是基礎工程的價值,也是它跟一次性促銷活動最大的不同:活動結束就歸零,架構做完會持續累積。如果你正在規劃一個全新的 WooCommerce 商店,從商品頁結構開始想,會比從主題配色開始想更值得,相關的整體架站流程可以接著看WooCommerce 完整教學。
常見問題
套用全域版型後,單一商品還能修改內容嗎?
商品頁籤太多會不會影響 SEO?
不用外掛,能用程式碼新增商品頁籤嗎?
新增頁籤後前台沒顯示怎麼辦?
操作步驟
- 盤點品類資訊需求:列出顧客最常問的問題(客服信箱、評論區),對照本文的品類頁籤表,決定該開哪些頁籤。
- 在測試環境改名、排序、關掉預設頁籤:子主題 functions.php 用 woocommerce_product_tabs filter 調整 title 與 priority,用 unset() 拿掉不需要的頁籤。
- 用 ACF 建立自訂欄位:新增欄位群組,位置規則設成商品(product),例如 wash_care,存好後每個商品後台即可填寫。
- 新增自訂頁籤並讀取欄位:用 woocommerce_product_tabs 加 callback,在 get_field 有值時才顯示頁籤,內容用 wp_kses_post 過濾。
- 批次填資料並測試:商品多時用 WooCommerce 內建 CSV 匯入(自訂欄位以 meta: 前綴出現),先用三五個主力商品測試填寫、前台顯示、匯出再匯入的完整流程。
- 上線前後檢查與觀察:確認手機摺疊、頁面效能與結構化資料無誤,上線後追蹤客服來信類型與商品頁停留時間至少一個月。