如何修復 WooCommerce 圖像大小問題

您是否對在線商店的圖像尺寸有疑問？ 你來對地方了。 在本指南中，我們將向您展示解決最常見的 WooCommerce 圖像大小問題的不同方法。

WooCommerce是最好的電子商務平台之一，但有時您可能會遇到一些問題。 我們已經了解瞭如何解決結帳時最常見的問題，以及當“添加到購物車”按鈕不起作用時該怎麼做。 在本教程中，我們將向您展示解決圖像大小問題的不同解決方案。

這些問題可能由於各種原因而發生，例如主題或插件不兼容、圖像大小錯誤、圖像字段丟失等。 在我們了解如何解決各種圖像大小問題之前，讓我們看一下 WooCommerce 中不同類型的圖像。

WooCommerce 中的圖像類型

您可以將多種類型的圖像添加到您的網站，但 WooCommerce 中使用的主要 3 種類型是產品、目錄和產品縮略圖。

• 單品圖片：單品圖片是用於查看單品的大尺寸圖片。 這是您在客戶打開特定 WooCommerce 產品頁面時向他們顯示的產品的主要圖片。 您可以添加多個產品圖片以從各個角度展示產品。
• 目錄圖像：它們是 WooCommerce 商店頁面上通常使用的產品的中等尺寸圖像。 如果您的在線商店中有單獨的類別頁面，則這些目錄圖像也可以在產品類別或產品本身上看到。
• 產品縮略圖：這些是尺寸非常小的縮略圖。 它們被顯示以識別各種 WooCommerce 頁面上的產品，例如購物車頁面、小部件區域，甚至在訂單頁面中。

WooCommerce 圖像大小的常見問題

現在您對各種類型的 WooCommerce 圖像及其大小差異有了更好的了解。 圖像對於幫助您將訪問者轉化為客戶非常重要，因此圖像出現問題可能會讓人頭疼。

為了能夠修復 WooCommerce 圖像大小問題，您需要首先確定您的問題。 棘手的部分是您可能會面臨幾個關於圖像大小的問題。 一些最常見的是：

1. 圖像模糊

這是最常見的問題之一。 您為產品或縮略圖上傳的圖像看起來很模糊，即使原始圖像未壓縮、清晰可見且質量很好，也可能無法清晰可見。

模糊的圖像不僅看起來很糟糕，而且給人的印像是您的網站不專業。

原始圖像

圖像模糊

2. 低質量圖像

與模糊圖像類似，您網站上的某些圖片在您上傳後可能質量較低。 它們可能看起來像素化或沒有原始線條那麼流暢。

即使上傳的圖像質量很好，也會發生這種情況。 我們將在下一節中了解為什麼以及如何解決它。

3. 錯誤的圖像尺寸

有時，您可能還會注意到上傳的圖像與原始圖像的大小不同。 如果您不根據主題要求調整圖像設置，這是一個非常常見的問題。

例如，假設您對目錄圖像的主題要求至少為 250 x 250 像素，但您商店的 WooCommerce 圖像設置為 200 x 200 像素。 由於未根據主題要求配置設置，因此您的圖像可能會自動重新調整為錯誤的圖像尺寸。

4. 縮放、燈箱或滑塊問題

WooCommerce 為您提供縮放、燈箱和滑塊選項來預覽您的圖像。 這是WooCommerce 在 3.0 版本中添加的一項新功能。 如果您的主題尚未根據其規范進行更新，您可能會遇到一些問題。

5. 圖像寬度和縮略圖字段缺失

您可能還注意到，在外觀 > 自定義 > WooCommerce > 產品圖像下的定制器中缺少WooCommerce 圖像的寬度和縮略圖字段。

如果您的主題具有非常嚴格的圖像大小，則可能會出現這種情況，因此您根本無法通過管理員更改主題圖像大小。 在這種情況下，您將需要一些編程知識，我們將在下面的解決方案中討論這些知識。

