賣家具、家電、3C 或工業零件的時候,最常被客人問的不是價格,而是「這個尺寸多大」「重量多少」「材質是什麼」。把這些規格全塞進商品描述裡,頁面又長又亂,客人滑到一半就放棄;漏寫了又換來一堆售前詢問與退貨。WooCommerce 商品規格表就是解決這個痛點的工具——把零碎的規格整理成一張結構清楚的表格,讓客人一眼看完。
問題是,WooCommerce 做規格表有兩條路,新手常常選錯:一條是內建的「additional information」(額外資訊)標籤,搭配商品屬性自動生成;另一條是用自訂欄位(custom fields)存規格、再寫進頁面。兩者長得像,底層完全不同,用錯會發現規格沒辦法篩選、或是變化型商品建不出來。這篇會先講清楚規格該放屬性還是自訂欄位,再帶你把內建額外資訊標籤調整成像樣的規格表,最後給可以直接複製的 PHP 範例。
WooCommerce 商品規格表是什麼,內建額外資訊標籤又從哪來
WooCommerce 商品規格表,本質上就是把商品的細部數據(尺寸、重量、材質、保固、相容性等)以「欄位名稱對應值」的方式排成一張表,放在單一商品頁讓客人查閱。它不是 WooCommerce 裡某個獨立功能的名字,而是一種呈現方式,最常見的載體就是內建的「additional information」標籤。
這個標籤是 WooCommerce 自動產生的。只要商品具備以下任一條件,單一商品頁就會多出一個「額外資訊」分頁:商品有填重量、有填尺寸,或有勾選「在商品頁顯示」的屬性。三者都沒有,標籤就不會出現。換句話說,你不用裝任何外掛,光是在商品編輯頁填好資料,就已經有一張基本規格表了。
標籤裡的內容是一張兩欄表格,左欄是項目名稱(重量、尺寸、或屬性名),右欄是對應的值。WooCommerce 會把它套上你佈景主題既有的表格樣式,所以視覺上會跟網站其他表格一致。這也是它最大的優點:零設定、自動跟著商品資料更新。缺點則是彈性極低,你沒辦法直接改標籤名稱、調整欄位順序、或在表格上下加說明文字,這些都得靠程式碼或外掛。
商品規格該放屬性還是自訂欄位,怎麼判斷
判斷標準只有一句話:客人會不會「選」這個規格。會選的放屬性,只是讀的放自訂欄位。
屬性(attributes)是 WooCommerce 用來驅動「變化型商品」與「商店頁篩選」的結構化資料。尺寸、顏色、容量這種客人要從多個選項裡挑一個、而且挑了會影響價格、SKU 或庫存的特性,一定要用屬性。屬性背後接的是分類法(taxonomy)資料表,所以系統可以高效率地查詢、讓客人在商店頁用篩選器收窄結果,也是建立變化型商品的唯一辦法——沒有屬性就建不出變化型。
自訂欄位(custom fields,又稱 post meta)則是「鍵值對」,存的是客人只會讀、不會選的參考資料。處理器型號、防水等級、認證標章、產地、保固年限、保養說明這類資訊,客人看完心裡有底就好,不需要拿來篩選或產生變化,這些就適合自訂欄位。它存在 wp_postmeta 資料表(啟用 HPOS 高效能訂單儲存的站台可能改放專屬資料表,但概念一樣),結構簡單,加一個名稱配一個值就完成,不必管分類法。
下表把兩者的差異整理清楚,選的時候對照一下:
| 比較項目 | 屬性 attributes | 自訂欄位 custom fields |
|---|---|---|
| 客人互動方式 | 主動選擇、可篩選 | 被動閱讀 |
| 能否建變化型 | 可以,且是唯一辦法 | 不行 |
| 商店頁篩選 | 原生支援 | 需外掛輔助 |
| 影響價格/SKU/庫存 | 每個變化各自獨立 | 不影響 |
| 顯示位置 | 自動進額外資訊標籤與篩選器 | 要用範本程式碼放到指定位置 |
| 最適合的資料 | 尺寸、顏色、容量等選項 | 認證、產地、保固、保養說明 |
最常見的錯誤是把所有規格都丟自訂欄位,結果想做變化型才發現「尺寸」建不出選項;或反過來把保固年限、認證編號這種純資訊硬塞屬性,把屬性表搞得又雜又長。比較成熟的做法是兩者並用:屬性負責「選擇層」(客人要挑的選項),自訂欄位負責「資訊層」(客人要讀的規格),分工清楚,頁面也乾淨。
用商品屬性做規格表的完整步驟
屬性是內建額外資訊標籤的主要來源,設定好屬性、勾選顯示,規格表就自動出現,不用寫任何程式碼。屬性又分全域與自訂兩種,先搞懂差別再動手。
全域屬性(global attributes)在「商品 → 屬性」集中建立,建好一次可套用到全站任何商品,而且支援商店頁篩選。同一個特性會跨很多商品出現時就用它——例如服飾店的尺寸、顏色,3C 店的容量。自訂屬性(custom attributes,也叫區域屬性)則是直接在單一商品的編輯頁建立,只屬於那件商品,無法在商店頁篩選,適合一次性、不會重複的細節,例如某件限量品的編號。
如果還拿不定主意,先用全域屬性。它設定多一點,但第一次需要篩選商店頁、或要建變化型時,你會慶幸當初這樣選。
新增全域屬性的流程如下:
- 第一、進到 WordPress 後台的「商品 → 屬性」,填入屬性名稱(例如「材質」)與代稱(slug),按「新增屬性」。
- 第二、在剛建好的屬性右側點「設定字詞」,加入這個屬性的可選值(例如「純棉」「聚酯纖維」)。
- 第三、開啟要套用的商品編輯頁,找到「商品資料」區塊,切到「屬性」分頁,從下拉選單選出剛才的屬性並指定值。
- 第四、勾選「在商品頁顯示」這個選項,這一步是規格表會不會出現的關鍵,沒勾選屬性就只存在後台、不會進額外資訊標籤。
- 第五、按「儲存屬性」,再更新商品。回到前台單一商品頁,額外資訊標籤裡就會多出這一列規格。
如果這件商品還有不同版本(例如同款不同尺寸、價格也不同),在屬性分頁裡額外勾選「用於變化」,再到「變化」分頁從所有屬性產生變化型,逐一設定各版本的價格、SKU 與庫存。兩種顏色配三種尺寸會生成六個變化型,這正是屬性最關鍵的功能,自訂欄位完全做不到。
要提醒的是,內建額外資訊標籤裡的屬性表,欄位順序是依屬性設定的順序排,沒辦法在前台直接拖拉調整;要重新排序得回後台調整屬性的顯示順序。這也是內建方式的限制之一。
自訂欄位怎麼存規格,又怎麼顯示成表格
自訂欄位適合放客人只讀不選的規格,但它有個門檻:存進去之後不會自動顯示,得自己寫程式或靠外掛把值撈出來放到頁面上。這跟屬性「勾選即顯示」很不一樣,是新手最容易卡住的地方。
最陽春的做法是用 WordPress 內建的自訂欄位功能。在商品編輯頁打開「自訂欄位」面板(若沒看到,到右上角「顯示選項」勾選開啟),新增一筆鍵值,例如名稱填 _warranty、值填「保固兩年」。這樣資料就存進 wp_postmeta 了,但前台還看不到,因為沒有任何範本去讀它。
實務上多數人會用 ACF(Advanced Custom Fields)這類外掛來管自訂欄位,因為它提供後台表單介面、欄位類型(文字、數字、日期、檔案)也比內建的好維護。用 ACF 建好一組規格欄位後,要把它們撈出來顯示成規格表,常見有兩種放法:放進商品描述區下方,或塞進內建的額外資訊標籤裡。
WooCommerce 提供了一個動作掛鉤 woocommerce_product_additional_information,可以在額外資訊標籤的屬性表上方或下方插入自訂內容。把它接上去,就能讓自訂欄位的規格跟著屬性表一起呈現。以下範例把幾個 ACF 欄位組成一張規格表,加到額外資訊標籤(程式碼放子佈景主題的 functions.php):
add_action( 'woocommerce_product_additional_information', 'ezwps_render_spec_table', 11 );
function ezwps_render_spec_table( $product ) {
// 要顯示的自訂欄位:欄位鍵 => 顯示名稱
$specs = array(
'warranty' => '保固期限',
'origin' => '產地',
'certificate' => '認證標章',
);
$rows = '';
foreach ( $specs as $key => $label ) {
$value = get_field( $key, $product->get_id() ); // ACF 取值
if ( $value ) {
$rows .= '<tr><th>' . esc_html( $label ) . '</th><td>' . esc_html( $value ) . '</td></tr>';
}
}
if ( $rows ) {
echo '<h3>產品規格</h3>';
echo '<table class="shop_attributes">' . $rows . '</table>';
}
}
掛鉤優先序填 11 會讓自訂規格顯示在屬性表「下方」;改成 9 則會顯示在屬性表「上方」。表格套用 shop_attributes 這個 WooCommerce 內建的 class,視覺上會跟原本的屬性表一致。範例裡用 esc_html 把輸出做了跳脫處理,避免欄位值含特殊字元時破版或產生安全問題——自己改寫時別省略這一步。
如果不想碰程式碼,市面上有專門做規格表的外掛,能用後台介面建立多種欄位類型、把屬性分組,甚至為單一商品建多張規格表。要不要上外掛,取決於你的規格欄位多不多、需不需要分組與下載文件,欄位少的話內建屬性加一段 PHP 通常就夠了。
想改額外資訊標籤的名稱或位置,可以怎麼調
內建額外資訊標籤雖然不能在後台直接改,但透過 woocommerce_product_tabs 這個篩選掛鉤,重新命名、隱藏、合併都做得到,全部寫在子佈景主題的 functions.php 即可。
把標籤名稱從「額外資訊」改成更符合語境的「產品規格」,用下面這段:
add_filter( 'woocommerce_product_tabs', 'ezwps_rename_info_tab', 98 );
function ezwps_rename_info_tab( $tabs ) {
if ( isset( $tabs['additional_information'] ) ) {
$tabs['additional_information']['title'] = '產品規格';
}
return $tabs;
}
賣的是數位商品、下載型商品這類根本沒有重量尺寸的品項時,這個標籤留著反而多餘,可以整個移除:
add_filter( 'woocommerce_product_tabs', 'ezwps_remove_info_tab', 98 );
function ezwps_remove_info_tab( $tabs ) {
unset( $tabs['additional_information'] );
return $tabs;
}
另一個常被忽略的做法是「不填資料」。額外資訊標籤只在商品有重量、尺寸或可見屬性時才出現,所以數位商品只要這三項都不填,標籤自然不會冒出來,連程式碼都不用寫。
也有人偏好把規格直接併進「商品描述」分頁,讓客人不必切換標籤就能一次看完描述加規格。這需要先移除原本的額外資訊標籤,再覆寫描述分頁的回呼函式、在描述後方接上額外資訊的範本,屬於比較進階的改法,動手前務必先備份,並在子佈景主題操作,避免主題更新時被覆蓋。
要留意的是,以上 PHP 範例都假設你用的是子佈景主題(child theme)。直接改母佈景主題的 functions.php,下次主題更新就會被洗掉;CSS 微調同理,寫在子主題或佈景主題自訂 CSS 區才安全。
規格表要放哪些欄位,才不會幫倒忙
規格表的價值在於幫客人快速決策,不是把所有能填的數據全堆上去。欄位塞太多反而造成資訊過載,客人在一堆無關數字裡找不到重點,猶豫之下乾脆關掉頁面。
先想清楚「這類商品的客人下單前一定會查的是什麼」,把那幾項放進規格表,其餘的留給商品描述。賣電視就放螢幕尺寸、解析度、連接埠、機身尺寸;賣工業風扇就放馬達功率、瓦數、噪音值、防水防塵等級;賣服飾就放材質、產地、尺寸對照。不同品類的關鍵規格不一樣,但原則一致:只放會影響購買決策的核心數據。
技術性高、需要多方審核的商品(例如工業零件、醫療耗材、實驗室器材),客人除了線上看,往往還要把規格存檔給團隊或主管核可。這種情況可以在頁面上放精簡規格表,另外提供可下載的完整規格文件,兼顧線上瀏覽與離線審核兩種需求。
最後別忘了,結構清楚的規格表對搜尋引擎也友善。把零散資訊整理成可讀的表格,等於替商品頁補上更多語意明確的內容,有機會提升商品頁在搜尋結果的能見度,同時因為客人下單前資訊更完整,退貨與售前詢問都會跟著減少。這也是花時間把規格表做好的真正回報。
從「客人會不會選這個規格」這條線判斷屬性或自訂欄位,再決定要靠內建額外資訊標籤、一段 PHP,還是專用外掛來呈現——大多數店家只要把屬性勾選顯示、必要時加一小段自訂欄位程式碼,就能做出一張乾淨好讀的規格表。先盤點你目前主力商品的規格欄位,挑出客人最常問的那幾項,今天就把第一張規格表設定起來。