Как добавить изображение к товару в WooCommerce

Ищете способы добавить изображения к своим продуктам? Будь то избранное, изображение или галерея, от того, как вы представите свои товары, будет зависеть, сколько вы продадите. Вот почему в этом руководстве мы покажем вам, как добавить изображение к продукту в WooCommerce .

Важность изображений в электронной коммерции

Изображения являются одним из ключевых элементов, когда речь идет о продаже продукта. Изображение говорит за тысячу слов, поэтому продукт с привлекательным изображением имеет больше шансов привлечь внимание клиентов и увеличить продажи.

Владельцы магазинов, как правило, прилагают много усилий для описания характеристик своей продукции. Но даже если нам хочется думать, что мы принимаем рациональные решения, правда в том, что большинство решений эмоциональны. Люди склонны принимать эмоциональные решения и рационально их оправдывать. Если продукт выглядит хорошо, мы с большей вероятностью купим его, потому что он привлечет наше внимание.

Независимо от типа продукта, который вы продаете, у него будет больше шансов на продажу, если он хорошо выглядит. Если подумать, то это логично. Если кто-то собирается использовать или носить продукт, будь то обувь, одежда или программное обеспечение, он захочет, чтобы он хорошо выглядел. Вот почему важно добавлять и оптимизировать изображения, которые вы используете для продвижения своих продуктов, и следить за тем, чтобы то, что вы продаете, выглядело наилучшим образом.

Теперь, когда мы понимаем его важность, давайте посмотрим, как добавить изображение в продукт WooCommerce.

Как добавить изображения к товару в WooCommerce

Есть 2 основных способа добавления изображений к продуктам в WooCommerce:

1. Использование панели инструментов WooCommerce
2. Программно

Давайте посмотрим на оба метода.

1) Добавьте изображения с панели управления WooCommerce.

Добавление изображения к продуктам — довольно простая задача в магазине WooCommerce. Когда вы создаете или редактируете продукт, вы найдете мета-поля изображений на боковой панели. Там вы сможете установить одно избранное изображение и галерею изображений с несколькими изображениями для демонстрации ваших товаров.

Когда вы щелкнете любой из них, откроется модальное окно, и вы сможете загрузить новые файлы изображений или выбрать один из существующих из медиатеки WP.

Если вы добавляете изображения в галерею продуктов, вы можете нажать CTRL + щелчок левой кнопкой мыши, чтобы выбрать несколько изображений и добавить их одним действием.

Кроме того, вы можете добавить изображения из описания содержимого продукта. Просто нажмите кнопку « Добавить медиа » и выберите изображения, которые хотите добавить. Если вы используете этот метод, имейте в виду, что это может повлиять на дизайн всей страницы продукта, поэтому убедитесь, что вы выбрали правильный размер и выравнивание, прежде чем добавлять изображения в текстовом редакторе.

Добавлять изображения с панели управления очень просто. Однако, если у вас есть навыки кодирования, вы также можете добавлять изображения программно, что дает вам больше гибкости. Давайте посмотрим, как это сделать.

2) Как программно добавить изображение к продукту WooCommerce

В некоторых случаях может потребоваться добавить изображения программно. Это дает вам больше гибкости и позволяет включать все, от изображений до отдельных продуктов, изображений функций, галерей и многого другого.

В этом разделе мы покажем вам примеры сценариев, которые помогут вам добавлять изображения к определенным продуктам. Обратите внимание, что вам нужно будет заменить идентификатор продукта и изображения в первых двух строках функции на идентификатор вашего продукта и изображения. В противном случае, если этот продукт и идентификатор изображения не существуют, вы получите сообщение об ошибке.

Также имейте в виду, что скрипты будут работать на одном запуске. Это означает, что вы можете удалить их после запуска.

Наконец, вам нужно вставить следующие скрипты в файл functions.php вашей дочерней темы. Вы можете сделать это, выбрав Внешний вид > Редактор тем. Затем найдите файл functions.php в правом столбце и вставьте код, как показано ниже. Кроме того, вы можете использовать плагин, например Code Snippets.

ПРИМЕЧАНИЕ . Поскольку мы будем редактировать некоторые основные файлы, прежде чем мы начнем, мы рекомендуем сделать резервную копию вашего сайта. Помимо того, что это лучшая практика, всегда полезно иметь последнюю резервную копию на случай, если что-то пойдет не так. Если вы не знакомы с крючками, ознакомьтесь с нашим руководством по крючкам WooCommerce, где вы узнаете о различных типах крючков и о том, как их использовать.

2.1) Добавление избранного изображения к одному продукту

Этот скрипт установит избранное изображение для одного продукта. Для этого вам необходимо указать идентификатор изображения и идентификатор продукта, как показано ниже. Например, в этом случае мы устанавливаем изображение с идентификатором 48 в качестве избранного изображения продукта с идентификатором 195.

 функция QuadLayers_add_featured_image() {

    $идентификатор изображения = 48; // Идентификатор изображения
    $post_id = 195; //Идантификационный номер продукта

    set_post_thumbnail($post_id, $imageID);
    
}

add_action('init', 'QuadLayers_add_featured_image');

