Как настроить размеры изображений товаров в магазине WooCommerce

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

 

По теме ниже в подробностях и по шагам изучим, каким же образом настраиваются и работают опции подстройки размеров изображений – в каталоге товаров, в конкретной карточке товара, миниатюры…

функции: woocommerce_thumbnail, woocommerce_singl и woocommerce_gallery_thumbnail.

 

А также, при желании, определим нужные нам размеры изображений в файлах шаблона используя функциею цщщс add_theme_support():

 

 

 

 

 

Настройка размеров изображений в WooCommerce

 

 

 

 

Я иногда переделываю прежние правки вебмастеров для некоторых магазинов заказчиков. Дело в том, что, настраивая магазин, некоторые нерадивые вебмастера не морочатся настройками самого Wooc, а правят размеры изображений прямо в css файле значениями свойств: width: *px; height: *px, и частенько прямо в базовом шаблоне – не используя дочернюю тему. Когда и как правильно создавать дочернюю тему шаблона
большинство пользователей достаточно невнимательно относятся к вопросу создания дочерней темы (и напрасно!!), а по истечению времени приходится здорово перенастраивать сайт…

 

Так делать (не задумываясь о последствиях) ни в коем случае нельзя!

 

 

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

 

К тому же, если у вас более-менее современная тема, то в этом шаблоне будут присутствовать опции настроек изображений для страниц WooCommerce.

 

 

 

 

 

 

 

размеры изображений в WooCommerce

 

 

 

 

Для того, чтобы определиться с размерами изображений в своем магазине, нужно, как говорится, перепробовать имеющиеся варианты – для начала пройдём по такому пути левого вертикального меню: Внешний вид/Настроить/WooCommerce...

 

 

 

 

 

далее: Изображения товара:

 

 

 

 

 

функционал размеров изображений в WooCommerce

 

 

 

 

 

В WooCommerce по умолчанию регистрируется три таких рекомендательных единицы изображений:

 

 

 

woocommerce_thumbnail – работает карточки товаров в каталоге;

woocommerce_single – страницы товара;

woocommerce_gallery_thumbnail – миниатюры для галереи товаров (на странице товара)…

 

 

 

Ну, и как я говорил выше, разработчики шаблонов не всегда соблюдают эти рекомендации (всё это не говорит о том, что это плохая тема! однако, это нужно иметь в виду)!

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

 

 

 

 

woocommerce_thumbnail

 

 

 

 

Определяемый функцией размер требуется для обработки отображения картинок товаров в каталогах (категориях).

 

 

Настройки этих размеров изображений находятся по этому пути: Внешний вид/Настроить/WooCommerce/Изображения товаров. Раздел Ширина миниатюры.

 

 

 

 

 

 

Думаю, вряд ли имеет смысл описывать варианты опций “Обрезка изображений” подробно, однако, вам стоит протестировать каждую из них лично… и определиться.

 

Карточки в каталоге товаров выглядят примерно так: (если нажать на картинку, то можно перейти и посмотреть, как это выглядит в реале).

 

 

 

 

По умолчанию настройки такие: ширина 600px, обрезка 1:1.

 

 

В файлах шаблона используем $product->get_image() – это автоматом подтягивает именно описанный выше размер, хотя, возможно (но нежелательно) в вызове картинки запросить параметр другого размера: $product->get_image( 'large' ) – large – БОЛЬШОЙ.

 

Однако вряд ли имеет смысл подтягивать большое изображение, которое автоматически (WP) будет уменьшаться и встраиваться на страницу миниатюрой: всё это крадёт ресурсы и время загрузки страницы.

 

 

Однако, если мы строим некий уникальный сайт-магазин, то, конечно, возможно целиком и полностью поступать по своему смотрению… вплоть до отключения woocommerce_thumbnail и использования своего размера.

 

 

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

 

 

 

 

 

 

 

woocommerce_single

 

 

 

Настройки осуществляются по аналогичному пути показанному выше: Внешний вид/Настроить/WooCommerce/Изображения товаров.

 

 

 

 

 

 

Этот woocommerce_single размер картинки используется на странице конкретного товара.

 

 

Важно: пропорции изображения сохраняются – если картинка имела вертикальную форму, то она такой и останется!

 

 

По умолчанию ширина равна 600px.

 

 

Функцией wc_get_gallery_image_html() подтягиваем именно это изображение. Советую проверять в файлах шаблона функции подключения картинок! иначе регулировка настроек, данных выше, ни к чему не приведёт (пояснения ниже).

 

 

 

