最後更新：2026/10/15
客人在商品頁想看布料的紋路、看戒指的刻字、看包裝背面的成分表，滑鼠移到圖片上卻沒反應，點一下也只是跳到圖片檔。很多店家以為要裝「圖片放大」外掛，這三個功能 WooCommerce 內建就有：滑鼠移上去局部放大（放大鏡）、點圖片全螢幕看（燈箱）、縮圖可以左右滑（滑動相簿）。它們沒出現，多半是佈景主題沒有「宣告支援」。
這篇用幾行程式碼開啟這三個功能，順便調整放大倍率和縮圖一排幾張；不想要其中某一個，也可以單獨關掉。
不想自己改？把這篇交給 AI
把這篇的網址（或全文）連同下面這段話貼給 AI：
我的網站是 WordPress，有裝 WooCommerce。我想照下面這篇文章，開啟商品頁的放大鏡、燈箱和縮圖滑動，並調整放大倍率。
請先問我：我用哪個佈景主題、現在商品頁的圖片有哪些功能、我想開哪幾個。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）改之前先備份，密碼不要貼給 AI。
先弄清楚你的佈景主題是哪一種
WooCommerce 判斷要不要載入這三個功能的規則有點繞：
- 佈景主題完全沒有宣告支援 WooCommerce（很多一般的部落格主題），WooCommerce 會自己接管商品頁，三個功能全開。
- 佈景主題有宣告支援 WooCommerce，而且也宣告支援這三個功能（Storefront、Twenty Twenty-One 這些），三個功能全開。
- 佈景主題有宣告支援 WooCommerce，但沒有宣告這三個功能，就是什麼都沒有。市面上不少付費主題是這一種，因為它們想用自己的相簿效果，結果效果沒做好或被關掉，商品圖就變成不能放大的死圖。
區塊佈景主題（用網站編輯器的那種）又不一樣：商品頁的圖片是「商品圖庫」區塊，功能在區塊的設定裡，不看這篇的程式碼。
你的網站是第三種，這篇的程式碼才派得上用場；是第一、二種而沒有效果，多半是其他外掛把它關掉或改掉了。
完整程式碼
// 第 81 篇：商品圖放大鏡、燈箱、滑動相簿
// 1. 開啟三個功能（佈景主題沒有宣告支援時）
add_action('after_setup_theme', function () {
add_theme_support('wc-product-gallery-zoom'); // 滑鼠移上去放大
add_theme_support('wc-product-gallery-lightbox'); // 點圖片全螢幕看
add_theme_support('wc-product-gallery-slider'); // 縮圖可以左右滑
}, 20);
// 2. 不想要的功能，用 remove 關掉（例如只關放大鏡）
// add_action('after_setup_theme', function () {
// remove_theme_support('wc-product-gallery-zoom');
// }, 20);
// 3. 放大鏡的倍率（預設 2 倍）
add_filter('woocommerce_single_product_zoom_options', function ($options) {
$options['magnify'] = 1.5;
return $options;
});
// 4. 縮圖一排幾張（預設 4）
add_filter('woocommerce_product_thumbnails_columns', function () {
return 5;
});程式碼放在 Code Snippets 這類外掛或子主題，放法和備份方式見〈WooCommerce 結帳頁改成台灣習慣〉。
四段各做了什麼
第 1 段向 WooCommerce 宣告「這個網站支援這三個功能」。順序很重要：佈景主題宣告自己支援什麼是在 after_setup_theme 這個時間點，我們排在它後面（優先順序 20），才能補上主題沒宣告的。放在 Code Snippets 裡要確認片段是在「所有地方」執行，不是只在前台或後台。
第 2 段是反過來的用法：主題開了放大鏡，但你的商品圖解析度不高，放大反而糊，就用 remove_theme_support 關掉那一個，其他兩個留著。程式碼裡這段用註解關起來了，要用再打開。
第 3 段調放大鏡的倍率。預設 2 倍，商品圖如果只有 800 像素寬，2 倍看起來會糊，1.5 倍比較自然。放大鏡用的是商品圖的「大圖」尺寸，想讓放大效果清楚，上傳的原圖至少要有 1,200 像素以上。
第 4 段調縮圖一排幾張，預設 4 張，商品圖多的可以改成 5 或 6。
測試結果
我們在本機測試站用 Twenty Seventeen 模擬「有宣告支援 WooCommerce 但沒有宣告相簿功能」的佈景主題：
- 加程式碼之前，商品頁沒有載入放大鏡、燈箱、滑動相簿的程式，也沒有燈箱的畫面元件。
- 加了第 1 段之後，三個程式都載入了，頁面多了燈箱的元件，商品圖的外框多了「可放大」的標記。
- 第 3、4 段生效：頁面上的放大鏡設定變成 1.5 倍，縮圖容器的類別變成 5 欄。
圖片本身也要配合
放大鏡和燈箱再好，圖片不夠大也沒用。商品主圖建議上傳 1,200 到 2,000 像素寬的正方形或 4:3 圖片，WooCommerce 會自己產生各種尺寸。圖片尺寸的設定在「外觀 > 自訂 > WooCommerce > 商品圖片」，裡面可以選縮圖要裁成正方形、4:3 還是不裁；改了設定之後，舊圖要用「重新產生縮圖」類的外掛跑一次才會套用。不想讓 WordPress 替每張圖產生十幾個檔案，可以看〈WordPress 停止產生多餘縮圖〉。
圖片檔案大，商品頁就慢，上傳前先壓縮，或讓網站自動轉成 WebP，做法在〈WordPress 網站變快，自己能做的事〉。
商品圖是網店唯一的「摸一摸」
實體店客人可以拿起來看、翻過來看；網店只有圖片。放大鏡讓客人看細節，燈箱讓客人看全貌，滑動相簿讓客人看每個角度，三個功能都是內建的，開起來不用錢。要花時間的是拍一組好圖，這部分可以看〈用手機拍短影音：器材清單和拍攝細節〉裡的打光和背景做法，拍照一樣適用。
如果你的網店商品靠細節取勝，想把商品頁的圖片、規格和說明一次規劃好，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，購物車電商網站可以依你的商品設計商品頁。MIMI 提供新北網頁設計服務，新北的店家可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
