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

2

Настройка WooCommerce в Кастомайзере темы

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

Где найти WooCommerce в Кастомайзере

В админ-панели WordPress откройте Внешний вид > Настроить.

В окне Кастомайзера выберите пункт меню WooCommerce.

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

• Уведомление магазина,
• Каталог товаров,
• Товары,
• Изображения товаров,
• Оформления заказа.

Каждый из них подробно описан ниже.

Уведомление магазина

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

• Информационное. Например, информирование клиентов о задержках доставки из-за погодных условий. Уведомление об отъезде, если вы в отпуске.
• Рекламное. Рекламное событие, праздничное предложение, распродажа всех/некоторых товаров или бесплатная доставка.

Вывод уведомления магазина

Чтобы показать покупателям уведомление о магазине для всего сайта:

1. Перейдите Внешний вид > Настроить > WooCommerce > Уведомление магазина.
2. Добавьте сообщение в текстовую область.

1. Задействуйте опцию Включить уведомление магазина .

1. Нажмите кнопку Опубликовать.

Редактирование или удаление уведомление магазина

Чтобы изменить или скрыть отображение уведомления магазина на всем сайте:

1. Перейдите Внешний вид > Настроить > WooCommerce> Уведомление магазина.
2. Измените в текстовом блоке сообщение.
3. Чтобы скрыть вывод сообщения на сайте, уберите галочку напротив Включить уведомление магазина .
4. Опубликуйте пост.

Планирование вывода уведомления магазине

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

В этом примере сообщение о бесплатной доставке буде выводится до 31 августа.

1. Перейдите Внешний вид > Настроить > WooCommerce > Уведомление магазина.
2. Снимите флажок напротив Включить уведомление магазина.

1. На кнопке Опубликовать нажмите на символ шестеренки.

1. Кликните по пункту Запланировать и укажите дату/время, когда изменения вступят в силу.

1. Нажмите кнопку Запланировать.

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

Каталог товаров

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

• ч то отображать на странице магазина;
• отображать на страницах категорий;
• как отсортировать товары в категории;
• сколько товаров показывать в одной строке;
• сколько строк в списке товаров отображать на странице.

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

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

1. Выберите продукты или категории из раскрывающегося списка.

1. Проверьте вывод указанных блоков в правом окне.

1. Нажмите Опубликовать, чтобы сохранить изменения.

Страницы категорий

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

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

Исходная сортировка товаров (по умолчанию)

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

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

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

Сортировка по среднему рейтингу — отображение товаров на основе среднего рейтинга отзывов, от самого высокого к самому низкому.

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

Сортировать по цене (по возрастанию/убыванию) — сортировка товаров по цене от самой низкой к самой высокой (по возрастанию) или от самой высокой к самой низкой (по убыванию). Клиент видит либо Сортировать по цене: от низкой к высокой, либо Сортировать по цене: от высокой к низкой.

Количество товаров в строке

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

При этом нужно учесть:

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

1. Стрелками для увеличения/уменьшения выберите количество товаров.

1. В окне просмотра проверьте отображение товаров на всех устройствах

1. Чтобы изменения вступили в силу, нажмите Опубликовать.

Количество строк на странице

Опция позволяет выбрать количество строк товаров, появляющихся на страницах магазина и категорий.

При этом нужно учесть:

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

Товары

К странице товара можно применить следующие опции:

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

• Пагинация — отображает следующую и предыдущую ссылки на странице товара. При наведении на ссылку отображается миниатюра товара с названием.

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

Опция имеет две функции:

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

Это экономит ваше время на ручную обрезку и изменение размера каждого изображения.

Типы изображений

• Изображения каталога — это изображения среднего размера, которые отображаются на странице магазина, страницах категорий, а также для сопутствующих товаров, апсейлов и кросселов.
• Изображения миниатюр — это самые маленькие изображения, используемые в корзине, виджетах и (необязательно) изображениях галереи под одиночным изображением товара на страницах с подробной информацией об отдельных товарах.
• Одиночное изображение товара — это самое большое изображение, которое относится к основному изображению. Настройки изображений товара в Кастомайзере WooCommerce к ним не относятся. Чтобы добавить, изменить или удалить одиночное изображение товара или галерею изображений товара, см. Добавление изображений товаров и галереи.

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

Изменение размера и обрезка миниатюр изображений

1. Откройте Внешний вид > Настроить > WooCommerce > Изображения товаров.
2. Выберите одно из значений:

• 1:1

• Произвольно — соотношение, в котором будут обрезаться изображения.

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

1. Проверьте на всех размерах экранов в окне предпросмотра и нажмите Опубликовать.

Оформление заказа

Все опции для настройки страницы оформления заказа можно найти в разделе Внешний вид > Настроить > WooCommerce > Оформление заказа.

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

Рекомендуется создать страницы Политики конфиденциальности/Правил и условий, а затем задать их здесь

Вопросы и ответы

Я не могу найти Кастомайзер WooCommerce

В WooCommerce 3.3x+ этот функционал доступен в разделе Внешний вид > Настроить > WooCommerce.

В WooCommerce до 3.3.0 — WooCommerce > Настроить > Продукты > раздел Отображение.

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

Могу ли я по-прежнему использовать плагин Regenerate Thumbnails?

Да. Но это не нужно, если вы используете WooCommerce 3.3.0 или выше, потому что обновление размеров изображений плагин выполняет автоматически.

Вы также можете использовать опцию перегенерирования размеров миниатюр товаров в разделе WooCommerce > Статус > Инструменты:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как создавать собственные страницы продуктов 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.

Руководство по WooCommerce для начинающих: Настройки товаров – Часть 1

Товары

1. Основные
2. Отображение
3. Запасы
4. Загружаемые товары

• Габариты
• Обзоры

Габариты

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

Тут вы можете выбрать в каких единицах будет измеряться вес товаров в магазине
Единица измерения габаритов