Ваш путь: Главная » WooCommerce и WordPress » текущая страница
возможно заказать разработку или сопровождение, услуги вашего сайта/блога

написано: — 
отредактировано: 2020-12-20
издатель: в теме: WooCommerce и WordPress пост видели: 81
Запросто с WordPress — создание сайтов ATs media

Как настроить размеры изображений товаров в магазине 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

 

 

 

к оглавлению

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

 

 

 

 

 

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

 

 

 

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

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

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

 

 

 

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

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

 

 

 

 

к оглавлению

woocommerce_thumbnail

 

 

 

 

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

 

 

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

 

 

 

woocommerce_thumbnail

 

 

 

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

 

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

 

 

woocommerce_thumbnail

 

 

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

 

 

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

 

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

 

 

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

 

 

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

 

 

 

 

интересно почитать по теме:

Добавляем краткое описание (Description) к товару…

Наиболее полная подборка, пояснения Условные теги woocommerce

Подборка полезного кода (сниппеты) для работы магазина на WooCommerce…

Woocommerce шорткоды и их применение…

Настройка, использование и удаление виджетов WooCommerce из админки.

Как отключить проверку уровня сложности пароля woocommerce (форма регистрации).

Отключаем подгрузку стилей, скрипов для страниц, не относящихся к Wooсommerce

 

 

 

 

к оглавлению

woocommerce_single

 

 

 

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

 

 

 

woocommerce_single

 

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 

к оглавлению

 

 

 

 

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

 

 

 

woocommerce_gallery_thumbnail

 

 

 

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

 

 

 

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

 

 

 

 

к оглавлению

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

 

 

 

 

Если мы решаем работать со своими настройками размеров изображений, то есть определяем и фиксируем кастомные… Опции в интерфейсе настроек Внешний вид/Настроить/WooCommerce… и это естественно, будут недоступны (во всяком случае в последних версиях плагина woocommerce)!

 

При всём при том, опция настроек обрезки миниатюры останется на месте.

 

 

 

Зафиксировать нужные для магазина свои размеры изображений возможно в файлах активного шаблона (либо плагина) при помощи функции 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.

 

 

 

Это событие отрабатывает после полной загрузки WordPress, ОДНАКО, до того, как будут отправлены любые header заголовки.

 

 

 

 

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' );
}

 

 

 

Если у вас уже какое-то время магазин работал, т.е. использовались изображения с прежними настройками, то, возможно, для перезаписи картинок весьма пригодится плагин типа Force Regenerate Thumbnails.

 

 

 

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

 

 

 

к оглавлению

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

 

 

 

 

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

 

 

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

 

 

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

 

 

 

Турбо Страницы Яндекса (на канале — видео о том, как удалить эти Турбо страницы из индекса Я.

 

 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...




Нажатия на кнопочки определяют Ваше высокое гражданское сознание
Удачи в работе и творчестве..!
Статьи по теме:


Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©