現在我們更好地了解了圖像的類型和最常見的問題，讓我們看看解決 WooCommerce 中圖像大小問題的不同解決方案。

如何修復 WooCommerce 圖像大小問題

由於您熟悉一些最常見的 WooCommerce 圖像大小問題，讓我們也修復它們。 但是，您遇到的圖像大小問題可能是由各種原因引起的。 因此，可能沒有針對他們的特定解決方案。

因此，對於任何圖像尺寸問題，我們建議您使用下面給出的一些常見解決方案。 我們確信其中一種解決方案將能夠解決 WooCommerce 圖像大小問題。

1. 要記住的初始清單

在我們通過具體解決方案來解決圖像大小問題之前，您需要記住一些事情。 首先，確保您已正確設置 WooCommerce ，並且不會遺漏任何步驟。 如果您的網站安裝不正確，您可能會遇到問題。

其次，我們想提醒您檢查您網站上的所有內容是否已更新。 如果您尚未將主題或插件更新到最新版本，您的商店可能會出現問題。

同樣，確保將 WooCommerce 更新到最新的可用版本。 要知道您是否有待處理的更新，請轉到 WordPress 儀表板上的插件 > 已安裝插件。 如果有通知要求您更新 WooCommerce，請單擊立即更新。

此外，如果您使用 Gutenberg 編輯器更新了 WordPress，請確保WordPress 也更新到最新版本。 另一方面，如果您使用帶有經典編輯器的 WordPress，最好使用最新版本的 WordPress 4.9 進行更新。

完成所有這些操作後，如果圖像尺寸仍有問題，請繼續執行下一個解決方案。

注意：我們將在本教程中使用 Divi 主題，因此如果您使用其他主題，某些頁面可能看起來與您的網站不同。 但是，您應該能夠毫無問題地遵循每一個解決方案。 如果您正在尋找與 WooCommerce 兼容的新主題，請查看本文。

2. 設置自定義 WooCommerce 圖像大小

添加自定義圖像大小是解決 WooCommerce 圖像大小問題的最常見方法之一。 由於大多數問題是由於默認圖像大小的變化而發生的，因此這應該是您的第一步。

設置自定義圖像大小非常容易。 在您的管理儀表板上，轉到外觀 > 自定義並打開WooCommerce選項卡以訪問自定義程序。

然後，打開產品圖片選項。 在這裡，您可以調整產品頁面和產品縮略圖的大小。 要編輯產品頁面的主圖像，請將您想要的圖像尺寸添加到主圖像寬度部分。

您還可以在此處編輯縮略圖大小和裁剪。 如果要調整縮略圖大小，請編輯縮略圖寬度選項。

此外，還有三個選項可以調整縮略圖裁剪：1:1、自定義和未裁剪。 為了最大限度地減少功能和外觀的圖像問題， 1:1裁剪是最佳選擇。 完成所有必要的更改後，單擊Publish 。

3.檢查您的主題的產品圖片尺寸

如果您在添加自定義圖像尺寸後仍然遇到一些問題，則可能是圖像尺寸不正確。 正如前面在錯誤的圖像尺寸問題中提到的，WooCommerce 中對圖像尺寸有特定的主題要求。 如果這些尺寸不符合要求，您可能會遇到一些問題。

要解決這些 WooCommerce 圖像大小問題，最好的選擇是首先檢查主題的產品圖像大小。 打開任何產品的產品頁面，並使用 Web 瀏覽器上的檢查元素開發工具查看主題圖像大小。

例如，如果您使用的是Google Chrome ，請右鍵單擊產品圖片並按Inspect 。 您將能夠在檢查元素開發人員工具中看到圖像大小，如下所示。

在這種情況下，產品圖像尺寸為900×600 。 如果您的主題的圖像要求不同，您可能會遇到問題。

您可以使用我們在第 2 點中描述的方法從定制器中相應地調整產品圖像大小。同樣，您可以以相同的方式檢查縮略圖大小，並在需要時在定制器中進一步編輯它。