Хук init гарантирует, что функция может запускаться везде при каждой загрузке страницы. Кроме того, мы используем set_post_thumbnail() для установки рекомендуемого изображения. Это будет работать как для продуктов, так и для постов.

2.2) Добавление избранного изображения к нескольким продуктам

Точно так же вы можете сделать то же самое с несколькими продуктами, просто добавив их идентификаторы. Этот скрипт добавит изображение с идентификатором 53 к товарам с идентификаторами 32, 33 и 34.

 функция QuadLayers_multiple_featured_image() {

    $Идентификатор изображения = 53; // Идентификатор изображения
    $post_id = массив (32,33,34); //Идентификаторы продуктов

    for ($ii=0; $ii < count($post_id); $ii++) { 
          
           set_post_thumbnail($post_id[$ii], $imageID);      
    }
    
}
add_action('init', 'QuadLayers_multiple_featured_image');

Как видите, это тот же скрипт, что и раньше, но мы помещаем все идентификаторы продуктов в массив. Таким образом, вы можете назначить одно и то же изображение для нескольких товаров одновременно. Это может быть полезно для вариантов продукта, которые не производят эстетических изменений. Например, вы можете использовать одно и то же изображение для вариантов одного и того же мобильного телефона с разным объемом оперативной памяти.

2.3) Добавление изображений в галерею товаров

Добавление изображения в галерею продуктов в WooCommerce немного сложнее, потому что вам нужно использовать две функции. Если вы проверите следующий скрипт, то увидите, что первая функция ( QuadLayers_create_gallery ) подготавливает информацию, необходимую для создания галереи. Это список изображений и идентификатор продукта, в который вы хотите добавить галерею.

С другой стороны, update_post_met() отвечает за создание галереи. Для этого нам нужно использовать ID товара, в который мы хотим добавить галерею и список изображений в виде массива.

 функция QuadLayers_create_gallery(){ 
        $imgs_ids=массив(48,53,47); //идентификаторы изображений
        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 > Настройки > Продукты .

Если вы хотите установить изображение по умолчанию программно, используйте следующий фрагмент кода.

 add_filter('QuadLayers_default_image', 'custom_woocommerce_placeholder_img_src');

функция QuadLayers_default_image($src) {
	$upload_dir = wp_upload_dir();
	$uploads = untailingslashit( $upload_dir['baseurl'] );
	// замените путь к вашему изображению
	$src = $загрузки. '/2021/07/album-1.jpg';
	 
	вернуть $ источник;
}

Это присвоит изображение по умолчанию всем продуктам без рекомендуемого изображения. В этом случае мы используем путь к изображению вместо идентификатора, поэтому не забудьте заменить его правильным путем к вашему изображению.

Чтобы получить путь, просто зайдите в Медиатеку , найдите изображение, которое хотите использовать, скопируйте 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'); 
// Это удалит средний размер изображения по умолчанию. 
функция prefix_remove_default_images ($ размеры) { 
не установлен ( $ размеры ['средний']); // 300 пикселей 
вернуть $размеры;
}

Чтобы удалить любые другие размеры, добавьте еще одну строку с размером, который вы хотите удалить. Например, если вы также хотите удалить большой размер, код будет таким:

 add_filter('intermediate_image_sizes_advanced', 'prefix_remove_default_images'); 
// Это удалит средние и большие размеры изображения по умолчанию. 
функция prefix_remove_default_images ($ размеры) { 
не установлен ( $ размеры ['средний']); // 300 пикселей
не установлен ( $ размеры ['большой']); // 1024px 
вернуть $размеры;
}

Вот и все! Вот как вы можете легко удалить размеры изображения. Чтобы узнать больше об этом, ознакомьтесь с нашим пошаговым руководством.

Вывод

Таким образом, изображения необходимы, когда речь идет о продаже вашей продукции. Товар с привлекательной картинкой имеет больше шансов привлечь внимание покупателей и увеличить продажи в вашем магазине.

В этом руководстве мы рассмотрели 2 разных метода добавления изображения в продукт WooCommerce:

• Из панели управления WooCommerce
• Программно

Теперь, какой из них больше подходит для вас? Добавить изображение с панели управления довольно просто, так что это хороший вариант. Однако, если у вас есть навыки кодирования и вы хотите большей гибкости, вы также можете добавлять изображения программно. Мы показали вам несколько скриптов, которые помогут вам легко добавлять изображения, избранные изображения и галереи к вашим продуктам.

Наконец, мы также увидели, как добавлять изображения нестандартного размера и удалять размеры изображений по умолчанию на вашем сайте, чтобы вы могли настроить свой сайт и сделать свои продукты более привлекательными. Для получения дополнительной информации о том, как максимально эффективно использовать страницы продуктов, ознакомьтесь с нашим руководством по настройке страницы продукта.

Вы добавили изображения к своим продуктам? Какой метод вы использовали? Дайте нам знать в комментариях ниже!

Дополнительные руководства по настройке магазина см. в следующих сообщениях:

• Как настроить страницу магазина в WooCommerce
• Руководство: Как программно отредактировать страницу благодарности WooCommerce
• Полное руководство по оптимизации касс