Как настроить свой интернет-магазин с помощью блоков WooCommerce

Редактор блоков Gutenberg делает WordPress еще более доступным для владельцев сайтов любого уровня подготовки, позволяя создавать сложные страницы путем перетаскивания блоков контента. С помощью блоков WooCommerce вы можете выбирать и отображать товары, категории, фильтры и многое другое практически в любом месте вашего сайта — не нужно использовать шорткоды или редактировать строки кода!

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

Прежде чем начать, обновите WordPress и WooCommerce до последней версии. Примечание. Демонстрации для этого поста были созданы с темой Storefront, но они должны работать с любой выбранной вами темой, поддерживающей WooCommerce.

Знакомство с блоками WooCommerce

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

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

Совет для профессионалов: вы также можете быстро добавлять блоки в контент, используя сочетание клавиш `/`. Например, вы можете просмотреть доступные блоки WooCommerce, набрав `/woocommerce`.

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

Блоки товаров

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

Блок рекомендуемых продуктов

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

• Цвет наложения
• Непрозрачность фона
• Фокус изображения
• Позиционирование фона

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

Блок «Все продукты»

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

• Настройки макета:
  • Количество столбцов и строк — настройте макет сетки товаров.
  • Выравнивание кнопок — установите кнопки так, чтобы они располагались непосредственно под содержимым, или выровняйте их.
• Настройки контента:
  • Показать раскрывающийся список сортировки — показать или скрыть раскрывающийся список с параметрами сортировки.
  • Упорядочить товары по — выберите порядок товаров по умолчанию на основе цены, рейтинга, новизны или продаж.
  • Редактируйте отображаемую информацию о продуктах — удаляйте отзывы, добавляйте значок распродажи, добавляйте описание и т. д.

Блоки фильтров

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

• Фильтровать по атрибутам, таким как цвет или размер
• Фильтр по минимальной и максимальной цене
• Показать активные выбранные фильтры

В приведенном ниже примере используются все три блока:

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

Блок отобранных товаров

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

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

Параметры для блока отобранных продуктов включают в себя:

• Количество колонок — выберите до шести
• Выравнивание кнопок — установите кнопки так, чтобы они располагались непосредственно под содержимым, или выровняйте их.
• Показать или скрыть:
  • Название продукта
  • Цена продукта
  • Рейтинг продукта
  • Кнопка "Добавить в корзину"

Блок продуктов по категориям

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

• Категория продукта — выберите категорию или категории для отображения
• Количество столбцов и строк — настройте макет сетки товаров.
• Выровнять кнопки — разрешить кнопкам сразу следовать за содержимым или выровнять их по вертикали.
• Показать или скрыть:
  • Название продукта
  • Цена продукта
  • Рейтинг продукта
  • Кнопка "Добавить в корзину"
• Сортировать по:
  • Новизна
  • Цена
  • Рейтинг
  • Продажи
  • Заказ меню

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

Дополнительные блоки товаров

Есть несколько дополнительных блоков продуктов, которые очень похожи на упомянутые выше:

• Товары по тегам — отображать товары по тегам.
• Товары по атрибутам — отображать товары по атрибутам.
• Товары с самым высоким рейтингом — отображать товары с лучшими отзывами.
• Товары со скидкой — отображать товары со скидкой.
• Самые продаваемые продукты — покажите свои самые продаваемые продукты

Блоки просмотра

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

Блок всех отзывов

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

• Показать или скрыть:
  • Название продукта
  • Рейтинг продукта
  • Имя рецензента
  • Изображение — изображение продукта или граватар рецензента.
  • Дата проверки
  • Проверить содержимое
• Упорядочить по — дайте пользователям возможность упорядочивать отзывы по:
  • Самый последний
  • Высший рейтинг
  • Самый низкий рейтинг
• Начальное количество отзывов — количество отображаемых отзывов.
• Загрузить больше — укажите возможность загрузки большего количества отзывов.

Отзывы по блокам товаров и категорий

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

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

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

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

Получите максимум от своего интернет-магазина с блоками WooCommerce

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

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

Будьте в курсе последних блоков для WooCommerce