商品頁面與圖片

WooCommerce Customizer 提供商品頁面及商品圖片的多項顯示設定。本頁說明如何：

• 設定單一商品頁面的固定式加入購物車及商品分頁功能。
• 設定商品縮圖尺寸及裁切方式。

WooCommerce Customizer 可選擇商品頁面的顯示方式。前往外觀 > 自訂 > WooCommerce > Product Page，可找到商品頁面的兩個顯示選項：

瀏覽器視窗頂端的小型列，包含相關商品資訊（縮圖、商品標題、價格及重要的加入購物車按鈕）。當標準加入購物車按鈕在瀏覽器視窗中移出視線後會出現此列。

此選項在商品頁面顯示下一個及上一個商品連結，以縮圖圖片方式呈現。滑鼠移至縮圖上會顯示商品名稱/標題。

Customizer 的下一個選單項目為商品圖片。此處設定目錄及縮圖圖片的尺寸及裁切方式。

首先說明 WooCommerce 商店中顯示的不同圖片類型：

• 目錄圖片為商店頁面、分類頁面及相關商品、向上銷售及交叉銷售的中等尺寸圖片。WooCommerce Customizer 設定可設定這些圖片的尺寸及裁切方式。
• 縮圖圖片為購物車、小工具及個別商品詳細頁面單一商品圖片下方（選用）圖庫圖片中使用的最小圖片。WooCommerce Customizer 設定可設定這些圖片的尺寸及裁切方式。
• 單一商品圖片為最大圖片，指主要/精選圖片。WooCommerce Customizer 的商品圖片設定不適用於此類圖片。新增、編輯或刪除單一商品圖片或商品圖片圖庫，請參閱新增商品圖片與圖庫。

使用 WooCommerce Customizer 可調整縮圖圖片尺寸及裁切方式。依照以下步驟選擇縮圖裁切選項：

1. 前往外觀 > 自訂 > WooCommerce > Product Images。
2. 選擇以下裁切選項之一：
   • 1:1 — 正方形圖片。所有圖片顯示為 1:1 正方形。
   • 自訂 — 輸入圖片裁切比例。此範例設定比例為 1:2。注意其中一張圖片尺寸不足以符合選取的比例。
   • 未裁切 — 圖片維持原樣顯示，可能導致圖片顯示不一致。
3. 在不同裝置上測試。
   • Customizer 底部有桌面、平板及行動裝置的 3 個圖示。使用這些圖示預覽不同裝置尺寸的變更。
4. 選擇發佈儲存並讓變更生效。