Май
14
11

Изображения товаров в WooCommerce — настройка размеров, исправляем размытие, сниппеты

Изображения в WooCommerce

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

Содержимое:

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

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

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

Здесь задается:

  • Ширина основной картинки для единичной страницы товара.
  • Ширина миниатюры в каталоге.
  • Опции для формирования картинки-превью: создания квадратных миниатюр с пропорцией 1:1, обрезка до указанных пропорций, отображение изображений в их исходных пропорциях.

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

Внимание! Если у вас старая версия WooCommerce-плагина, то там все опции задавались в меню «Настройки» — «Товары» — «Отображение». Выглядело это следующим образом:

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

На странице были такие параметры как:

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

Размер миниатюр в категориях и не только

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

миниатюры в категориях

Решение было найдено на stackoverflow тут. Вам надо добавить в файл функций такую конструкцию:

add_image_size( 'category_thumb', 500, 100,1 );
add_image_size( 'product_thumb', 300, 390,1 );
 
function woocommerce_subcategory_thumbnail( $category ) {
    $small_thumbnail_size       = 'category_thumb';
    $thumbnail_id           = get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true );
 
    if ( $thumbnail_id ) {
            $image        = wp_get_attachment_image_src( $thumbnail_id, $small_thumbnail_size );
            $image        = $image[0];
            $image_srcset = function_exists( 'wp_get_attachment_image_srcset' ) ? wp_get_attachment_image_srcset( $thumbnail_id, $small_thumbnail_size ) : false;
            $image_sizes  = function_exists( 'wp_get_attachment_image_sizes' ) ? wp_get_attachment_image_sizes( $thumbnail_id, $small_thumbnail_size ) : false;
    } else {
            $image        = wc_placeholder_img_src();
            $image_srcset = $image_sizes = false;
    }
 
    if ( $image ) {
            // Prevent esc_url from breaking spaces in urls for image embeds
            // Ref: https://core.trac.wordpress.org/ticket/23605
            $image = str_replace( ' ', '%20', $image );
 
            // Add responsive image markup if available
            if ( $image_srcset && $image_sizes ) {
                    echo '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" srcset="' . esc_attr( $image_srcset ) . '" sizes="' . esc_attr( $image_sizes ) . '" />';
            } else {
                    echo '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" />';
            }
    }
}
 
function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $deprecated1 = 0, $deprecated2 = 0 ) 
{
      global $product;
//        $image_size = apply_filters( 'single_product_archive_thumbnail_size', $size );
    return $product ? $product->get_image( 'product_thumb' ) : '';
}

Немного пояснений для кода. Здесь на самом деле 2 функции:

  • woocommerce_subcategory_thumbnail – используется для превью категорий.
  • woocommerce_get_product_thumbnail – применяется к изображениям товаров.

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

Также в самом начале кода используется функция добавления новых размеров на сайт add_image_size, с помощью которых вы и задаете значения ширины и высоты для категорий category_thumb. Разумеется, после добавления сниппета в functions.php вам надо будет пересоздать все миниатюры с помощью модуля Regenerate Thumbnails.

Исправляем размытие изображений в каталоге

Проблемы с картинками в данном модуле могут появляться в разных случаях:

  1. Использование изображений плохого качества.
  2. Слишком сильное сжатие превью при от WordPress. По умолчанию это значение = 90%.
  3. Несоответствие размеров превью нужным значением в шаблоне.

1. Правильный размер и качество изображений для онлайна

Первая возможная причина некачественных фоток — когда люди загружают на сайт файлы недостаточного размера. Проблема часто встречается у новичков, которые пытаются использовать, например, картинки 200х200 пикселей, хотя в дизайне требования куда больше. Разработчики WooCommerce говорят, что оптимальными и точно работающими являются значения от 800х800px (ну, или сейчас, по умолчанию ставят 600х600px).

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

  • для ярких цветных фотографий в Web’е рекомендуется брать формат JPG/JPEG, а не PNG;
  • сохраняйте их с уровнем качества 60-80 (у меня очень многие на 60-ти отлично смотрятся) + выбирайте формат Progressive JPEG;
  • потом еще можно сделать дополнительное сжатие через сервисы TinyPNG и TinyJPG.

Внимание! Если вы вручную делаете оптимизацию графики, то обязательно обратите внимание на следующий пункт №2.

2. Убираем WordPress-сжатие

Спасибо Yaroslav.CH за подсказку в комментариях. Действительно, если добавлять на сайт уже оптимизированные картинки, то с дополнительным сжатием от движка WordPress в итоге могут получиться фотки еще более слабого качества.

В таком случае с помощью хука jpeg_quality вы можете увеличить базовое значение сжатия до максимальных 100%:

add_filter( 'jpeg_quality', 'my_filter_img' );
function my_filter_img( $quality ) {  
	return 100;
}

3. Несоответствие размеров миниатюр шаблону сайта

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

Первым делом визуально определяем, где именно на сайте возникает проблема с четкостью отображения графики. Кликаем правой кнопкой мышки по картинке и вызываем инструмент «Инспектор» (есть в любом браузере). Далее смотрим заданный в теме WooCommerce размер изображения товара:

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

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

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

