Woocommerce как настроить отображение товаров

Обзор настроек товаров в WooCommerce

Сразу за вкладкой Основные настройки находится вкладка Товары. Этот раздел начинается сразу с двух настроек, которыми являются:

1. Настройки товаров
2. Запасы

Настройки товаров

В этом разделе расположены следующие параметры:

• Отображение товаров
• Данные товара
• Размеры изображений
• Загружаемые товары

Отображение товаров

1. Страница магазина

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

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

2. На странице магазина

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

Показывать товары

При выборе этого параметра на странице магазина будут отображаться все товары. На рисунке ниже показано, что отображаются только товары, такие как Flying Ninja, Happy Ninja и т.д.

Показывать подкатегории

Рисунок ниже показывает, что если мы выберем этот параметр, то будут отображаться только категории. В этом случае вы можете увидеть подкатегории «Одежда», «Музыка» и «Плакаты».

Показать оба варианта

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

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

3. На странице категории

Допустим, вы продаете одежду и она имеет подкатегории «Толстовки» и «Футболки». Тогда вы можете показывать только товары или только подкатегории, либо показать оба варианта.

Показывать товары

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

Показывать подкатегории

Если вы выберете этот вариант, то при переходе в категорию «Одежда» будут отображаться подкатегории. На рисунке ниже показано, что мы находимся в категории «Одежда», где клиенту показываются различные подкатегории, т.е. толстовки и футболки.

Показать оба варианта

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

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

4. Сортировка товаров по умолчанию

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

• Сортировка по умолчанию (произвольный порядок + имя). Упорядочивание по количеству заказов товара и затем сортировка по имени.
• По популярности (продажи). Большее количество продаж приводит к отображению продукта в верхней части списка.
• По среднему рейтингу. Количество продаж — это одно, рейтинг — это другое. При выборе этого пункта товары будут организованы в соответствии со средним рейтингом среди покупателей.
• Упорядочить по последним. Иногда важно отображать последние товары в верхней части, для такого случая выберите этот вариант.
• По цене (возрастание) и По цене (убывание). Их имена совершенно очевидны: используйте эти варианты, если ваши покупатели помешаны на ценах.

5. Добавление в корзину

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

• Перенаправить в корзину после успешного добавления. Включение этого флажка будет означать, что всякий раз, когда покупатель добавляет товар, он будет автоматически переходить на страницу корзины. Я предложил бы снять этот флажок, потому что есть вероятность, что клиент будет покупать больше товаров за один раз, если не перенаправлять его или её непосредственно на страницу оформления заказа.
• Включить AJAX для кнопки добавления в корзину в архивах. Отображение параметра «Добавить в корзину» на страницах архивов может беспокоить, но эта проблема решается, если вы включите этот флажок. Я рекомендовал бы включить его.

Данные товара

1. Единица измерения веса

С помощью этого параметра можно задать единицы веса для товаров вашего интернет-магазина. Выберите любую единицу из выпадающего меню, т.е. «кг» (килограммы), «г» (граммы), «фунт» или «унция».

2. Единица измерения габаритов

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

3. Рейтинги товара

В 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 товаров, пишите ниже.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!
Оцените статью:

Как создавать собственные страницы продуктов WooCommerce

Хотите узнать, как легко настроить страницы продуктов WooCommerce? Если вы управляете интернет-магазином, то, вероятно, хотите, чтобы ваши страницы с каждым продуктом выглядели великолепно, были правильно организованы и соответствовали вашему бренду.

Это сложно сделать, если полагаться только на WooCommerce и свою тему, потому что приходится более или менее придерживаетесь макета по умолчанию.

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

• Добавить дополнительные элементы контента.
• Изменить шрифты и цвета.
• Внесите изменения в структуру страницы.
• Или даже полностью настроить страницы продуктов с нуля.

И все это делать без программирования!

Некоторые идеи полностью настраиваемых шаблонов продуктов:

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

