Меню

Как настроить миниатюры woocommerce



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

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

Содержимое:

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

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

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

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

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

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

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

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

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

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

Немного пояснений для кода. Здесь на самом деле 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 в итоге могут получиться фотки еще более слабого качества.

Читайте также:  Как настроить обогреватель garanterm

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

add_filter( ‘jpeg_quality’, ‘my_filter_img’ ); function my_filter_img( $quality )

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Настройки Товары WooCommerce, урок 11

Вводная часть

В прошлом уроке (общая настройка WooCommerce) мы начали подробно настраивать плагин интернет магазина WooCommerce. Здесь настроим пункт «Товары», который отвечает за показ, измерение, учет и складирование товаров.

Подробно настройки товары WooCommerce

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

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

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

Хотя настройки Товары это скорее технический пункт настроек, выставить все параметры нужно правильно.

Четыре подпункта настроек товаров WooCommerce

Настройка товары, несложный пункт настроек, который имеет четыре подпункта: Основные | Отображение | Запасы | Скачиваемые товары.

Читайте также:  Как настроить мас адрес маршрутизатора

Настройки Товара | Основные

Единица измерения веса: указываем килограмм или грамм;

Единица измерения габаритов: указываем сантиметр или метр или миллиметр.

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

Для фильтрации негативных и конкурентных отзывов, есть пункт фильтрации отзывов от проверенных пользователей.

Настройки-Товара | Отображение

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

В настройках предусмотрено четыре варианта главной страницы магазина:

  • Витрина;
  • Корзина;
  • Мой аккаунт (в смысле покупателя);
  • Оформление заказа.

Практика показывает, что большинство интернет магазинов начинаются с витрины. Её и выбираем.

Примечание: Не нужно нагружать главную страницу (витрину) магазина всем, чем только можно. Сделаем её минимальной, информативной, с количеством ссылок не более 99 штук.

Пункт: Страница Магазина: В одном из прошлых уроков, мы готовили плагин WooCommerce к работе и создали отдельную страницу магазина, на вкладке Страницы>>>Добавить новую, назвав её Витрина.

В пункте настроек Страница Магазина выбираем страницу магазина «Витрина» из слайдера.

Пункты: На странице магазина и На странице категории нужно установить, что мы хотим показывать на витрине магазина и в разделе категорий товаров.

Пункт: На странице магазина. Здесь указываем, что именно показывать на витрине магазина. Можно показать товары, можно категории товара или товар с категориями.

Устанавливаю: Для снижения нагрузки на сервер устанавливаю Товар. То есть, получим стандартную витрину магазина с картинками товаров расположенные рядами с описаниями (если их создать). Если товаров очень много, и много категорий товаров ставим Категории.

На странице категории: Аналогично, задаем, что показывать на странице категорий товаров: Подкатегории, Товары или Подкатегории с товарами.

Устанавливаю: Подкатегории с товарами.

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

Выбранная сортировка распространиться на витрину и категории товаров.

Устанавливаю: По умолчанию, то есть товар будет показан произвольно или по алфавиту.

Пункт: Добавить в поведение корзины. Этим пунктом настроек мы задаем поведение магазина при добавлении товара в корзину. Можно сразу перенаправить покупателя в корзину (не делаем), можно включить для Ajax кнопку добавления в корзину в архивах (что делаем).

Группа настроек Изображение товаров

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

  • Изображение товара это картинка товара в категориях (витрине);
  • Изображение единичного товара это картинка на карточке товара;
  • Миниатюра это ряды товаров в галереях.

Решение вопроса об использовании lightbox (модальное окно для картинки) остается за вами. Но лучше включить, это активирует lightbox WooCommerce и не потребует установки дополнительных плагинов.

Настройки Товары | Запасы

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

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

Здесь же есть пункт настроек о показе запасов (остатков) покупателям. Пункт Видимость закончившихся товаров.

Настройки Товар| Скачиваемые товары

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

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

