Инструкция: как добавить блоки WooCommerce на сайт WordPress

Как добавить блоки WooCommerce

Блоки WooCommerce помогут создать кастомные страницы, продемонстрировать товары и добавить расширенные функции интернет-магазина, такие как фильтрация и поиск. И все это без написания кода.

Многие из них предлагаются с ВуКомерс по умолчанию, но несколько новых вариантов не поставляются так. Можете использовать блоки в своем интернет-магазине, установив плагин WooCommerce Blocks WordPress. Он является тестовым местом для экспериментальных предложений и потенциальных будущих дополнений к основным элементам WC.

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

Необходимые условия

Чтобы следовать этому руководству, убедитесь, что у вас есть:

  • WooCommerce, который установлен и активирован на дашборде.
  • Знание WordPress.

Изучение блоков WooCommerce

Редактор блоков WordPress по умолчанию, представленный в версии 5.0, — это Gutenberg. Он заменил классический вариант системой на основе элементов, позволяя создавать и кастомизировать визуально привлекательный контент без глубоких знаний фронтенд-кода.

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

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

Чтобы использовать элементы WC, начните с открытия или создания страницы/поста. Нажмите кнопку на верхней панели, чтобы просмотреть все блоки. Затем перейдите к разделу WooCommerce. Вот краткий обзор различных блоков:

  • Поиск товаров. Он добавляет строку, чтобы покупатели могли быстро найти нужное.
  • Все товары — отображает все продукты магазина в виде сетки.
  • Все отзывы. Данный блок показывает список всех мнений о товаре.
  • Классическое оформление заказа. Он отображает обычный шорткод WooCommerce для данного процесса.
  • Классическая корзина. Отображает шорткод стандартной корзины.
  • Аккаунт клиента — включает возможность входа и выхода из системы.
  • Избранная категория — выделение раздела товаров и призыва к действию (CTA) для поощрения быстрых ответов.
  • Избранный продукт. Это выделение товара или его разновидности и CTA.
  • Активные фильтры. Блок отображает включенные в данный момент параметры выбора.
  • Фильтр по цене. Он отображает диапазон стоимости, который покупатели могут использовать для сортировки товаров.
  • Фильтр по запасам. Он позволяет сортировать товары по остаткам.
  • Фильтр по атрибутам. Это сортировка продуктов на основе таких критериев, как размер или цвет.
  • Фильтр по рейтингу. Он позволяет покупателям сортировать продукты по их рейтингу.
  • Отобранные вручную товары — этот блок отображает их в виде сетки.
  • Мини-корзина — кнопка для ее быстрого просмотра.
  • Уведомления магазина — отображение оповещений для покупателей, созданных WooCommerce или другими расширениями.
  • Самые продаваемые товары. Он показывает сетку наиболее покупаемых продуктов магазина.
  • Список категорий товаров. Отображает все разделы продуктов в виде каталога или выпадающего перечня.
  • Товары по категориям. Данный блок отображает сетку продуктов из выбранных разделов.
  • Коллекция товаров (Beta). Показывает продукцию из выбранной подборки.
  • Самые новые товары. Этот блок отображает последние продукты в виде сетки.
  • Товары в продаже. Он показывает в виде сетки текущие продукты, которые продаются.
  • Товары по тегам. Это отображение продуктов с выбранными метками в виде сетки.
  • Товары с наивысшими оценками. Блок отображает в сетке продукты с самым высоким рейтингом.
  • Товары по атрибутам. Отображает продукты с выбранными параметрами в сетке.
  • Отзывы по категориям. Он отображает мнения о товарах из указанных разделов.
  • Отзывы по продуктам. Блок показывает рецензии, упорядоченные по товарам.
  • Одиночный продукт. Отображение одного товара.
  • Корзина — показ корзины.
  • Оформление заказа. Это отображение формы, позволяющей покупателям отправлять покупки.

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

Использование блока «Сетка продуктов» в WooCommerce

Блок сетки товаров — это универсальный инструмент для демонстрации продуктов вашего магазина в организованном, сетчатом формате на WordPress-сайте. Вот как добавить и кастомизировать его:

  1. Перейдите на страницу или пост, где хотите отобразить товары. Назначьте заголовок, например «Продукты».
  2. Нажмите кнопку на верхней панели навигации, чтобы отобразить все блоки. Прокрутите вниз до раздела WooCommerce и выберите «Все товары». Это действие отобразит ваши продукты в виде сетки на странице.

Использование блока для отображения товаров в виде сетки

  1. Чтобы настроить этот блок, используйте панель с правой стороны. Вы можете получить доступ к конфигурациям, нажав на иконку «Настройки».

Панель для настройки блока "Все товары".
Здесь можете кастомизировать шаблон, содержимое и стиль сетки:

  • Конфигурации макета: отрегулируйте количество строк и столбцов. Например, установите 2 для сбалансированного вида.
  • Конфигурации содержимого: решите, нужно ли включать выпадающее меню сортировки для покупателей. Эта функция позволяет фильтровать товары в выбранном порядке. При желании ее возможно отключить.
  • Расширенный стиль: при необходимости вы можете добавить классы CSS для более сложной стилизации.
  1. Предварительно просмотрите страницу после завершения настройки, чтобы убедиться, что все выглядит так, как нужно. Затем нажмите кнопку «Опубликовать». На этом этапе можете сделать страницу общедоступной, закрытой или с защитой паролем, в зависимости от своих предпочтений.Отредактированная страницы Продукты

