如何在 WooCommerce 中向產品添加圖像

已發表: 2021-08-31

尋找將圖像添加到您的產品的方法？無論是特色、圖片還是畫廊，您展示商品的方式將決定您的銷售量。這就是為什麼在本指南中，我們將向您展示如何在 WooCommerce 中向產品添加圖像。

圖片在電子商務中的重要性

圖像是銷售產品的關鍵要素之一。一張圖片說明一千個字，所以一個具有吸引力的產品有更多的機會吸引客戶的注意力並產生銷售。

店主往往會花很多精力來描述其產品的功能。但即使我們想認為我們做出了理性的決定，但事實是大多數決定都是情緒化的。人類傾向於做出情緒化的決定並理性地證明它們的合理性。如果產品看起來不錯，我們將更有可能購買它，因為它會引起我們的注意。

無論您銷售的產品類型如何，如果它們看起來不錯，它們將有更好的銷售機會。如果你仔細想想，那是合乎邏輯的。如果有人要使用或穿戴某種產品，無論是鞋子、衣服還是軟件，他們都會希望它看起來不錯。這就是為什麼添加和優化用於宣傳產品並確保您銷售的產品看起來最好的圖像很重要的原因。

現在我們了解了它的重要性，讓我們看看如何將圖像添加到 WooCommerce 產品中。

如何在 WooCommerce 中將圖像添加到產品中

在 WooCommerce 中向產品添加圖像有兩種主要方法：

使用 WooCommerce 儀表板
以編程方式

讓我們來看看這兩種方法。

1) 從 WooCommerce 儀表板添加圖像

在 WooCommerce 商店中，向產品添加圖像是一項非常簡單的任務。當您創建或編輯產品時，您會在側邊欄上找到圖像元框。在那裡，您將能夠設置一個特色圖片和一個包含多張圖片的圖片庫來展示您的商品。

如何在 WooCommerce 中將圖像添加到產品中

當您單擊其中任何一個時，將打開一個模式，您將能夠上傳新的圖像文件或從 WP 媒體庫中選擇一個現有的圖像文件。

如何在 WooCommerce 中將圖像添加到產品中

如果要將圖像添加到產品庫，可以按 CTRL + 左鍵單擊選擇多個圖像並在單個操作中添加它們。

或者，您可以從產品內容描述中添加圖像。只需按下“添加媒體”按鈕並選擇要添加的圖像。如果您使用此方法，請記住這可能會影響整個產品頁面的設計，因此請確保在文本編輯器中添加圖像之前選擇正確的尺寸和對齊方式。

如何在 WooCommerce 中將圖像添加到產品中

從儀表板添加圖像很簡單。但是，如果您具有編碼技能，您還可以通過編程方式添加圖像，從而為您提供更大的靈活性。讓我們看看怎麼做。

2) 如何以編程方式將圖像添加到 WooCommerce 產品

在某些情況下，您可能需要以編程方式添加圖像。這為您提供了更大的靈活性，並允許您包含從圖像到單個產品、特色圖像、畫廊等的所有內容。

在本節中，我們將向您展示可幫助您將圖像添加到特定產品的示例腳本。請注意，您需要將函數前兩行的產品和圖像 ID 替換為您的產品和圖像 ID。否則，如果該產品和圖像 ID 不存在，您將收到錯誤消息。

另外，請記住，腳本將在一次運行中運行。這意味著您可以在運行它們後刪除它們。

最後，您需要將以下腳本粘貼到您的子主題的functions.php文件中。您可以通過轉到外觀 > 主題編輯器來做到這一點。 然後，在右欄中搜索functions.php文件並粘貼代碼，如下所示。或者，您可以使用像代碼片段這樣的插件。

注意：由於我們將編輯一些核心文件，因此在開始之前，我們建議您備份您的站點。除了作為最佳實踐之外，最好有一個最近的備份，以防出現問題。如果您不熟悉鉤子，請查看我們的 WooCommerce 鉤子指南，您將在其中了解不同類型的鉤子以及如何使用它們。

2.1) 為單個產品添加特色圖片

此腳本將為單個產品設置特色圖像。為此，您需要指定圖像 ID 和產品 ID，如下所示。例如，在本例中，我們將 ID 為 48 的圖片設置為 ID 為 195 的產品的特色圖片。

 函數 QuadLayers_add_featured_image() {

    $imageID = 48; // 圖像 ID
    $post_id = 195; //產品編號

    set_post_thumbnail($post_id, $imageID);
    
}

add_action('init', 'QuadLayers_add_featured_image');

init鉤子將確保函數可以在每次頁面加載時在任何地方運行。最重要的是，我們使用set_post_thumbnail()函數來設置特色圖像。這適用於產品和帖子。

2.2) 為多個產品添加特色圖片

同樣，您可以通過簡單地添加它們的 ID 來對多個產品執行相同的操作。此腳本會將 ID 為 53 的圖像添加到 ID 為 32、33 和 34 的產品中。

 函數 QuadLayers_multiple_featured_image() {

    $imageID = 53; // 圖像 ID
    $post_id = 數組（32,33,34）； //產品ID

    對於 ($ii=0; $ii < 計數($post_id); $ii++) { 
          
           set_post_thumbnail($post_id[$ii], $imageID);      
    }
    
}
add_action('init', 'QuadLayers_multiple_featured_image');

如您所見，這與之前的腳本相同，但我們將所有產品 ID 放在一個數組中。這樣，您可以同時為多個產品分配相同的特色圖片。這對於不會產生美學變化的產品變化很有用。例如，您可以將相同的特色圖像用於具有不同內存 RAM 的同一手機的變體。

2.3) 將圖片添加到產品庫

在 WooCommerce 中將圖像添加到產品庫稍微複雜一些，因為您需要使用兩個函數。如果您檢查以下腳本，您會看到第一個函數 ( QuadLayers_create_gallery ) 準備了創建畫廊所需的信息。那是您要在其中添加圖庫的圖像列表和產品 ID。

另一方面， update_post_met()負責畫廊的創建。為此，我們需要使用要在其中添加圖庫的產品的 ID 和數組中的圖像列表。

 函數 QuadLayers_create_gallery(){ 
        $imgs_ids=數組（48,53,47）； //圖像ID
        add_img_to_gallery(195,$imgs_ids); // 產品編號
}
函數 add_img_to_gallery($product_id,$image_id_array){
        update_post_meta($product_id, '_product_image_gallery', implode(',',$image_id_array)); 
  
}
add_action('init','QuadLayers_create_gallery');

2.4) 為沒有特色圖片的產品設置默認圖片

我們已經看到，要設置產品的特色圖片，在您的管理儀表板中，您需要轉到WooCommerce > Settings > Products 。

如果要以編程方式設置默認圖像，請使用以下代碼段。

 add_filter('QuadLayers_default_image', 'custom_woocommerce_placeholder_img_src');

函數 QuadLayers_default_image( $src ) {
	$upload_dir = wp_upload_dir();
	$uploads = untrailingslashit($upload_dir['baseurl']);
	// 替換為圖片的路徑
	$src = $上傳。 '/2021/07/album-1.jpg';
	 
	返回 $src;
}

這將為所有沒有特色圖片的產品分配默認圖片。在這種情況下，我們使用的是圖像路徑而不是 ID，因此請記住將其替換為圖像的正確路徑。

要獲取路徑，只需前往媒體庫，查找要使用的圖像，複製 URL 路徑並將其粘貼到上面的代碼中，保持當前格式。

如何添加自定義圖像尺寸

除了將圖像添加到 WooCommerce 產品之外，您還可以做更多的事情來自定義您的項目。一個不錯的選擇是創建自定義圖像大小。默認情況下，WordPress 包含 3 種圖像尺寸：縮略圖 (150 x 150)、中 (300 x 300) 和大 (1024 x 1024)。您可以從儀表板輕鬆更改這些尺寸，但如果您想添加自定義默認尺寸怎麼辦？讓我們看看如何做到這一點。

首先，打開functions.php文件並粘貼以下代碼：

add_theme_support( 'post-thumbnails' );

這將啟用add_image_size功能，並允許您創建其他圖像大小。然後，更新文件。現在讓我們添加一些新的圖像尺寸。在下面的代碼中，我們將添加四種不同尺寸的自定義尺寸。只需粘貼代碼並根據您的需要調整名稱和尺寸。

 add_image_size( 'post-thumbnail size' , 800, 240 ); add_image_size( 'homepage-thumb size' , 220, 180 ); add_image_size( 'fullpage-thumb size' , 590, 790 );

而已！現在，您將能夠在您的網站上選擇更多默認尺寸。有關這方面的更多信息，請查看我們關於如何添加自定義圖像尺寸的指南。

獎勵：刪除 WordPress 中的默認圖像大小

您可能已經註意到，每次您將圖片上傳到 WordPress 時，它都會自動生成 3 個我們剛剛看到的默認圖像大小的 3 個副本：縮略圖、中號和大號。

這很有用，可以幫助您節省時間。但是，如果您不使用其中一些尺寸，則圖像只會佔用服務器中的空間。一個快速的解決方案是從您的站點中刪除這些圖像大小並避免生成這些圖像副本。

好消息是你可以用一個簡單的腳本來做到這一點。例如，假設您想從您的網站中刪除中等大小。只需將以下腳本複制並粘貼到您的子主題的functions.php文件中。

 add_filter('intermediate_image_sizes_advanced', 'prefix_remove_default_images'); 
// 這將刪除默認的中等圖像大小。 
功能前綴刪除默認圖像（$大小）{ 
未設置（$sizes['medium']）； // 300 像素 
返回$大小；
}

要刪除任何其他尺寸，請添加另一行包含要刪除的尺寸。例如，如果您還想刪除大尺寸，代碼將是：

 add_filter('intermediate_image_sizes_advanced', 'prefix_remove_default_images'); 
// 這將刪除默認的中、大圖像尺寸。 
功能前綴刪除默認圖像（$大小）{ 
未設置（$sizes['medium']）； // 300 像素
未設置（$大小['大']）； // 1024 像素 
返回$大小；
}

而已！這就是您可以輕鬆刪除圖像尺寸的方法。有關這方面的更多詳細信息，請查看我們的分步教程。

結論

總之，在銷售產品時，圖片是必不可少的。圖片吸引人的商品更有可能吸引顧客的注意力並為您的商店帶來銷售。

在本指南中，我們看到了 2 種將圖像添加到 WooCommerce 產品的不同方法：

從 WooCommerce 儀表板
以編程方式

現在哪一個更適合你？從儀表板添加圖像非常容易，因此這是一個不錯的選擇。但是，如果您有編碼技能並希望獲得更大的靈活性，您也可以通過編程方式添加圖像。我們向您展示了一些腳本，它們將幫助您輕鬆地將圖像、特色圖像和畫廊添加到您的產品中。

最後，我們還了解瞭如何在您的網站上添加自定義尺寸圖像和刪除默認圖像尺寸，以便您可以自定義您的網站並使您的產品更具吸引力。有關如何充分利用您的產品頁面的更多信息，請查看我們的自定義產品頁面指南。

您是否在產品中添加了圖像？您使用了哪種方法？在下面的評論部分讓我們知道！

有關自定義商店的更多教程，請查看以下帖子：

如何在 WooCommerce 中自定義商店頁面
指南：如何以編程方式編輯 WooCommerce 感謝頁面
結帳優化完整指南