Читайте также:  Наручный смарт браслет jet kid connect как настроить

Источник

Размеры Изображений для Разработчиков Тем Woocommerce

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

Переменные регистрируемые WordPress`ом (задаются во вкладке Настройки -> Медиафайлы):

  • thumbnail — Размеры миниатюр
  • medium — Средний размер
  • large — Крупный размер

Переменные, регистрируемые WooCommerce`ом:

  • woocommerce_thumbnail — используются там, где продукты выводятся сеткой, например, на странице категории
  • woocommerce_single — используется на странице продукта
  • woocommerce_gallery_thumbnail — для миниатюр в галерее на странице продукта

woocommerce_single полноразмерное изображение продукта, как он был загружен, всегда необрезанное по-умолчанию. Стандартно это 600px по ширине.

woocommerce_gallery_thumbnail — всегда обрезано 1:1, то есть квадратное изображение. По-умолчанию это 100х100px. Используется как пиктограммы для навигации в галерее.

woocommerce_thumbnail — Обрезанное квадратное изображение, по-умолчанию 600px. Пропорции для обрезки настраиваются владельцем магазина.

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

Задать размер изображения в functions.php

Начиная с WooCommerce 3.3.0, тема может задать размеры изображений при объявлении поддержки WooCommerce. Обычно это делают в файле темы functions.php .

Когда вызывается функция, ожидающая в качестве аргумента размер изображения, (например, wp_get_attachment_image_src( int $attachment_id, string|array $size = ‘thumbnail’, bool $icon = false ) ), можно использовать имена размеров изображений:

  • woocommerce_thumbnail
  • woocommerce_single
  • woocommerce_gallery_thumbnail

Можно при этом контролировать пропорции и обрезку (Об этом далее).

Задать размер изображения в настройках темы

Можно указать размер изображений и пропорции в админке, на вкладке настроек темы:

Если настройки изображений заданы через functions.php, то на этой странице можно задать только пропорции.

Когда меняются настройки пропорций или ширина, справа обновляется предпросмотр. Эти изменения применяются после нажатия кнопки «Опубликовать» и запуска функции «Regenerate Thumbnails», которая стала частью WooCommerce начиная с версии 3.3.0 (Ранее надо быть ставить дополнительный плагин).

Тут есть три варианта обрезки:

  • 1:1 (квадрат)
  • Настраиваемый
  • Не обрезать (Сохраняет пропорции изображения)

Изменить изображение через Хуки

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

Для получения размеров изображений WooCommerce использует функцию wc_get_image_size().

Возвращаемое ею значение проходит через фильтр woocommerce_get_image_size_

Можно передать в этот хук массив с размерами, например такой:

Например, если хотите изменить миниатюру в галерее (gallery thumbnails) на 150х150px без обрезки, нужно добавить следующий код:

Этот метод не рекомендуется использовать, потому что он переопределяет настройки, заданные владельцем сайта.

Список Хуков, меняющих размеры изображений

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

Фильтр Где используется Значение по-умолчанию
single_product_archive_thumbnail_size Изображение продукта в каталоге woocommerce_thumbnail
subcategory_archive_thumbnail_size Изображение подкатегории в каталоге woocommerce_thumbnail
woocommerce_gallery_thumbnail_size Миниатюры в галерее woocommerce_gallery_thumbnail
woocommerce_gallery_image_size Изображение в галерее на странице продукта woocommerce_single
woocommerce_gallery_full_size Используется для зума изображений в карточке товара full

full — размер зарегистрированный в WordPress (Настройки -> Медиафайлы)

Для примера, изменим миниатюры в галерее используя размер thumbnail , зарегистрированный в wordpress место woocommerce_gallery_thumbnail :

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

Создать свой размер изображения

Однако можно создать и использовать свои размеры изображений с помощью функции add_image_size( $name, $width, $height, $crop ) . Допустим, нам нужно вывести в корзине миниатюры особого размера — 60 х 60 px, который больше нигде не встречается на сайте.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *