Что такое блоки WooCommerce? Как их эффективно использовать в 2022 году

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

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

В этом посте мы подробнее рассмотрим блоки WooCommerce и способы доступа к ним в WordPress. Затем мы рассмотрим шесть блоков, которые вы можете добавить в свой магазин, чтобы повысить коэффициент конверсии. Давайте начнем!

Что такое блоки WooCommerce? Краткое введение

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

Кроме того, WooCommerce поставляется с широким спектром блоков, к которым вы можете получить доступ в собственном редакторе блоков WordPress (также известном как Gutenberg). С помощью этих блоков вы можете перечислить некоторые или все свои продукты, отобразить фильтры продуктов, добавить окно поиска продуктов и многое другое.

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

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

Откройте страницу или публикацию, над которой хотите работать, нажмите на знак плюса (+) и найдите нужный блок:

Вы также можете просмотреть полный список доступных блоков WooCommerce, нажав кнопку «плюс» (+) в верхнем левом углу экрана. На вкладке Блоки прокрутите вниз до раздела WooCommerce :

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

Лучшие блоки WooCommerce (и как их использовать)

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

1. Блок « Все товары »
2. Блок « Товары с самым высоким рейтингом »
3. Блок « Фильтрация товаров по цене »
4. Блок поиска товаров
5. Блок « Все отзывы »
6. Блок рекомендуемых товаров

1. Блок « Все товары »

Блок « Все товары » — один из самых важных элементов любого магазина. Он позволяет отображать все ваши продукты в аккуратной сетке:

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

Как и в большинстве блоков WooCommerce, вы можете настроить функцию « Все продукты » в соответствии со своими потребностями. Если вы нажмете на блок, вы получите выбор настроек на панели справа:

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

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

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

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

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

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

2. Блок товаров с самым высоким рейтингом

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

Блок Top Rated Products позволяет продемонстрировать товары с наибольшим количеством положительных отзывов:

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

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

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

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

Если у вас пока нет большого количества отзывов для демонстрации, вы можете вместо этого использовать блок « Лучшие продажи продуктов ». Это отображает самые популярные товары на вашем сайте в зависимости от количества продаж.

Еще одна похожая функция — блок « Новые продукты ». Как следует из названия, это позволяет вам продвигать ваши самые последние дополнения.

3. Блок « Фильтровать товары по цене »

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

Блок « Фильтровать товары по цене » позволяет пользователям определять минимальную и максимальную цену с помощью простого ползунка:

Этот блок работает вместе с блоком « Все продукты », который мы использовали ранее. Как только пользователь установит определенный ценовой диапазон, WooCommerce автоматически обновит список продуктов, чтобы отображать только те товары, которые попадают в этот бюджет:

Блок « Фильтровать товары по цене » прост в использовании. Однако вы можете еще больше упростить задачу своим пользователям, разрешив им вводить определенные суммы. Для этого выберите блок и перейдите на панель настроек. В разделе « Диапазон цен » выберите параметр « Редактируемый »:

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

Еще одна удобная функция — блок « Активные фильтры ». Когда вы добавите это на свою страницу, пользователи смогут увидеть список своих текущих фильтров.

4. Блок поиска товаров

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

К счастью, WooCommerce предлагает блок поиска товаров :

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

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

5. Блок « Все отзывы »

Как мы упоминали ранее, отображение обзоров может побудить новых посетителей попробовать ваши продукты. Фактически, одно недавнее исследование показало, что почти все покупатели перед совершением покупки изучают отзывы [1] .

Как следует из названия, блок « Все отзывы » позволяет отображать все отзывы клиентов в одном месте:

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

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

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

Вы также можете объединить блок « Все отзывы » с двумя другими связанными функциями: «Отзывы по продуктам» и «Отзывы по категориям» . Эти блоки позволяют отображать рейтинги и отзывы клиентов для определенных товаров и категорий.

6. Блок рекомендуемых товаров

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

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

Затем вы можете настроить макет вашего рекомендуемого продукта:

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

Кроме того, вы можете редактировать кнопку CTA внутри блока. Все, что вам нужно сделать, это нажать на нее, и вы получите выбор вариантов. Например, вы можете обновить ссылку и настроить цвет и типографику кнопки:

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

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

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

Начните работать с блоками WooCommerce уже сегодня

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

У вас есть вопросы об использовании блоков WooCommerce? Дайте нам знать в комментариях ниже!