1. Измените стиль страниц продукта

Вот несколько плагинов, если вы ищете всего несколько косметических настроек, таких как изменения шрифтов, цвета или изменения отдельных элементов.

WooCommerce Colors

WooCommerce Colors позволяет настраивать цвета различных элементов WooCommerce, таких как кнопка «Добавить в корзину», цену продукта и другие. Вы можете внести эти изменения, используя собственный настройщик WordPress.

Это простой и понятный плагин, не требующий каких-либо знаний CSS. Однако он позволяет настраивать только цвета, и вы не сможете переопределить некоторые цвета в зависимости от вашей темы.

Цена: Бесплатно.

YellowPencil

Благодаря плагину YellowPencil можно изменять шрифты, цвета, размеры шрифтов, расстояние между элементами и даже добавлять анимированные визуальные эффекты во внешний интерфейс вашего сайта. В бесплатной версии есть много вариантов стилей, но Yellow Pencil Pro добавляет расширенные параметры для градиентов, анимации, пользовательских шрифтов, цветовых палитр, фоновых изображений и многого другого.

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

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

Цена: бесплатно, с возможностью платного обновления.

CSS Hero

Что он делает: CSS Hero – это визуальный редактор, с помощью которого можно вносить изменения в стиль вашего сайта, автоматически настраивая CSS по мере внесения визуальных изменений.

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

Цена: платно, от 29 долларов в год.

2. Добавьте новые элементы в списки продуктов

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

WooCommerce Single Product Page Customizer

WooCommerce Single Product Page Customizer позволяет добавлять поля пользовательского текста или HTML в шаблон продукта и выбирать, где на странице их отображать.

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

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

Цена: Бесплатно.

Custom Product Tabs for WooCommerce

Custom Product Tabs for WooCommerce позволяет добавлять дополнительные вкладки с текстом, изображениями, HTML или короткими кодами на страницах продуктов. Затем вы можете выбрать, для каких продуктов отображать информацию.

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

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

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

Цена: бесплатно, с платной версией Pro.

Product Video for WooCommerce

Product Video for WooCommerce позволяет добавлять видео на страницы продуктов или в галерею продуктов. Можно встраивать видеоролики YouTube, Vimeo, Dailymotion, Metacafe, Facebook или загружать свои собственные. Он также предлагает несколько вариантов отображения: во всплывающем окне, внутри вашей страницы и в полноэкранном режиме.

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

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

Цена: платно, сейчас 49 долларов.

3. Создавайте индивидуальные продукты

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

Toolset

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

Цена: платно, планы от 69 долларов.

Создайте собственный шаблон с динамическим контентом и полностью настраиваемым стилем

С помощью Toolset можно легко создать шаблон продукта, используя блоки WooCommerce и Toolset, и заполнить эти блоки динамическим контентом. Это означает, что нужно создать шаблон только один раз, и он автоматически подберет правильное название продукта, описание, цену, отзывы и многое другое в зависимости от продукта.

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

Выберите конкретные критерии отображения для ваших шаблонов

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

Дальнейшая настройка вашего магазина WooCommerce с еще большей функциональностью

Популярные конструкторы страниц, такие как Elementor Pro, Divi и WPBakery, также предлагают варианты для создания и настройки страниц продуктов WooCommerce. Дополнительные функции, доступные с набором плагинов Toolset, можно использовать специально для магазинов WooCommerce или других типов сайтов.

Например, вы можете:

• Создавать интерфейсные формы, с помощью которых поставщики смогут добавлять свои продукты на ваш сайт.
• Создавать отношения записей, которые позволяют вам связывать свои продукты с другими типами записей (такими как «Одежда»).
• Отображать расположение магазинов на карте.
• Добавлять мощные функции поиска и фильтрации.
• Создавать дополнительные настраиваемые поля для дальнейшего определения ваших продуктов.

Выбор подходящих инструментов WooCommerce для вас

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

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