Блоки WooCommerce помогут вам создать пользовательские страницы магазина, продемонстрировать товары и добавить расширенные функции электронной коммерции, такие как фильтрация и поиск — и все это без написания одной строки кода.
Многие блоки поставляются с WooCommerce по умолчанию, но несколько новых блоков не поставляются. Вы можете использовать эти новые блоки в своем магазине WooCommerce, установив плагин WooCommerce Blocks WordPress. Этот плагин является испытательным полигоном для экспериментальных предложений и потенциальных будущих дополнений к основным блокам WooCommerce.
Интеграция блоков WooCommerce в WordPress очень проста с помощью Kinsta, где вы можете включить WooCommerce в процессе настройки, установив флажок. Такая интеграция позволяет быстро и без усилий создать интернет-магазин.
В этом практическом руководстве вы узнаете, как добавить возможности WooCommerce на свой сайт WordPress с помощью блоков WooCommerce.
Необходимые условия для начала
Чтобы следовать этому руководству, убедитесь, что у вас:
- WooCommerce установлен и активирован в вашей панели WordPress
- Знать WordPress
Если у вас еще нет сайта WordPress, вы можете создать сайт WordPress с помощью веб-хостинга или локально. Как только вы создадите сайт, импортируйте эти образцы товаров для вашего магазина WooCommerce.
Что такое блоки WooCommerce
Редактор блоков WordPress по умолчанию, представленный в версии 5.0, — это редактор Gutenberg. Он заменил классический редактор системой на основе блоков, позволяя пользователям создавать и настраивать визуально привлекательный контент без глубоких знаний фронтенд-кода.
WooCommerce Blocks легко интегрируется с интуитивно понятным интерфейсом редактора Gutenberg, предлагая набор специальных блоков, предназначенных для отображения товаров, управления корзиной, процессов оформления заказа и многого другого.
Благодаря этой интеграции вы сможете в полной мере воспользоваться гибкостью и простотой редактора блоков, одновременно настраивая свой сайт WordPress для оптимальной работы в сфере электронной коммерции.
Как использовать блоки WooCommerce
Чтобы использовать блоки WooCommerce, начните с открытия или создания страницы или поста. Нажмите кнопку на верхней панели, чтобы просмотреть все блоки, а затем перейдите к разделу WOOCOMMERCE.
Вот краткий обзор различных блоков
- Поиск товаров — добавляет строку поиска для быстрого поиска товаров покупателями.
- Все товары — отображает все товары магазина в виде сетки.
- Все отзывы — отображает все отзывы о товаре.
- Classic Checkout — отображает классический шорткод оформления заказа.
- Classic Cart — отображает шорткод классической корзины.
- Customer Account — Включает возможность входа и выхода из системы.
- Featured Category — Выделение категории товара и призыва к действию (CTA) для поощрения быстрых ответов.
- Featured Product — Выделение продукта или его разновидности и CTA.
- Активные фильтры — отображение активных в данный момент фильтров.
- Фильтр по цене — отображает диапазон цен, который покупатели могут использовать для фильтрации товаров.
- Фильтр по запасам — позволяет фильтровать товары по состоянию запасов.
- Фильтр по атрибутам — фильтрация товаров на основе таких атрибутов, как размер или цвет.
- Фильтр по рейтингу — позволяет покупателям фильтровать товары по их рейтингу.
- Отобранные вручную товары — Отображение в виде сетки отобранных вручную товаров.
- Мини-корзина — кнопка быстрого просмотра корзины.
- Уведомления магазина — Отображение уведомлений для покупателей, созданных WooCommerce или другими расширениями.
И ещё
- Самые продаваемые товары — отображает сетку самых продаваемых товаров вашего магазина.
- Список категорий товаров — Отображает все категории товаров в виде списка или выпадающего списка.
- Товары по категориям — Отображает сетку товаров из выбранных категорий.
- Коллекция товаров (Beta) — отображение товаров из выбранной коллекции.
- Самые новые продукты — отображение последних продуктов в виде сетки.
- Продукты в продаже — отображение в сетке текущих товаров в продаже.
- Продукты по тегам — отображение продуктов с выбранными тегами в виде сетки.
- Top Rated Products — отображает в сетке продукты с самым высоким рейтингом.
- Продукты по атрибутам — Отображение продуктов с выбранными атрибутами в сетке.
- Отзывы по категориям — Отображает отзывы о товарах из указанных категорий.
- Отзывы по продуктам — отображение отзывов, упорядоченных по продуктам.
- Одиночный продукт — отображение одного продукта.
- Корзина — Отображение корзины.
- Оформление заказа — Отображение формы, позволяющей покупателям отправлять заказы.
Теперь вы знаете, что представляет собой каждый блок. Давайте воспользуемся некоторыми из этих блоков, чтобы создать удобство электронной коммерции.
Блок «Сетка товаров» в WooCommerce
Блок «Сетка товаров» — это универсальный инструмент для демонстрации товаров вашего магазина в организованном, сетчатом формате на вашем WordPress-сайте. Вот как добавить и настроить блок сетки товаров:
Перейдите на страницу или пост, где вы хотите отобразить товары. Назначьте заголовок, например «Продукты».
Нажмите кнопку на верхней панели навигации, чтобы отобразить все блоки.
Прокрутите вниз до раздела WOOCOMMERCE и выберите «Все товары«.
Это действие отобразит ваши товары в виде сетки на странице.
Чтобы настроить этот блок, воспользуйтесь панелью настроек блока с правой стороны. Вы можете получить доступ к настройкам, нажав на иконку «Настройки» (вторая справа иконка на верхней панели навигации).
Здесь вы можете настроить макет, содержимое и стиль сетки:
Настройки макета: Настройте количество строк и столбцов. Например, установите оба значения на 2 для сбалансированного вида.
Настройки содержимого: Решите, нужно ли включать выпадающее меню сортировки для покупателей. Эта функция позволяет покупателям сортировать товары в выбранном порядке. При желании ее можно отключить.
Расширенный стиль: При необходимости вы можете добавить классы CSS для более сложной стилизации.
Предварительно просмотрите страницу после завершения настройки, чтобы убедиться, что все выглядит так, как нужно. Затем нажмите кнопку » Опубликовать «. На этом этапе вы можете сделать страницу общедоступной, закрытой или с защитой паролем, в зависимости от ваших предпочтений.
Блок Featured Product
Блок Featured Product позволяет выделить товар на странице или в сообщении. Вы можете выбрать продукт, настроить параметры его отображения и добавить его в контент, чтобы привлечь внимание к конкретному товару, который вы хотите продемонстрировать.
Чтобы добавить блок с изображением товара, выполните следующие действия:
Начните с перехода на страницу или пост, где вы хотите представить продукт. Представьте, что вы оформляете сетку товаров и хотите поместить главный товар в верхней части. Создайте место в этом месте, и вы заметите кнопку слева.
Кроме того, если у вас есть существующий блок рядом с нужным местом, нажмите на три вертикальные точки, чтобы появилось меню. Вы можете выбрать «Добавить до» или «Добавить после«.
Выберите кнопку на верхней панели навигации, чтобы отобразить все блоки, и выполните поиск Featured Product.
Выберите продукт, который вы хотите отобразить. Затем нажмите кнопку Готово.
Чтобы придать блоку Featured Product уникальный вид, нажмите на Settings (Настройки). На панели настроек блока вы можете:
- Решить, отображать ли описание и цену товара.
- Настроить отображение медиафайлов (изображений и видео).
- Указать alt-текст для изображения товара.
- Выбрать цвет наложения блока.
- Настройте непрозрачность блока.
После того как вы внесли все необходимые изменения, вы можете опубликовать свою страницу или обновить ее, если она уже работает. Это позволит вам увидеть блок в действии и убедиться, что он выглядит именно так, как вы хотите.
Предпросмотр обновленной страницы «Товары», на которой над сеткой товаров отображается выделенный элемент «Фасоль».
Блоки фильтров WooCommerce
Блоки фильтров позволяют вашим клиентам уточнять поиск товаров по определенным критериям, помогая им быстро находить товары, соответствующие их предпочтениям или требованиям.
- Перейдите на страницу или пост, где вы хотите добавить блоки. В этом руководстве используется та же страница » Товары», что и в предыдущих шагах.
- Выберите место, куда вы хотите добавить фильтры.
- Нажмите кнопку на верхней панели навигации, чтобы отобразить все блоки. Прокрутите страницу вниз до раздела WOOCOMMERCE и увидите возможность фильтрации по цене, акции, атрибутам и рейтингу. Например, если вы выберете Фильтр по цене.
Добавление блока «Фильтр по цене»
Выбрав этот блок, вы можете отобразить полосу ценового диапазона, которая позволит пользователям фильтровать товары, появляющиеся на странице, в зависимости от желаемого диапазона цен. Вы можете настроить параметры блока на правой панели в соответствии со своими потребностями.
Блок «Фильтр по атрибутам»
Вы также можете использовать блок «Фильтр по атрибутам«.
Вы можете выбрать конкретный атрибут, например «Цвет», а затем соответствующим образом настроить параметры. Например, вы можете включить опцию «Отображать количество товаров«, чтобы показать количество товаров, доступных в каждом цвете.
Затем можно просмотреть страницу в реальном времени и проверить функциональность кнопок фильтрации.
Выполнив эти действия, вы сможете обеспечить своим клиентам беспрепятственный шопинг, позволив им легко уточнять поиск товаров по различным критериям, что в конечном итоге повысит их удовлетворенность и поможет им найти желаемые товары.
Страницы корзины и оформления заказа
Функции корзины и оформления заказа в вашем интернет-магазине должны быть интуитивно понятными и полностью функциональными, чтобы обеспечить беспрепятственное путешествие пользователя. Обеспечение отличного обслуживания клиентов зависит от эффективного управления элементами корзины и облегчения процесса оформления заказа.
WooCommerce по умолчанию создает страницы «Корзина» и «Оформление заказа» с помощью соответствующих блоков. Клиенты могут добавлять товары в корзину и получать доступ к ней через панель навигации.
После подтверждения содержимого корзины покупатель может выбрать кнопку «Приступить к оформлению заказа«, заполнить необходимые данные и оформить заказ.
Как создать пользовательскую страницу магазина
Теперь, когда вы узнали, как использовать определенные блоки WooCommerce, следующий шаг — объединить их, чтобы создать удобную страницу магазина со следующими блоками:
- Поиск товара
- Фильтр по цене
- Категории товаров
- Популярные товары
- Все товары
Чтобы создать этот макет магазина, создайте новую страницу и выполните следующие действия.
Введите «Магазин» в качестве заголовка страницы.
Используя те же шаги, что и для добавления блока, добавьте блок «Поиск товаров«. Не применяйте никаких настроек.
Добавьте блок «Список категорий товаров«.
На странице настроек блока установите для параметра СТИЛЬ РАСПИСАНИЯ значение «Выпадающий».
Далее добавьте блок «Фильтр по цене«. Не настраивайте ничего для этого блока.
Добавьте блок Featured Product и выберите товар для отображения. Примените те же настройки, что и для блока Featured Product, который вы создали ранее. На странице «Магазин» отобразится товар из шапки с некоторыми настройками для него.
Добавьте блок «Все товары«. Добавление блока «Все товары».
В настройках этого блока установите значения COLUMNS и ROWS равными 2 и снимите флажок Show Sorting Dropdown.
Опубликуйте страницу и просмотрите результаты.
Как анализировать работу блоков
Надежные инструменты Kinsta позволяют отслеживать и анализировать производительность страниц, использующих блоки WooCommerce.
Инструмент APM от Kinsta
Инструмент Kinsta для мониторинга производительности приложений (APM) позволяет отслеживать производительность страниц, содержащих блоки WooCommerce. Он фиксирует информацию о процессах PHP, запросах к базе данных MySQL и других важных показателях, позволяя отслеживать и анализировать транзакции, осуществляемые с помощью WooCommerce.
Например, вы можете проанализировать продолжительность и частоту взаимодействий, а также потенциальные узкие места, связанные с этими страницами. С помощью этой информации вы сможете точно устранить неполадки и оптимизировать производительность.
Инструмент аналитики Kinsta
Оценка влияния блоков WooCommerce на вовлеченность пользователей и продажи требует многогранного подхода. Здесь решающую роль играют комплексные инструменты аналитики Kinsta. Используя функции аналитики WordPress на панели MyKinsta, вы получите ценные сведения о различных показателях эффективности, которые напрямую влияют на вовлеченность пользователей и, как следствие, на продажи.
- Раздел «Ресурсы» панели MyKinsta отслеживает общее количество посещений вашего сайта, использование дискового пространства и пропускной способности. Это дает количественный обзор посещаемости сайта и использования ресурсов.
- Раздел «Производительность» включает такие показатели, как среднее время отклика PHP MySQL и использование AJAX. Эта статистика поможет вам отследить отзывчивость и интерактивность страниц, использующих блоки WooCommerce.
- Раздел «Отклик» содержит разбивку кодов отклика и анализ ошибок, помогая вам лучше понять взаимодействие с пользователями и потенциальные препятствия, с которыми они могут столкнуться.
- Раздел Geo & IP, раздел CDN Usage и раздел Cache позволяют отслеживать географические данные, использование сети доставки контента (CDN) и эффективность кэша. Эта информация помогает совершенствовать ваш сайт на основе поведения пользователей, местоположения и данных о производительности.
Внимательно отслеживая эту аналитику, вы сможете выявить потенциальные узкие места и оптимизировать страницы с помощью WooCommerce Blocks, чтобы обеспечить бесперебойную и увлекательную работу с сайтом.
Вы можете прочитать наше руководство по 18 эффективным способам ускорения работы магазина WooCommerce, чтобы узнать больше советов. Скорость очень важна для интернет-магазинов, поскольку медленно загружающиеся сайты приводят к разочарованию пользователей и потере продаж.
Резюме
В этом руководстве мы рассмотрели возможности блоков WooCommerce, начиная с добавления сеток товаров и тематических товаров и заканчивая реализацией мощных блоков фильтров. В нем также описано значение корзины и поля оформления заказа — критически важных элементов для обеспечения беспрепятственного совершения покупок.
Стратегическое сочетание различных блоков WooCommerce позволяет создать интуитивно понятный и визуально привлекательный макет. Этот процесс включает в себя тщательный выбор блоков, их настройку и расположение, чтобы удовлетворить конкретные функциональные возможности и предпочтения клиентов.
Независимо от того, используются ли блоки WooCommerce для отображения товаров, фильтров или функций корзины, инфраструктура хостинга Kinsta обеспечивает скорость и стабильность, необходимые для предоставления исключительного опыта покупок для ваших клиентов.
Переведено с сайта Kinsta
Читайте так же
- Топ 15 плагинов WordPress для интернет магазина в 2024 году
- 4 Плагина для Интернет-Магазина на WooCommerce — Плагины для WordPress
- WooCommerce: как добавить и вывести несколько цен
- Подключение платежных модулей WooCommerce от Тинькофф и Сбербанк напрямую без посредников
Обратная связь
Если у вас возникнут вопросы или потребуется техническая поддержка, не стесняйтесь обращаться. Связаться с нами можно через контактные данные:
- Электронная почта: Пишите нам на info@kowalski.su для подробных запросов или отправки дополнительных материалов. Мы обеспечиваем оперативный ответ и всестороннюю информацию.
- Телефон: Звоните на номер +7 (906) 825 44-41 для немедленной помощи или консультации. Рабочие часы с 7:00 до 15:00 (МСК).
- Telegram: Для быстрой связи используйте наш Telegram-канал @ivan_zh. Идеально подходит для получения оперативных ответов.
Откройте новые возможности с интеграцией WordPress и Bitrix24
Отличных вам сайтов!