Добавьте блок «Рекомендуемый продукт» на страницу или в пост

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

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

  1. Начните с перехода на страницу или публикацию, где хотите показать товар. Представьте, что оформляете сетку продуктов и желаете поместить главный в верхней части. Создайте пространство в этом месте. Вы заметите кнопку слева. Если есть существующий блок рядом с нужным местом, нажмите на три вертикальные точки, чтобы появилось меню. Можете выбрать «Добавить до» или «Добавить после».Добавление элемента Избранные товары
  2. Выберите кнопку на верхней панели навигации, чтобы отобразить все элементы, и выполните поиск блока «Рекомендуемый продукт».Поиск нужного блока
  3. Выберите товар, который хотите отобразить. Затем нажмите кнопку «Готово».
  4. Чтобы придать блоку уникальный вид, нажмите на «Настройки». На панели конфигураций вы можете:
  • Решить, показывать ли описание и цену товара.
  • Настроить отображение медиафайлов (изображений и видео).
  • Указать alt-текст для картинок продукта.
  • Выбрать цвет наложения блока.
  • Отрегулировать непрозрачность элемента.

Настройка блока ВуКомерс

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

Использование блоков фильтрации в WooCommerce

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

  1. Перейдите на страницу или публикацию, где хотите добавить элементы. В данном руководстве используется раздел «Продукты», что и в предыдущих шагах.
  2. Выберите место, куда хотите добавить фильтры.
  3. Нажмите кнопку на верхней панели навигации, чтобы отобразить все блоки. Прокрутите страницу вниз до раздела WooCommerce и увидите возможность фильтрации по цене, акции, атрибутам и рейтингу.

Добавление блока «Фильтр по цене»

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

Блок с фильтрацией по цене

Добавление блока «Фильтр по атрибутам»

Вы также можете использовать блок «Фильтр по атрибутам».

Выбор атрибутов продукта

Выберите конкретный критерий, например, цвет. Затем кастомизируйте параметры соответствующим образом. Вы можете включить опцию «Отображать количество товаров», чтобы показать число продуктов, доступных в каждом цвете.

Затем можно просмотреть страницу в реальном времени и проверить функциональность кнопок фильтрации.

Предварительный просмотр функциональности фильтра

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

Страницы корзины и оформления заказа

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

Обеспечение хорошего обслуживания клиентов зависит от эффективного управления элементами корзины и облегчения процесса оформления покупки.

WooCommerce по умолчанию создает страницы «Корзина» и «Оформление заказа» с помощью соответствующих блоков. Клиенты имеют возможность добавлять товары в нее и получать доступ к ней через панель навигации.

Страница корзины в ВуКомерс

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

Страница оформления заказа

Как создать кастомную страницу магазина

Теперь, когда вы узнали, как использовать определенные блоки ВуКомерс, следующий шаг — объединить их, чтобы создать удобную страницу интернет-магазина с помощью следующих элементов:

  • Поиск товара.
  • Фильтр по цене.
  • Категории товаров.
  • Популярные продукты.
  • Все товары.

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

  1. Введите «Магазин» в качестве заголовка.Страница Магазин в режиме редактирования
  2. Используя те же шаги, что и для добавления блока, вставьте элемент «Поиск товаров». Не применяйте никаких конфигураций.
    Добавление блока Поиск товаров
  3. Добавьте элемент «Список категорий товаров».Добавление элемента
    На странице настроек блока установите для параметра «Стиль расписания» значение «Выпадающий».Выпадающий стиль расписания
  4. Далее добавьте элемент «Фильтр по цене». Не настраивайте ничего для этого блока.
  5. Добавьте элемент «Рекомендуемый продукт» и выберите товар для отображения. Примените те же конфигурации, что и для блока «Рекомендуемый продукт» который создали ранее.Добавление блока Рекомендуемый продукт
  6. Добавьте элемент «Все товары».
    Добавление блока Все товарыВ настройках этого блока установите значения Столбцы и Строки равными 2 и снимите флажок «Показать выпадающее меню сортировки».Настройка параметров блока Все товары
  7. Опубликуйте страницу и просмотрите результаты.
    Предварительный просмотр страницы Магазин
    Страницы магазина

Бонус — шаблон Bono для WooCommerce


Bono с WooCommerce

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

Также не помешают базовые навыки CSS и HTML для кастомизации.

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

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

Фильтры продуктов. Для товаров в теме встроены 3 виджета фильтрации: по цене, рейтингу и атрибутам. Они стилизованы под общий дизайн шаблона.

Фильтры товаров

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

Удобная корзина

Оформление заказа. Через кастомайзер легко настраиваются необходимые параметры.

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

Похожие товары. На страницах отдельных продуктов выводятся «Похожие товары» и «Недавно просмотренные» для повышения конверсии.

Похожие позиции

Помимо перечисленного, в Bono есть еще несколько крутых фишек для увеличения продаж, которые не были рассмотрены в формате блоков выше в рамках статьи. Часть из них относятся к встроенному функционалу WooCommerce, а некоторые можно реализовать на сайте при помощи дополнительных плагинов. В Боно они доступны «из коробки».

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

Избранные товары

Добавить товар в избранное можно и без регистрации на сайте. Он будет сохранен там благодаря использованию cookie.

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

Сравнение товаров в Bono

Бейджи на товарах. Для привлечения дополнительного внимания к продуктам, на них можно выводить ярлыки: «Новинка», «Хит продаж», «Скидка» и так далее.

Бейджи на товарах

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

Вариативные товары

Bono — это быстрый и удобный шаблон, подготовленный под работу с WooCommerce. С ним запустить интернет-магазин можно без привлечения программистов и в кратчайшие сроки.

Скидка на Bono

Заключение

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

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

Рейтинг
( 1 оценка, среднее 5 из 5 )
Александр/ автор статьи

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

Загрузка ...
Шаблоны для WordPress
×
Сделай подарок своему сайту
-15% на шаблоны и
плагины WordPress
Выбрать подарок