woocommerce_gallery_thumbnail

 

 

 

 

Размер миниатюр, которые будут отображены в галерее изображений товара на странице конкретного товара.

 

 

 

 

 

 

По умолчанию размер картинок миниатюр равен 100х100. Тонких настроек опций именно этих миниатюр в WooC нет.

 

 

 

Если вы протестировали опции настроек размеров изображений wooc по умолчанию и вас ни одно из них не устраивает, то в этом случае весьма целесообразно поступать так:

 

 

 

 

определим нужные нам размеры изображений в файлах шаблона функцией add_theme_support()

 

 

 

 

 

 

 

Зафиксировать нужные для магазина свои размеры изображений возможно в файлах активного шаблона (либо плагина) при помощи функции add_theme_support(). В старых – ранее 3.3.0 – версиях WooCommerce это работать не будет!

 

 

 

add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 550,         //изображение товара
'gallery_thumbnail_image_width' => 150, // миниатюра галереи
'single_image_width' => 800,            // максимальный размер
) );

 

 

 

как изменить размер изображений в woocommerce при помощи хуков

 

 

 

 

Изменяем размеры при помощи хука, в котором указываем необходимый префикс: woocommerce_get_image_size_(image_size /префикс/)

 

 

Возможное использование для изменений: thumbnail, single, gallery_thumbnail.

 

 

Например изменим или определим (кому как угодно) размер _single:

 

 

add_filter( 'woocommerce_get_image_size_single', 'ats_wooc_single_image_size' ); // используем префикс_single

function ats_wooc_single_image_size( $size ) {

return array(
'width' => 550,  // ширина изображения
'height' => 350, // высота изображения
'crop' => 0,     // 0 – сохраням пропорции; 1 – жёсткая обрезка
);

// return $size;
}

 

 

 

При использование данной функции настройки размеров в админке останутся, однако – будут игнорироваться!

 

 

Сама функция WC находится по такому пути ядра плагина: woocommerce/includes/wc-core-functions.php

 

 

 

если в магазине используются стандартные шаблоны страниц WooCommerce

 

 

 

woocommerce_gallery_thumbnail_size – размер миниатюр в галерее (страница товара) – по умолчанию, как и говорилось выше array( 100, 100 );

woocommerce_gallery_image_size – изображение товара на конкретной странице товара – по умолчанию woocommerce_single;

single_product_archive_thumbnail_size – размер изображений товаров в каталоге – по умолчанию woocommerce_thumbnail;

subcategory_archive_thumbnail_size – размер изображений категорий товаров (в каталоге) – по умолчанию woocommerce_thumbnail;

woocommerce_gallery_full_size – если просматриваем изображения товара в полном размере (при клике по значку +) – по умолчанию, что логично full.

 

 

В качестве примера настроим так, чтобы в каталоге использовались стандартный размер Вордпресс – thumbnail.

 

 

add_filter( 'single_product_archive_thumbnail_size', 'ats_catscats_size' );
function ats_catscats_size( $size ) {
return 'thumbnail';
}

 

 

 

как отключить опции размеров изображений WooCommerce

 

 

 

Отключаем размеры изображений (по умолчанию) WooCommerce примерно таким образом.

 

Фильтр настраиваем с хуком-событием init.

 

 

 

 

 

 

 

add_action( 'init', 'remove_wooc_image_sizes_ats' );
function remove_wooc_image_sizes_ats() {
// для woocommerce_single
remove_image_size( 'woocommerce_single' );
// для woocommerce_thumbnail
remove_image_size( 'woocommerce_thumbnail' );
// для woocommerce_gallery_thumbnail
remove_image_size( 'woocommerce_gallery_thumbnail' );
}

 

 

 

 

 

 

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

 

 

 

стандартные размеры изображений WordPress

 

 

 

 

Для тех, которые хотят подробнее изучить вопрос о функционале мидиафайлов WP рекомендую прочесть этот пост какой размер картинок рекомендуется загружать на сайт WordPress – и полезный плагин media-Cleaner

 

 

Размеры изображений в Вордпресс можно настроить пройдя по такому нехитрому пути: Настройки/Медиафайлы.

 

 

 

 

 

Я, к примеру, всегда задаю размеры так, как показано на скрине выше.

 

а) миниатюры 150х150 требуется в админке (обязательное значение), когда мы просматриваем раздел медиафайлы – картинки наглядны.

 

б) средний размер ставлю 0.

 

с) крупный размер 0.

 

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