Блоки WooCommerce помогут создать кастомные страницы, продемонстрировать товары и добавить расширенные функции интернет-магазина, такие как фильтрация и поиск. И все это без написания кода.
Многие из них предлагаются с ВуКомерс по умолчанию, но несколько новых вариантов не поставляются так. Можете использовать блоки в своем интернет-магазине, установив плагин WooCommerce Blocks WordPress. Он является тестовым местом для экспериментальных предложений и потенциальных будущих дополнений к основным элементам WC.
В этом практическом руководстве вы узнаете, как добавить возможности ВуКомерс на свой сайт ВордПресс с помощью блоков.
- Необходимые условия
- Изучение блоков WooCommerce
- Использование блока «Сетка продуктов» в WooCommerce
- Добавьте блок «Рекомендуемый продукт» на страницу или в пост
- Использование блоков фильтрации в WooCommerce
- Добавление блока «Фильтр по цене»
- Добавление блока «Фильтр по атрибутам»
- Страницы корзины и оформления заказа
- Как создать кастомную страницу магазина
- Бонус — шаблон Bono для WooCommerce
- Заключение
Необходимые условия
Чтобы следовать этому руководству, убедитесь, что у вас есть:
- WooCommerce, который установлен и активирован на дашборде.
- Знание WordPress.
Изучение блоков WooCommerce
Редактор блоков WordPress по умолчанию, представленный в версии 5.0, — это Gutenberg. Он заменил классический вариант системой на основе элементов, позволяя создавать и кастомизировать визуально привлекательный контент без глубоких знаний фронтенд-кода.
Блоки ВуКомерс легко интегрируется с интуитивно понятным интерфейсом Гутенберга. Они предлагают набор специальных элементов, предназначенных для отображения товаров, управления корзиной, процессов оформления заказа и т.д.
Благодаря этой интеграции вы сможете в полной мере воспользоваться гибкостью и простотой редактора блоков, одновременно кастомизируя сайт WordPress для оптимальной работы в сфере онлайн-торговли.
Чтобы использовать элементы WC, начните с открытия или создания страницы/поста. Нажмите кнопку на верхней панели, чтобы просмотреть все блоки. Затем перейдите к разделу WooCommerce. Вот краткий обзор различных блоков:
- Поиск товаров. Он добавляет строку, чтобы покупатели могли быстро найти нужное.
- Все товары — отображает все продукты магазина в виде сетки.
- Все отзывы. Данный блок показывает список всех мнений о товаре.
- Классическое оформление заказа. Он отображает обычный шорткод WooCommerce для данного процесса.
- Классическая корзина. Отображает шорткод стандартной корзины.
- Аккаунт клиента — включает возможность входа и выхода из системы.
- Избранная категория — выделение раздела товаров и призыва к действию (CTA) для поощрения быстрых ответов.
- Избранный продукт. Это выделение товара или его разновидности и CTA.
- Активные фильтры. Блок отображает включенные в данный момент параметры выбора.
- Фильтр по цене. Он отображает диапазон стоимости, который покупатели могут использовать для сортировки товаров.
- Фильтр по запасам. Он позволяет сортировать товары по остаткам.
- Фильтр по атрибутам. Это сортировка продуктов на основе таких критериев, как размер или цвет.
- Фильтр по рейтингу. Он позволяет покупателям сортировать продукты по их рейтингу.
- Отобранные вручную товары — этот блок отображает их в виде сетки.
- Мини-корзина — кнопка для ее быстрого просмотра.
- Уведомления магазина — отображение оповещений для покупателей, созданных WooCommerce или другими расширениями.
- Самые продаваемые товары. Он показывает сетку наиболее покупаемых продуктов магазина.
- Список категорий товаров. Отображает все разделы продуктов в виде каталога или выпадающего перечня.
- Товары по категориям. Данный блок отображает сетку продуктов из выбранных разделов.
- Коллекция товаров (Beta). Показывает продукцию из выбранной подборки.
- Самые новые товары. Этот блок отображает последние продукты в виде сетки.
- Товары в продаже. Он показывает в виде сетки текущие продукты, которые продаются.
- Товары по тегам. Это отображение продуктов с выбранными метками в виде сетки.
- Товары с наивысшими оценками. Блок отображает в сетке продукты с самым высоким рейтингом.
- Товары по атрибутам. Отображает продукты с выбранными параметрами в сетке.
- Отзывы по категориям. Он отображает мнения о товарах из указанных разделов.
- Отзывы по продуктам. Блок показывает рецензии, упорядоченные по товарам.
- Одиночный продукт. Отображение одного товара.
- Корзина — показ корзины.
- Оформление заказа. Это отображение формы, позволяющей покупателям отправлять покупки.
Теперь вы знаете, что представляет собой каждый блок. Давайте воспользуемся некоторыми из них, чтобы создать сайт интернет-магазина.
Использование блока «Сетка продуктов» в WooCommerce
Блок сетки товаров — это универсальный инструмент для демонстрации продуктов вашего магазина в организованном, сетчатом формате на WordPress-сайте. Вот как добавить и кастомизировать его:
- Перейдите на страницу или пост, где хотите отобразить товары. Назначьте заголовок, например «Продукты».
- Нажмите кнопку на верхней панели навигации, чтобы отобразить все блоки. Прокрутите вниз до раздела WooCommerce и выберите «Все товары». Это действие отобразит ваши продукты в виде сетки на странице.
- Чтобы настроить этот блок, используйте панель с правой стороны. Вы можете получить доступ к конфигурациям, нажав на иконку «Настройки».
Здесь можете кастомизировать шаблон, содержимое и стиль сетки:
- Конфигурации макета: отрегулируйте количество строк и столбцов. Например, установите 2 для сбалансированного вида.
- Конфигурации содержимого: решите, нужно ли включать выпадающее меню сортировки для покупателей. Эта функция позволяет фильтровать товары в выбранном порядке. При желании ее возможно отключить.
- Расширенный стиль: при необходимости вы можете добавить классы CSS для более сложной стилизации.
- Предварительно просмотрите страницу после завершения настройки, чтобы убедиться, что все выглядит так, как нужно. Затем нажмите кнопку «Опубликовать». На этом этапе можете сделать страницу общедоступной, закрытой или с защитой паролем, в зависимости от своих предпочтений.
Добавьте блок «Рекомендуемый продукт» на страницу или в пост
Этот блок позволяет выделить товар на странице или в сообщении. Можете выбрать продукт, кастомизировать параметры его отображения и добавить в контент. Это поможет привлечь внимание к конкретному товару, который хотите продемонстрировать.
Чтобы добавить блок с изображением продукта, выполните следующие действия:
- Начните с перехода на страницу или публикацию, где хотите показать товар. Представьте, что оформляете сетку продуктов и желаете поместить главный в верхней части. Создайте пространство в этом месте. Вы заметите кнопку слева. Если есть существующий блок рядом с нужным местом, нажмите на три вертикальные точки, чтобы появилось меню. Можете выбрать «Добавить до» или «Добавить после».
- Выберите кнопку на верхней панели навигации, чтобы отобразить все элементы, и выполните поиск блока «Рекомендуемый продукт».
- Выберите товар, который хотите отобразить. Затем нажмите кнопку «Готово».
- Чтобы придать блоку уникальный вид, нажмите на «Настройки». На панели конфигураций вы можете:
- Решить, показывать ли описание и цену товара.
- Настроить отображение медиафайлов (изображений и видео).
- Указать alt-текст для картинок продукта.
- Выбрать цвет наложения блока.
- Отрегулировать непрозрачность элемента.
- После внесения необходимых изменений можете опубликовать свою страницу или обновить ее, если она уже работает. Это позволит увидеть блок в действии и убедиться, что он выглядит именно так, как хотите.
Использование блоков фильтрации в WooCommerce
Блоки фильтров позволяют клиентам уточнять поиск товаров по определенным критериям, помогая им быстро находить продукты, соответствующие их предпочтениям или требованиям.
- Перейдите на страницу или публикацию, где хотите добавить элементы. В данном руководстве используется раздел «Продукты», что и в предыдущих шагах.
- Выберите место, куда хотите добавить фильтры.
- Нажмите кнопку на верхней панели навигации, чтобы отобразить все блоки. Прокрутите страницу вниз до раздела WooCommerce и увидите возможность фильтрации по цене, акции, атрибутам и рейтингу.
Добавление блока «Фильтр по цене»
Выбрав этот блок, можете отобразить панель с диапазоном цен, которая позволит людям фильтровать товары, появляющиеся на странице, в зависимости от желаемой стоимости. Можете кастомизировать параметры панели справа в соответствии со своими потребностями.
Добавление блока «Фильтр по атрибутам»
Вы также можете использовать блок «Фильтр по атрибутам».
Выберите конкретный критерий, например, цвет. Затем кастомизируйте параметры соответствующим образом. Вы можете включить опцию «Отображать количество товаров», чтобы показать число продуктов, доступных в каждом цвете.
Затем можно просмотреть страницу в реальном времени и проверить функциональность кнопок фильтрации.
Выполнив эти действия, вы обеспечите клиентам отличный шопинг, позволив им легко уточнять поиск товаров на основе различных критериев, что в конечном итоге повысит их удовлетворенность и поможет найти желаемое.
Страницы корзины и оформления заказа
Корзина и оформление заказа в интернет-магазине должны быть интуитивно понятными и полностью функциональными. Это обеспечить отличный пользовательский опыт.
Обеспечение хорошего обслуживания клиентов зависит от эффективного управления элементами корзины и облегчения процесса оформления покупки.
WooCommerce по умолчанию создает страницы «Корзина» и «Оформление заказа» с помощью соответствующих блоков. Клиенты имеют возможность добавлять товары в нее и получать доступ к ней через панель навигации.
После подтверждения содержимого корзины покупатель может выбрать кнопку «Приступить к оформлению заказа», заполнить необходимые данные и оформить покупку.
Как создать кастомную страницу магазина
Теперь, когда вы узнали, как использовать определенные блоки ВуКомерс, следующий шаг — объединить их, чтобы создать удобную страницу интернет-магазина с помощью следующих элементов:
- Поиск товара.
- Фильтр по цене.
- Категории товаров.
- Популярные продукты.
- Все товары.
Чтобы разработать этот макет магазина, создайте новую страницу и выполните следующие действия.
- Введите «Магазин» в качестве заголовка.
- Используя те же шаги, что и для добавления блока, вставьте элемент «Поиск товаров». Не применяйте никаких конфигураций.
- Добавьте элемент «Список категорий товаров».
На странице настроек блока установите для параметра «Стиль расписания» значение «Выпадающий». - Далее добавьте элемент «Фильтр по цене». Не настраивайте ничего для этого блока.
- Добавьте элемент «Рекомендуемый продукт» и выберите товар для отображения. Примените те же конфигурации, что и для блока «Рекомендуемый продукт» который создали ранее.
- Добавьте элемент «Все товары».
В настройках этого блока установите значения Столбцы и Строки равными 2 и снимите флажок «Показать выпадающее меню сортировки».
- Опубликуйте страницу и просмотрите результаты.
Бонус — шаблон Bono для WooCommerce
Перечисленные выше способы позволяют добавить функциональность интернет-магазина при помощи блоков WooCommerce на любой уже готовый сайт. Но настройка потребует много времени и углубленных знаний WordPress.
Также не помешают базовые навыки CSS и HTML для кастомизации.
Если вы только планируете запуск e-commerce проекта, то лучше сразу использовать соответствующую тему. В русскоязычном сегменте шаблон Bono является одним из немногих, который подготовлен разработчиками под взаимодействие с WooCommerce.
Все рассмотренные в статье блоки уже добавлены в WooCommerce. Их можно включить, выключить или кастомизировать прямо из настроек шаблона. Приведу несколько примеров.
Фильтры продуктов. Для товаров в теме встроены 3 виджета фильтрации: по цене, рейтингу и атрибутам. Они стилизованы под общий дизайн шаблона.
Корзина. Удобна для пользователя. Имеет не только отдельную страницу, но и всплывающий в правой части экрана попап вариант для быстрого редактирования содержимого.
Оформление заказа. Через кастомайзер легко настраиваются необходимые параметры.
Похожие товары. На страницах отдельных продуктов выводятся «Похожие товары» и «Недавно просмотренные» для повышения конверсии.
Помимо перечисленного, в Bono есть еще несколько крутых фишек для увеличения продаж, которые не были рассмотрены в формате блоков выше в рамках статьи. Часть из них относятся к встроенному функционалу WooCommerce, а некоторые можно реализовать на сайте при помощи дополнительных плагинов. В Боно они доступны «из коробки».
Список избранного. В личном кабинете посетители сайта могут хранить понравившиеся им товары.
Добавить товар в избранное можно и без регистрации на сайте. Он будет сохранен там благодаря использованию cookie.
Сравнение. В шаблоне реализована удобная страница для сравнения товаров между собой по характеристикам.
Бейджи на товарах. Для привлечения дополнительного внимания к продуктам, на них можно выводить ярлыки: «Новинка», «Хит продаж», «Скидка» и так далее.
Вариативность. Встроенная функция WooCommerce для создания вариативных товаров (по цветам, размерам и прочим параметрам) в полной мере реализована в Боно.
Bono — это быстрый и удобный шаблон, подготовленный под работу с WooCommerce. С ним запустить интернет-магазин можно без привлечения программистов и в кратчайшие сроки.
Заключение
В этом руководстве мы рассмотрели возможности блоков WooCommerce, начиная с добавления сеток товаров и тематических продуктов и заканчивая реализацией мощных фильтров. В нем также описано значение компонентов корзины и оформления заказа — критически важных элементов для обеспечения совершения покупок.
Стратегическое сочетание различных блоков ВуКомерс позволяет создать интуитивно понятный и визуально привлекательный макет. Этот процесс включает тщательный выбор элементов, их конфигурацию и расположение, чтобы удовлетворить конкретные функциональные возможности и предпочтения клиентов.