如何設置 WooCommerce 店面縮略圖大小

已發表: 2020-09-26

設置 WooCommerce 店面縮略圖大小 如果您正在經營一家 WooCommerce 商店，那麼您就會知道圖像是您在線商店中最重要的部分之一。 然而，WooCommerce 使用了許多不同的產品圖像尺寸類型。 這使得很難弄清楚您可以在哪裡更改它們以滿足您的特定需求。

設置 WooCommerce 店面縮略圖大小

這意味著 WooCommerce 圖像定制可能會變得有點複雜。 這就是為什麼我整理了本指南來介紹 WooCommerce 圖像的各個方面，因此您可以跳到適合您的部分。 此外，我將使用 Storefront 主題。

設置產品圖片尺寸有什麼好處？

在我們進入“如何”之前，您可能想知道為什麼？ 以下是一些好處：

  • 它可以防止圖像模糊。 尺寸錯誤的圖像可能會顯得模糊，這會給您的買家留下不好的第一印象。
  • 它優化了速度。 當圖像很大時，加載時間會更長。 這會減慢您的網站速度，從而導致收入減少和用戶不滿意。

調整產品縮略圖大小的步驟

默認情況下，WooCommerce 允許您調整產品圖像的大小。 您需要做的就是按照以下簡單步驟操作：

  1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
  2. 從儀表板菜單中，單擊外觀菜單 > 自定義。
  3. 單擊WooCommerce > 產品圖片。 縮略圖裁剪
  4. 在縮略圖裁剪字段中，您可以設置圖像的高度。
  5. 如果您對更改感到滿意，請單擊“發布”。

店鋪產品圖片高度終極指南

在縮略圖字段中，您可以使用 3 個不同的選項來設置商店或目錄圖像的高度：

  • 1:1：如果您選擇 1:1，您的圖像將被裁剪為 360 像素寬度和 360 像素高度。 假設您在縮略圖寬度字段中將圖像寬度設置為 360 像素，這將起作用。
  • 自定義：在這裡您可以選擇圖像的縱橫比。 這些是一些流行的縱橫比（1:1、5:4、4:3、3:2、16:9 和 3:1）。
  • 未裁剪：在此選項中，圖像的高度將保持不變。 您商店中的圖像將使用它們上傳時的縱橫比顯示。

經常問的問題

  • 如果主題開發人員設置了圖像大小，我該如何更改？

有一個簡單的解決方案，通過從你的主題 functions.php 文件中刪除或更改圖像寬度設置。 在 Storefront 主題中，沒有主圖像或縮略圖字段的設置。 這是因為它們是事先在 storefront/inc/class-storefront.php 中聲明的

// 聲明 WooCommerce 支持。

 add_theme_support（'woocommerce'，apply_filters（'storefront_woocommerce_args'，數組（

 'single_image_width' => 416,

 'thumbnail_image_width' => 324,

 'product_grid' => 數組（

 'default_columns' => 3,

 'default_rows' => 4,

 'min_columns' => 1,

 'max_columns' => 6,

 'min_rows' => 1

 )

) ) );

單品圖片尺寸設置為 416px 寬，縮略圖設置為 324px 寬。 這意味著您可以刪除這兩行或將寬度編號更改為所需的寬度。 但是，您需要確保在創建子主題後進行更改。 這是因為如果您更新主題，它將恢復到以前的設置。

  • 如何設置目錄圖像大小？

對於商店產品圖像和目錄或類別圖像，它們根據外觀 > 自定義 > WooCommerce > 產品圖像 > 縮略圖寬度字段中的設置調整大小。

  • 為什麼我的 WooCommerce 產品圖像模糊？

如果您的 WooCommerce 商店出現這種情況，您可以檢查以下幾點：

  1. 檢查圖像質量。 檢查質量是否良好，如果添加到您的 WooCommerce 商店時質量低劣，它看起來不會像您想要的那樣清晰。
  2. 縮略圖設置。 檢查設置，如果設置正在為您的產品頁面尋找 500 像素的圖像，在目錄頁面上尋找 160 像素的圖像，但您只上傳了 160 像素的圖像，那麼 WooCommerce 會自動放大您的圖像，使其看起來模糊。
  • 最佳圖像尺寸是多少？

在線商店的最佳圖片尺寸取決於您用於商店的主題。 如果您銷售的是襯衫等簡單產品，則適合 800 – 1000 像素寬的圖像尺寸。

但是，如果您有詳細或複雜的圖像，則上傳更大的圖像將允許潛在客戶放大並近距離查看這些細節。 推薦大小為 2000px 寬，這樣效果會更好

還值得一提的是，您永遠不應該上傳大圖片。 過大的圖片會減慢您的網站速度，因此可能會影響銷售。

結論

在這個簡短的教程中，您已經了解瞭如何只需單擊幾下即可設置 WooCommerce 店面縮略圖大小。 此外，我還解釋瞭如何更改產品和圖庫圖像大小，以及縮略圖設置的終極指南。

此外，您還了解了設置 WooCommerce 產品圖像尺寸的好處。 過大的圖像會減慢您的網站速度，因此可能會影響銷售。 此外，我還添加了一個常見問題部分，其中包括您可能遇到的一些常見問題。

在您的在線商店進行銷售時，圖像非常重要。 確保您遵循本教程中提供的指南，如果您不確定更改，請考慮使用 WooThumbs for WooCommerce 之類的插件。 它將允許您輕鬆更改 WooCommerce 產品圖像大小並改善您的 WooCommerce 產品庫。

類似文章

  1. 如何將側邊欄添加到店面 WooCommerce
  2. 如何創建 WooCommerce 店面子主題 [完整指南]
  3. 按角色註冊後如何重定向用戶
  4. 如何刪除 WooCommerce 產品圖像的縮放效果
  5. 如何調整頁眉的 WooCommerce 店面高度
  6. 如何從 WooCommerce 主題的產品頁面中刪除側邊欄
  7. 如何在 WooCommerce 中自動批准訂單
  8. 如何在 WooCommerce 中設置自定義相關產品
  9. 如何在 WooCommerce 中快速找到您的產品 ID
  10. 如何從前端添加 Woocommerce 產品
  11. 如何在店面設置後添加產品 [初學者指南]
  12. 如何隱藏 WooCommerce 中的缺貨變化
  13. 如何在 WooCommerce 中隱藏添加到購物車按鈕
  14. 如何從搜索結果中隱藏 WooCommerce 產品
  15. 如何修復未捕獲的類型錯誤：wp.template 不是函數
  16. 如何逐步使用 WooCommerce 產品屬性 [完整指南]
  17. 如何按類別顯示 WooCommerce 產品