4.更改默認圖像尺寸

如果您已經嘗試了上述所有解決方案，但仍然面臨圖像問題，您可能需要調整默認的 WordPress 圖像大小。

為此，請轉到 WordPress 儀表板上的設置 > 媒體，您將看到縮略圖、中型和大尺寸圖像的尺寸選項。

根據主題要求設置圖像尺寸並保存更改。

此外，如果您不使用它們，您可以刪除一些默認尺寸。 要了解更多信息，請查看我們的刪除 WordPress 默認圖像大小的指南。

5. 使用插件修復 WooCommerce 圖像大小問題

另一種解決 WooCommerce 圖像大小問題的方法是使用專用插件。 為此，您可以使用多種工具。 在本節中，我們將向您展示一些內容，以便您可以防止網站上出現進一步的圖像大小問題。

讓我們看一下您應該使用的一些最佳工具。

5.1。 完美的圖像和視網膜支持

簡單來說，Retina Support 是您網站上圖像的顯示選項，具有非常高的分辨率和質量。 支持視網膜的顯示器可確保在任何屏幕尺寸的任何設備上看到的任何圖像都是清晰的，並且沒有任何可見的像素化線條或邊框。

如果您網站上上傳的圖片模糊或質量低下，這是一個完美的解決方案。 如果要手動創建視網膜就緒圖像，則需要將圖像大小和尺寸加倍，優化它們，然後重新上傳。 但是，您可以使用插件，因此您的圖像會自動準備好視網膜。 為此， Perfect Images是目前最好的插件之一。

Perfect Images是一個簡單的插件，可以將帶有視網膜顯示的圖像添加到您的網站。 它會自動檢測任何有視網膜問題的圖像，並創建一個可用於視網膜的副本。 最重要的是，您可以創建單獨的視網膜就緒圖像或批量進行以節省時間。

現在，讓我們看看如何使用這個插件。

5.1.1。 安裝並激活插件

首先，您需要安裝並激活它。 在您的 WordPress 儀表板中，轉到Plugins > Add New ，查找插件並單擊Install Now 。

安裝完成後，激活插件。 或者，您可以手動安裝它。 如果您不確定如何執行此操作，請查看我們的手動安裝 WordPress 插件指南。

5.1.2. 配置 Retina 顯示的圖像選項

激活插件後，您必須為您的 WooCommerce 或網站圖像配置視網膜選項。 轉到Meow Apps > Perfect Images ，您將在常規選項卡中看到視網膜圖像的所有選項。 大多數網站都可以使用默認選項，因為它們會為最常見的圖像尺寸創建視網膜圖像。

但是，在圖像轉換為視網膜就緒後，可能需要對其進行優化。 支持 Retina 的圖像往往非常大，可能會減慢您的網站速度。 由於大多數用戶使用移動設備進行在線購物，因此這可能會讓您的客戶大失所望。

為確保視網膜圖像不會消耗您的網站速度，您需要確保它們得到了很好的優化。 您可以通過轉到“優化和速度”選項卡從插件中執行此操作。 請記住，為此，您需要訂閱他們的高級計劃，其中包括用於優化的Easy IO ，每月收費 10 美元。

或者，您也可以使用TinyPNG或Smush等圖像優化插件或服務手動優化它們。

5.1.3. 轉換圖像以支持 Retina

為視網膜圖像配置所有必要選項後，您可以開始轉換它們。 首先，轉到媒體 > 完美圖像，您將被重定向到Retina 問題選項卡。 在這裡，您可以創建視網膜就緒圖像來修復 WooCommerce 圖像大小問題。

您還可以通過選擇所需的圖像來生成縮略圖和視網膜圖像。

5.2. 重新生成縮略圖

重新生成縮略圖也是解決圖像大小問題的絕佳方法，尤其是縮略圖圖像。

當您最近更改主題時，通常會出現這些問題。 新主題可能對圖像尺寸有不同的主題要求，因此您需要重新調整它們。

