WooCommerce 商品圖片與圖片集設定教學

適合誰使用

使用 WooCommerce 建置線上商店、需要管理商品圖片的網站管理員

開始前準備

• 需在後台 WooCommerce > Products 新增或編輯商品，才能看到圖片設定選項

  

教學內容

商品圖片的三種類型

Single Product Image 是尺寸最大的圖片，用於商品詳情頁的主要●精選圖片

Catalog Images 是中等尺寸圖片，出現在 Shop 頁面、分類頁、相關商品與加購商品等區塊

Product thumbnails 是最小的圖片，用於購物車、小工具，以及圖片集下方的縮圖

設定商品主圖 Product Image

新增與編輯商品主圖的方式，與文章、頁面設定精選圖片的方式相同

1. 在商品編輯畫面點選 Set Product Image

   

2. 從 Media Library 選擇現有圖片，或直接上傳新圖片

   

3. 如需更換圖片，可使用 Remove and Edit 選項

建立與管理 Product Gallery 圖片集

Product Gallery 會透過 Product Gallery meta box 顯示所有附加在商品上的圖片

商品主圖會自動成為圖片集中的第一張圖片

1. 使用與設定 Product Image 相同的方式，在 Product Gallery meta box 中新增圖片

   

2. 以拖曳方式移動圖片，即可重新排列圖片集中的順序

   

3. 將游標移到圖片上方並點選紅色 “x”，即可從圖片集中移除該圖片

   

前台顯示效果：縮放與燈箱

顧客將游標移到商品圖片上時，可以看到圖片局部放大的縮放效果

顧客也可以點選圖片右上角的放大鏡圖示

點選後會彈出 lightbox，讓顧客在深色背景下看到放大圖片，若有圖片集也可以像投影片一樣瀏覽

建議圖片尺寸與相關設定

官方建議商品圖片最小尺寸為寬與高各 800 x 800 像素

圖片可以在 Appearance > Customize > WooCommerce > Product Images 中調整相關設定

建議將商品圖片另外備份存放在資料夾中，以免日後需要或誤改圖片時無法還原

1. 在商品編輯器中，Product image 是商品主圖；Product gallery 會列出其他圖片，而商品主圖會自動排在圖片集第一張

   

2. 在商品前台，商品主圖會顯示為主要大圖，圖片集中的其他圖片則會顯示為可切換的縮圖

   

介面名稱對照

• Single Product Image：商品詳情頁使用的最大尺寸主要●精選圖片
• Catalog Images：顯示於 Shop 頁面、分類頁、相關商品等區塊的中等尺寸圖片
• Product thumbnails：用於購物車、小工具與圖片集縮圖的最小尺寸圖片
• Set Product Image：用來設定商品主圖的按鈕
• Product Gallery：商品編輯畫面中用來管理圖片集的 meta box 區塊
• Lightbox：點選放大鏡後彈出的深色背景放大檢視畫面

/ai 我正在閱讀「WooCommerce 商品圖片與圖片集設定教學」，目前卡在：

我已嘗試：

我看到的畫面／錯誤訊息：

請用一步一步的方式告訴我下一步。