商品照拍得再好，上傳到 WooCommerce 後常常變得模糊、被裁掉一角，或是商店頁、單品頁、相簿縮圖三個地方各長一個樣。問題幾乎都不出在照片本身，而是沒搞懂 WooCommerce 商品圖片尺寸是怎麼運作的。它不像 PowerPoint 你拉多大就多大，而是背後註冊了好幾組圖片尺寸，分別對應不同版位，再由佈景主題、Customizer 設定與裁切規則一起決定最後呈現的樣子。

這篇會把這套機制拆開講清楚：三組核心尺寸各自管哪裡、預設值是多少、裁切與高度怎麼算、該上傳多大的原圖才不會糊也不會拖慢網站，以及改完設定後為什麼一定要重新產生縮圖。看完你就能讓整間店的商品圖整齊、清晰、又跑得快。

WooCommerce 註冊了哪幾組商品圖片尺寸

WooCommerce 啟用後會向 WordPress 註冊三組專屬的圖片尺寸，每一張你上傳的商品圖，系統都會依這幾組規格各裁切、縮放出一份對應檔案。理解這三組分別長在哪裡，是後面所有設定的基礎。

• woocommerce_thumbnail（目錄縮圖）：用在商店頁、商品分類頁的商品列表格狀排列，以及相關商品、加購、交叉銷售區塊。預設寬度 300px，預設正方形裁切，讓格狀列表看起來整齊對齊。
• woocommerce_single（單品主圖）：用在單一商品頁面上方的那張主圖，是顧客點進商品後看到的主角。預設寬度 600px，預設不裁切，高度依原圖比例自動浮動。
• woocommerce_gallery_thumbnail（相簿縮圖）：用在單品主圖下方那排可切換的小縮圖，點一下就換主圖。預設固定 100×100px，永遠正方形裁切。

除了這三組，相簿放大檢視（點圖後的 zoom 或燈箱全圖）用的是 WordPress 內建的 full 尺寸，也就是「設定 > 媒體」裡那組原始尺寸。把這層關係理清楚，你會發現同一張原圖其實同時被切成好幾個版本在不同地方服役。

下面用一張示意圖把版位對應關係攤開來看。

三組尺寸的預設值與裁切規則是什麼

直接給結論：縮圖預設 300px 寬、正方形裁切；單品主圖預設 600px 寬、永不裁切；相簿縮圖固定 100×100px、正方形裁切。它們最大的差別不只在尺寸，更在於「裁不裁、高度怎麼決定」。

單品主圖永遠維持原圖比例，這是 WooCommerce 3.3 之後刻意的設計。它沒有高度欄位可調，你設了寬度，高度就照原圖長寬比浮動。換句話說，如果你上傳的商品圖比例不一致，單品頁的主圖就會一張高一張矮。要讓商品頁整齊，唯一的辦法是在上傳前就把所有原圖統一成相同比例。

目錄縮圖則可以裁切，這是為了讓商店頁的格狀列表對齊好看。WooCommerce 提供三種裁切模式，在 Customizer 裡選：

• 1:1 正方形：不管原圖什麼比例，一律裁成正方形，列表最整齊，也是預設值。
• 自訂比例：可以填例如 3:4、4:6、16:9，系統照這個比例裁。適合服飾這類直式商品。
• 不裁切：保留原圖比例，但前提是你的原圖通通同比例，否則列表會參差不齊。

要特別記住：高度不是你直接填的，是系統依「寬度 × 裁切比例」算出來的。1:1 裁切下寬度 300px 就是高度 300px；改成 3:4 裁切、寬度 300px，高度就變 400px。理解這個算式，就不會再對「我明明只改寬度，怎麼高度也變了」感到困惑。

該在 Customizer 哪裡設定，又為什麼有人找不到選項

設定入口固定在「外觀 > 自訂 > WooCommerce > 商品圖片」（Appearance > Customize > WooCommerce > Product Images）。進去後你會看到主圖寬度、縮圖寬度、縮圖裁切這幾個欄位，右側即時預覽會跟著變動，調到滿意再按「發布」。

但很多人打開後只看到「縮圖裁切」一個選項，找不到寬度欄位，以為是壞了。其實這是正常現象，原因出在佈景主題。從 WooCommerce 3.3 起，主題可以在程式碼裡用 add_theme_support 主動宣告它要用的圖片寬度：

add_theme_support( 'woocommerce', array(
    'thumbnail_image_width'         => 300,
    'gallery_thumbnail_image_width' => 100,
    'single_image_width'           => 600,
) );

一旦主題這樣宣告，Customizer 的寬度欄位就會被隱藏，只留下裁切選項。這是主題開發者刻意鎖定的，因為主題的版面是照特定寬度設計的，讓店主隨意改寬度反而會破版。預設的 Storefront 主題就屬於這種情況，你只會看到縮圖裁切可調。遇到這種狀況不是要去硬改，而是先確認主題替你設的寬度是否夠用，不夠再走後面的程式碼覆寫。

還有一個常被忽略的點：就算寬度欄位填了某個數值，主題仍可能用 CSS 把圖片顯示成另一個大小，而且圖片實際顯示寬度也會被列表的欄數限制。商店頁一排放幾個商品（Customizer 的「商品目錄」裡的每列商品數）會直接影響每張縮圖被擠成多寬。所以調圖片時，欄數和寬度要一起看。

如何用程式碼精準覆寫圖片尺寸

如果主題鎖死了寬度、Customizer 又改不動，或你需要把某一組尺寸調成完全自訂的數值，WooCommerce 留了 hook 給你接管。最直接的是 woocommerce_get_image_size_{尺寸名} 這組過濾器，可以同時改寬、高與是否裁切。