如果您的網站上有大量縮略圖，您可以使用Perfect Images 。 您需要做的就是配置圖像大小選項，就像我們在步驟 5.1.1 和 5.1.2 中所做的那樣。 然後，轉到媒體 > 完美圖像，打開所有選項卡，您將看到您網站上的所有圖像。 與視網膜支持步驟類似，您可以為特定圖像或批量重新生成縮略圖。

要批量重新生成圖像，請按批量操作並選擇重新生成所有條目以重新生成縮略圖。 請記住，如果您的網站上有很多圖片，這可能需要幾分鐘。

6. 程序化解決方案

如果您已經走到這一步，您已經嘗試使用默認的 WooCommerce 選項甚至使用插件來解決圖像大小問題。 如果沒有任何效果並且您仍然面臨問題，那麼您還可以做一件事。 要使用此解決方案，我們建議您具備基本的編程知識，因為我們將使用一些代碼。

您可以使用一些代碼片段來解決圖像問題，但請記住，我們將使用的代碼片段會更改您網站上的圖像大小。 當您的主題定制器中缺少主要圖像寬度和縮略圖字段並且您想要設置自定義 WooCommerce 圖像大小時，這可能很有用。

由於我們將編輯一些核心文件，因此在開始之前，我們建議您備份您的 WordPress 網站。 此外，創建子主題或使用這些 WordPress 子主題插件中的任何一個都是一個好習慣。

使用代碼片段更改圖像大小

要在定制器中缺少圖像寬度和縮略圖寬度時更改圖像大小，您可以使用以下代碼段。 轉到外觀 > 主題編輯器並打開functions.php文件。

然後，只需在編輯器底部添加以下代碼片段。

 add_theme_support（'woocommerce'，apply_filters（'divi_woocommerce_args'，數組（
   'single_image_width' => 600,
   'thumbnail_image_width' => 300,
   'product_grid' => 數組（
   'default_columns' => 3,
   'default_rows' => 4,
   'min_columns' => 1,
   'max_columns' => 6,
   'min_rows' => 1
   )
) ) );

此代碼段會將產品圖像寬度更改為 600，將縮略圖寬度更改為 300，這是默認參數。 根據您的要求調整這些值，不要忘記更新文件。

7. 支持選項

如果您嘗試了此處提到的所有解決方案，但找不到圖像大小問題的解決方案，則您面臨的問題很少見，或者 WooCommerce 的核心文件或您的主題存在問題。

此時，最好的選擇是聯繫客戶支持。 WooCommerce 具有出色的支持選項，因此您可以就圖像大小問題與他們聯繫。 或者，如果您認為您的主題可能是問題所在，您可以聯繫您的主題提供商並向他們尋求幫助。

結論

總而言之，有不同的圖像類型（單個產品、目錄和產品縮略圖）以及圖像大小的幾個常見問題。 最常見的是模糊或低質量的圖像、錯誤的圖像尺寸、縮放、燈箱和滑塊選項，以及缺少寬度和縮略圖字段。

在本指南中，我們看到了解決最常見的 WooCommerce 圖像大小問題的不同解決方案。

1. 將您的主題和插件更新到最新版本，包括 WooCommerce
2. 設置自定義 WooCommerce 圖像大小
3. 檢查您的主題的圖像產品尺寸
4. 更改默認圖像大小
5. 使用插件
6. 帶有一點代碼的程序化解決方案
7. 聯繫 WooCommerce 或您主題的支持團隊

如果這篇文章對您有幫助，請在社交媒體上分享並幫助您的朋友擺脫這些問題。 你以前遇到過這些問題嗎？ 你是怎麼解決的？ 請在下面的評論中告訴我們。

如需更多有用的指南，您可能會感興趣的文章如下：

• 如何在 WooCommerce 中將圖像添加到產品中
• 3 刪除 WordPress 中縮略圖的方法
• 如何在 WordPress 中添加自定義圖像大小