Кстати, «Инспектор» при наведении на фотки показывает их высоту и ширину в шаблоне и рядом реальный размер (Natural). В этом примере сразу заметно, что нужна графика большего разрешения.

Чтобы исправить ситуацию вам нужно:

  1. Посмотреть на сайте и запомнить (а лучше записать) значения шаблона для изображений категорий WooCommerce, товаров в каталоге, единичных и миниатюр (либо только те, где есть размытие).
  2. Далее переходим в раздел «Настройки» — «Товары» — «Отображение» и меняем параметры картинок на записанные выше. Внимание, при желании вы можете поставить цифры чуть больше, но никак не меньше!
  3. Заново генерируем миниатюры — используется модуль Regenerate Thumbnails. Устанавливаете и запускаете обновление всей графики в пункте меню «Инструменты»:

Regenerate Thumbnails - генерируем новые миниатюры

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

После завершения проверяете отображение картинок на сайте и смотрите пропало ли размытие.

Интересный плагин

Когда мне попался данный глюк, я дважды исправлял все настройки и пытался изменить размеры картинки товара в WooCommerce на подходящие (и даже бОльшие). Однако клиент все равно продолжал твердить о наличии проблемы.

Чуть позже с удивлением откопал плагин Sharpen Resized Images, который позволяет сделать фотки в системе WP более четкими. Просто посмотрите на эти примеры до и после загрузки:

Модуль Sharpen Resized Images

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 22, средний балл: 5,45 из 7)
Загрузка...

категория Категории: WooCommerce;
теги Теги: , , , , , .

комментариев 11 к статье “Изображения товаров в WooCommerce — настройка размеров, исправляем размытие, сниппеты”

  • Андрей   21.09.2017

    Результаты работы плагина выглядят отлично! Спасибо за информацию

  • Yaroslav.CH   21.09.2017

    Фишка в том, что WP по-умолчанию жмет заливаемые jpeg до 80%. То есть, сначала ты его оптимизировал до 60-80%, а потом WP его еще раз оптимизировал до 80%. Обычно это незаметно, но к фоткам товаров, понятное дело, присматриваются намного внимательнее, чем к фотографиям и баг вылезает. Есть хук jpeg_quality, которым можно эту проблему устранить.

  • Tod   21.09.2017

    Yaroslav.CH, хмм. я тестировал фотки товаров «PNG» VS «jpeg 80» VS «jpeg 60» — на выходе отличие были весьма слабо заметными, я бы даже сказал результат одинаковый, но местами разные оттенки цвета. Надо будет еще jpeg 100% залить глянуть.
    За хук jpeg_quality спс надо будет оценить. Чувствую через недели 2-3 буду дописывать пост новыми подробностями)

  • Yaroslav.CH   21.09.2017

    Tod, не, фотки товаров в png как бы и незачем делать, jpg более чем достаточно. Вообще я обычно подбираю оптимизацию чисто на глаз: смотрю несколько фоток с разными цветами, на разных фонах, на нескольких мониторах. Если цвета нормальные и качество не мылит — так и будем лить. А вес фотки… честно говоря, я особого внимания на это не обращаю. Для магазина намного важнее баланс между скоростью загрузки и качеством изображения товара, а вес — килобайтом больше, килобайтом меньше…

  • Tod   21.09.2017

    Yaroslav.CH, я понял. Если честно, раньше вообще не думал про какие-то размытия — они мне просто не встречались, заливал сразу фотки в магазин и все было нормально. А в этот раз, видимо, у заказчика плохие по качеству изображения товаров: половина смотрится норм, а вторая содержит слабочитаемые мелкие названия и размытые края объектов.

  • Yaroslav.CH   21.09.2017

    Tod, а я ровно так же с этой ситуацией столкнулся — делал шоп и выяснилось, что текст на фотках почему-то очень сильно бьется :) Ну и стал ковырять.

  • Yaroslav.CH   21.09.2017

    З.Ы. Похоже, у тебя сломалась опция «Получать новые комментари на e-mail». Как минимум, мне ни одно письмо ни на один комментарий не пришло :(

  • Tod   22.09.2017

    Yaroslav.CH, спасибо за инфу, буду разбираться с рассылкой комментариев. Такой вопрос — а где-то недели 2-3, месяц назад или позже все работало?

  • Tod   22.09.2017

    Yaroslav.CH, единственное, что приходит в голову — письма идут в спам. Проверял на почте Яндекса, вроде работает (сначала шло в спам тоже, потом подправил).

  • Yaroslav.CH   22.09.2017

    Tod, да, некоторое время назад (посмотри даты последних моих комментариев) — работало. Иногда валилось в спам, но можно было достать. А теперь вообще мертво. Хз, может это только у меня так.

  • Ilya   18.05.2020

    Добрый день! А подскажите пожалуйста, можно ли как-то настроить отображение товаров в каталоге, грубо говоря, название одного товара занимает одну строку, а другого две строки, и в итоге кнопка «добавить в корзину» у второго товара располагается ниже. Проще говоря, мне нужно, что в каталоге все было «под линеечку», ничего не съезжало вниз.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости