WooCommerce 商品圖片尺寸：三種尺寸，以及該怎麼真正改到它們

你上傳的每一張商品照片，WooCommerce 都會產生三種圖片尺寸，而其中只有兩種能在 WordPress 後台編輯。woocommerce_thumbnail 是目錄方格圖，woocommerce_single 是商品頁上的大圖，woocommerce_gallery_thumbnail 則是下方那一排小縮圖。你要在「外觀 > 自訂 > WooCommerce > 商品圖片」裡調整它們 —— 如果那個面板只給你一個裁切下拉選單、卻沒有寬度欄位，那是你的佈景主題刻意在程式碼裡鎖死了寬度。

三種尺寸

尺寸名稱	出現的位置	裁切方式	能否在自訂器裡編輯
woocommerce_thumbnail	商店頁、分類方格、相關商品、交叉銷售	預設硬裁切成正方形	寬度與比例
woocommerce_single	單一商品頁上的主圖	不裁切 —— 保留原始長寬比	只有寬度
woocommerce_gallery_thumbnail	商品主圖下方的小縮圖列	硬裁切正方形	不能

這些是疊加在 WordPress 標準尺寸之上的。一張商品照片通常會產生 thumbnail、medium、medium_large、large、上面這三種 WooCommerce 尺寸，可能還有佈景主題透過 add_image_size 註冊的額外尺寸。每次上傳都是一大堆檔案，這也是為什麼匯入 300 件商品要跑那麼久。

最讓人意外的是相簿縮圖：它完全沒有後台控制項。在預設安裝上它是一個小方塊，歷來是 100px，而且它是最容易在高解析螢幕上看起來糊掉的尺寸，因為那個檔案是真的很小。

設定實際上在哪裡

「外觀 > 自訂 > WooCommerce > 商品圖片」給你三個控制項：

• 主圖寬度 —— 也就是 woocommerce_single 的寬度。高度是自動的，所以會保留原始長寬比。
• 縮圖寬度 —— 也就是 woocommerce_thumbnail 的寬度。
• 縮圖裁切方式 —— 1:1（正方形，預設值）、自訂（你自己輸入像 4:3 這樣的比例），或不裁切。

注意少了什麼：目錄縮圖沒有高度欄位，因為高度是由裁切比例推導出來的。而相簿縮圖則是完全沒有任何設定。

在你動手改之前，先看清楚某個檔案到底會產生哪些衍生檔案會很有幫助 —— 把一張真實的商品照丟進 WordPress 圖片尺寸工具，你會拿到完整清單，包括你的來源檔是否大到足以在不放大的前提下填滿每一種尺寸。

為什麼你的目錄圖片看起來不對

目錄縮圖會硬裁切成正方形。硬裁切的意思是 WooCommerce 從你的照片正中央取一塊正方形，其餘全部丟掉 —— 它不會加黑邊，也不會把圖壓扁。一張 2000x1200 的商品照會變成從正中間切出來的 1200x1200，再縮小。

對一支拍在正中央、四周留有空間的瓶子來說，這沒問題。但對以下情況就是災難：

• 長條形商品（滑雪板、線材、窗簾桿）—— 你只會看到中間三分之一，其餘什麼都沒有
• 主體不在中央的構圖 —— 商品飄到畫面邊緣，然後被切掉
• 商品填滿整個畫面到邊的照片 —— 上下被切掉
• 商品被放在角落的情境照

常見的建議是「把裁切改成不裁切」。這確實有用，但要誠實面對它的代價：不裁切代表每張縮圖都保留自己的長寬比，於是一整片橫直混雜的照片方格看起來就會參差不齊，除非你的佈景主題 CSS 有處理高度不一的情況，否則每一列都無法對齊。大多數佈景主題預設就是正方形。

如果你負擔得起，更好的解法是在源頭：統一使用正方形商品照，商品置中、四周留白均勻。這樣正方形硬裁切等於沒有作用，之後每一個環節都可以預期。改裁切設定是權宜之計；一致的來源圖片才是真正的解法。

當佈景主題鎖死寬度時

如果你的商品圖片面板只提供裁切選項，代表你的佈景主題在註冊 WooCommerce 支援時就宣告了固定寬度：

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

當佈景主題傳入這些數值時，WooCommerce 就會把寬度控制項從自訂器裡移除，只留下比例。這不是 bug，也不是佈景主題在為難你 —— 佈景主題的商品版面 CSS 就是圍繞著這幾個確切的像素寬度做出來的，讓你隨意更動只會弄壞整個排版。

你可以在子佈景主題的 functions.php 裡，用對應尺寸的篩選器覆蓋它們：

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

同樣的寫法也適用於 woocommerce_get_image_size_thumbnail。而且這也是唯一能改到相簿縮圖的方法，因為它沒有任何操作介面。

把代價講明白：覆蓋一個被鎖死的寬度，意味著 WooCommerce 產生的檔案不再符合佈景主題 CSS 的預期。多數情況下圖片只是在瀏覽器裡被縮放，而且因為它現在比框還大，看起來反而沒問題。但有時候佈景主題用的是固定高度的容器，你就會得到黑邊或溢出。在重新產生 2000 件商品之前，先拿一件商品測試。

改尺寸就必須重新產生

每一項尺寸設定都只影響新上傳的圖片。既有商品仍然繼續送出它們上傳當下產生的檔案，所以在你重建之前，畫面上不會有任何變化。

儲存自訂器時，WooCommerce 會啟動一個背景重建工作。在小型商品目錄上這就夠了。但在大型目錄上，它取決於 WP-Cron 能否可靠地觸發，而在流量偏低的商店上通常做不到，最後你會得到一個重建到一半的媒體庫。自己動手跑吧：

wp media regenerate --yes

只重建商品圖片：

wp media regenerate --yes --post_type=product

如果你想在手動處理時把背景工作先擋掉：

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

重新產生不會做的兩件事。它不會刪掉舊檔案 —— 你的上傳目錄會留著先前設定產生的每一個孤兒衍生檔，而且會越積越多。它也沒辦法建立比你來源檔更大的尺寸，因為 WordPress 不會放大圖片。如果你把主圖寬度設成 1200，商品照卻只有 800px 寬，那就不會產生 1200px 的檔案；瀏覽器拿到的是 800px 的檔案並把它拉伸，而 srcset 也提不出更好的選擇。

實際該上傳的尺寸

目標是正方形來源圖片，大約是你最大設定寬度的兩倍 —— 600px 主圖就用 1200x1200，佈景主題用 800px 就用 1600x1600。這足以應付 2 倍高解析螢幕，也給 WordPress 足夠的像素在不放大的前提下建立每一個衍生檔案。讓每件商品都維持相同尺寸，方格排版才會整齊。

還是卡住了？

如果尺寸都設定正確、也重新產生過了，某件商品卻還是看起來不對，就把圖片在新分頁開啟並讀檔名。出現一個對不上你任何設定的尺寸後綴，代表是別的東西註冊了它。完全沒有後綴，則代表 WooCommerce 退回使用了完整尺寸的檔案，這幾乎都表示來源檔太小、撐不起你要求的尺寸。把那個來源檔丟進圖片尺寸工具，比較 WordPress 應該產生什麼、瀏覽器實際載入了什麼 —— 兩者對不上的時候，夾在中間的通常是最佳化外掛或 CDN 的圖片縮放服務。