Вывести изображение категории woocommerce

Отображение категорий, подкатегорий и продуктов WooCommerce в отдельных списках

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

WooCommerce дает вам несколько вариантов того, что вы можете отображать на своих страницах коллекций:

• продукты
• категории (на главной странице магазина) или подкатегории (на страницах категорий)
• как продуктов, так и категорий.

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

Тем не менее, есть одна причина отказаться от этого подхода: он отображает категории/подкатегории вместе, без разделения между ними. Это означает, что если ваши изображения продукта имеют разные размеры , макет может выглядеть немного грязным. Даже если ваши изображения имеют одинаковый размер, если одна из строк на странице коллекции включает в себя как категории, так и продукты, отсутствие кнопки «Добавить в корзину» для категорий делает эту строку неопрятной, поскольку не все ее элементы имеют одинаковые размеры.

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

Чтобы сделать это, мы выполним четыре шага:

1. Определите код, используемый WooCommerce для вывода категорий и подкатегорий на странице коллекции.
2. Создайте плагин для нашего кода.
3. Напишите функцию для размещения категорий или подкатегорий перед списками продуктов.
4. Стиль вывода.

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

Что вам понадобится

Чтобы двигаться дальше, вам понадобятся:

• Установка WordPress для разработки.
• Редактор кода.
• Установка и активация WooCommerce.
• Добавленные продукты: я импортировал данные фиктивного продукта, которые поставляются с WooCommerce; для получения подробной информации о том, как это сделать, см. это руководство.
• Активная совместимая с WooCommerce тема — я использую Storefront.

Перед началом работы: параметры по умолчанию

Давайте посмотрим, что WooCommerce дает нам по умолчанию.

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

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

Если вы еще этого не сделали, перейдите в WooCommerce > Settings, выберите вкладку Products, а затем выберите опцию Display. Для каждого из параметров Shop Page Display и Default Category Display выберите Show both:

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

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

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

Идентификация кода WooCommerce использующего выходные категории и продукты в коллекции

Первый шаг — определить, как WooCommerce выводит категории и подкатегории. Итак, давайте углубиться в исходный код WooCommerce, чтобы найти соответствующую функцию.

Файл WooCommerce использует для отображения страниц коллекций archive-product.php , который находится в папке templates .

Внутри этого файла вы можете найти код, который выводит категории и продукты:

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

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

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

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

Итак, давайте создадим плагин, который сделает это.

Создание плагина

Создайте в вашем каталоге wp-content/plugins новую папку и дайте ей уникальное имя. Я называю tutsplus-separate-products-categories-in-archives . Внутри создайте новый файл, также с уникальным именем. Я использую то же имя: tutsplus-separate-products-categories-in-archives.php .

Откройте файл и добавьте к нему этот код:

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

Написание нашей функции

Теперь давайте напишем функцию. Но прежде чем начать, отключите списки категорий на экранах администратора. Перейдите в WooCommerce > Settings, выберите вкладку Products, а затем выберите параметр Display. Для каждого из Shop Page Display и Default Category Display выберите Show products. Сохраните изменения.

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

В своем файле плагина добавьте следующее:

Теперь добавьте этот код внутри функции:

Давайте посмотрим, что делает эта функция:

• Она идентифицирует текущий запрошенный объект и определяет его id как $parentid .
• Она использует get_terms() для определения условий с текущим запрошенным элементом в качестве родителя. Если это главная страница магазина, она вернет категории верхнего уровня; если это коллекция категории, она вернет подкатегории.
• Затем она проверяет наличие каких-либо условий, прежде чем открывать цикл foreach и элемент ul .
• Для каждого условия она создает элемент li , а затем выводит изображение категории с помощью woocommerce_subcatgeory_thumbnail() , за которым следует название категории в ссылке на ее коллекцию.

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

Отображаются категории, но им нужен стиль. Давайте следующим сделаем это.

Стилизация списков категорий

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

В своей папке плагина создайте папку css и внутри нее создайте файл с именем style.css .

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

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

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

Я скопировал точные ширины и отступы из стиля, используемого WooCommerce.

Теперь проверьте свою главную страницу магазина. Вот моя:

Вот коллекция категории Music:

И вот как это выглядит на маленьких экранах:

Резюме

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

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

Если вы в настоящее время запускаете магазин, который хотите расширить, или вы ищете дополнительные плагины для изучения, связанные с WooCommerce, не стесняйтесь посмотреть, какие плагины доступны на Envato Market.

Источник

WooCommerce. Как изменить/добавить изображения категорий товаров

Октябрь 13, 2015

Из этого туториала Вы узнаете, как изменить/добавить изображения категорий товаров в шаблонах WooCommerce.

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

Для того чтобы добавить/изменить изображение категории, следуйте таким инструкциям:

В вашей админ панели WordPress перейдите на вкладку Товары -> Категории (Products -> Categories) и откройте нужную категорию.

Возле настройки Миниатюра ( Thumbnail ) нажмите на кнопку Загрузить/добавить изображение (Upload/Add image), выберите изображение из Библиотеки медиафайлов или найдите и загрузите изображение с вашего компьютера и нажмите на кнопку Использовать изображение (Use Image):

Не забудьте Обновить ( Update ) категорию, для того чтобы сохранить внесённые изменения:

Для того чтобы отобразить изображение категории на странице категории товаров, Вы можете установить дополнительное расширение, например, Плагин «Баннер категории WooCommerce» (WooCommerce Category Banner) , или использовать дополнительный код, который Вы найдёте в следующей записи.

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

В таком случае с помощью хука 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 товаров, пишите ниже.

Источник