舉例，想把相簿縮圖改成 150×150px 且不裁切，可以在子主題的 functions.php 加：

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
    return array(
        'width'  => 150,
        'height' => 150,
        'crop'   => 0,
    );
} );

對應的尺寸名分別是 thumbnail、single、gallery_thumbnail（注意 filter 名稱裡不含 woocommerce_ 前綴）。crop 設 1 為裁切、0 為不裁切。

另一類 hook 則是改「某個版位要用哪一組尺寸」，而不是改尺寸本身的數值。例如 woocommerce_gallery_image_size 控制相簿主圖用哪組、woocommerce_gallery_full_size 控制點圖放大時用哪組、single_product_archive_thumbnail_size 控制商店列表用哪組。想讓相簿縮圖改用 WordPress 內建的 thumbnail 尺寸，可以這樣寫：

add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
    return 'thumbnail';
} );

要提醒的是，WooCommerce 官方並不鼓勵主題或外掛走 hook 這條路硬改尺寸，因為這會把控制權從店主手上拿走，店主在 Customizer 的設定就會失效。這些 filter 也只在使用 WooCommerce 核心範本的情況下才生效；如果主題用自己的範本檔輸出圖片，這些 hook 可能根本不會被呼叫。動手前先確認主題的範本架構。

商品原圖該上傳多大，又該用哪種格式

先給可直接照做的建議：一般商品上傳寬度 800 到 1200px、需要放大看細節的商品上傳 1600px 左右，格式優先用 WebP，沒有 WebP 就用 JPEG，並且在上傳前先壓縮。

尺寸的拿捏是一場品質與速度的拔河。原圖太小（例如只有 300px），一旦版位需要顯示更大，WooCommerce 會把它放大，結果就是糊。原圖太大（例如 3000px 以上）則會拖慢載入、吃掉頻寬，連帶影響 SEO 與跳出率。下面這張表是常見的取捨：

有一個容易忽略的眉角：如果你把單品主圖的設定寬度，剛好設成跟原圖寬度一模一樣，相簿的放大縮放功能會失效，因為顯示框已經等於原圖，沒有更大的版本可放。想保留 zoom，原圖就要比設定寬度更大一截。

格式的選擇也直接影響檔案大小：

• JPEG：照片類商品圖的萬用選擇，檔案小、品質夠，是大多數商品照的首選。
• PNG：適合有透明背景、含文字或螢幕截圖的圖，畫質高但檔案大，不建議拿來放一般商品照。
• WebP：壓縮率最佳，同樣畫質下檔案通常比 PNG 小約四分之一，是目前整體最推薦的格式。多數主機與瀏覽器都已支援，可透過影像最佳化外掛在上傳時自動轉檔。

上傳前的壓縮這一步別省。相機直出的原圖往往遠大於網站所需，先用線上壓縮工具或影像最佳化外掛把檔案瘦身，畫質肉眼幾乎沒差，載入速度卻能明顯改善。Google 對載入速度的建議是控制在 2.5 秒內，商品圖正是最容易拖累這個指標的環節。

改完設定後為什麼圖片沒變，又該怎麼重新產生縮圖

如果你改了寬度或裁切設定，前台圖片卻紋風不動，原因幾乎都是同一個：WordPress 還在沿用舊的縮圖檔案。每組尺寸設定一改，既有的商品圖都得依新規格重新切一份，這個動作叫「重新產生縮圖」。

WooCommerce 3.3 之後已經把這件事自動化了。當你在 Customizer 改了尺寸或裁切比例並發布，系統會偵測到變動，自動在背景排入重新產生的工作，跑完前台才會換成新尺寸。這個背景工作需要一點時間，圖多的店可能要等上一陣子。想看進度，到「WooCommerce > 狀態 > 記錄」，選開頭是 wc-image-regeneration 的記錄檔就能看到狀態。

如果自動重生沒觸發，或你是透過程式碼改了尺寸（程式碼改動不會自動觸發重生），就手動跑一次：到「WooCommerce > 狀態 > 工具」，找到「重新產生商店縮圖」按下去即可。需要更細的控制，也可以裝 Regenerate Thumbnails 這類外掛，它能單張或批次重切，還能從媒體庫對個別圖片操作。

商品圖模糊的根因也往往藏在這裡。模糊不外乎兩種：一是原圖本身解析度就不足，被放大後當然糊；二是設定改了但縮圖沒重生，前台還在拿舊的小圖去撐大版面。對症下藥的順序是先確認原圖尺寸足夠，再確認設定正確，最後重新產生縮圖。三步走完，模糊問題大多能解。

把商品圖整理好，商店的第一印象就穩了

WooCommerce 商品圖片尺寸的整套邏輯，其實就圍繞三組註冊尺寸打轉：縮圖管列表、單品主圖管商品頁、相簿縮圖管切換，再加上裁切規則與重新產生縮圖這兩個關鍵動作。掌握「寬度與裁切比例一起決定高度、主圖永遠不裁、改完一定要重生」這幾條，大部分的模糊、走樣、版位不一致都能自己排除。

接下來可以做的事很具體：先把所有商品原圖統一成相同比例、寬度抓在 800 到 1600px 之間、轉成 WebP 並壓縮，再到 Customizer 設定好縮圖裁切，發布後確認背景重生跑完。打好這個基礎，往後新增商品只要照同一套規格上傳，整間店的視覺就會維持一致，載入也不會被圖片拖垮。