WooCommerce: как начать работу с блоками WooCommerce — ЧАСТЬ 1

Начиная с WordPress 5.0, редактор страниц/сообщений по умолчанию был полностью переработан. Наверняка вы слышали о Гутенберге.

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

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

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

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

Что такое блоки WooCommerce и почему они так важны?

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

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

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

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

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

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

Список основных блоков WooCommerce [Часть 1]

1. Активные фильтры товаров

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

В блоке «Активные фильтры товаров» отображаются фильтры товаров, активные в данный момент в текущем представлении (то есть фильтры, которые были выбраны на предыдущем шаге). Кроме того, этот блок автоматически захватит атрибуты вашего продукта, что позволит вашим клиентам фильтровать активные продукты по любому атрибуту.

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

2. Все обзоры

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

По данным Trustpilot, 89% клиентов читают онлайн-обзоры перед покупкой продуктов. Это показывает неотъемлемую роль отзывов клиентов в ваших продажах в электронной коммерции.

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

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

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

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

3. Все продукты

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

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

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

4. Избранная категория

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

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

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

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

5. Рекомендуемые продукты

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

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

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

6. Товары по категориям

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

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

7. Самые продаваемые продукты

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

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

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

8. Фильтровать товары по цене

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

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

9. Фильтровать товары по атрибуту

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

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

10. Новейшие продукты

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

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

Вывод

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

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

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

У нас также есть часть 2 этой статьи с еще десятью блоками WooCommerce и способами их легкого добавления и редактирования. Проверьте это, как это будет жить на следующей неделе!