Полное руководство по блокам WooCommerce

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

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

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

Что такое блок WooCommerce?

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

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

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

Список функций блока WooCommerce

После понимания, что такое блок WooCommerce, далее мы рассмотрим каждую предоставляемую функцию по отдельности:

• Все товары: Отображает все товары магазина в виде сетки.
• Фильтры активных товаров: Отображает активные фильтры товаров в виде списка или чипов (похожих на кнопки).
• Все отзывы: Отображает все отзывы о товарах.
• Самые продаваемые товары: Отображает самые продаваемые товары в виде сетки.
• Оформление заказа: Отображает форму, позволяющую покупателям завершить оформление заказа.
• Корзина: Отображает корзину покупок.
• Избранная категория: Выделяет определенные категории товаров вместе с кнопками призыва к действию.
• Рекомендуемый товар: Отображает выбранные рекомендуемые товары.
• Фильтр по цене: Отображает диапазон цен, по которому покупатели могут фильтровать товары. Вы также можете включить редактируемый диапазон цен, нажав кнопку или текст здесь.
• Фильтр по наличию: Позволяет фильтровать товары по статусу наличия на складе. Эта функция предоставляет возможность отображать товары в наличии, отсутствующие на складе или заказанные.
• Фильтр по рейтингу: Позволяет покупателям фильтровать товары по рейтингу.
• Фильтр по атрибуту: Фильтрует товары по размеру или цвету.
• Отобранные вручную товары: Отображает отобранные вручную товары в виде сетки, позволяя вам выбрать, какие товары отображать конкретно.
• Мини-корзина: Предоставляет краткий обзор корзины покупок.
• Новейшие товары: Показывает самые последние товары, расположенные в виде сетки. Их можно настроить, добавляя или удаляя такие элементы, как название, цена, рейтинг и кнопка покупки.
• Товар со скидкой: Отображает товары, которые сейчас продаются со скидкой, в виде сетки, и их можно настроить, добавляя или удаляя такие элементы, как название, цена, рейтинг и кнопка покупки.
• Поиск товаров: Добавляет панель поиска, чтобы облегчить клиентам поиск товаров.
• Товары по метке: Отображает товары с определенными метками/ярлыками в виде сетки.
• Товар по атрибуту: Отображает товары с определёнными атрибутами (цвет, размер и т. д.) в виде сетки.
• Товары по категориям: Отображает товары по категориям в виде сетки.
• Обзор по товарам: Отображает отзывы, сгруппированные по товарам.
• Обзор по категориям: Отображает обзоры товаров из определенных категорий.
• Отдельный товар: Отображает подробный просмотр отдельного товара.
• Товары с самым высоким рейтингом: Отображает товары с самыми высокими рейтингами в виде сетки.

Как использовать блок сетки товаров в WooCommerce

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

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

2. В левой панели навигации нажмите кнопку (+), прокрутите вниз до раздела WooCommerce и выберите «сетка товаров».

3. Затем, чтобы настроить блок, перейдите на правую панель.

В этой панели вы можете настроить несколько параметров, включая:

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

Как добавить избранные товары на вашу страницу

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

Чтобы добавить блок избранного товара, выполните следующие действия:

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

2. Нажмите кнопку "+" на панели инструментов блока, чтобы открыть список блоков, затем найдите и выберите "Избранный товар".

3. Выберите товары, которые хотите выделить, затем нажмите "Готово".
4. Чтобы настроить внешний вид блока, нажмите "Настройки". В панели настроек вы можете изменить несколько параметров, включая:

• Показать или скрыть описание товара и цену.
• Настройте отображение медиа (изображение и видео).
• Добавьте альтернативный текст для изображений товаров.
• Выберите цвет наложения блока.
• Настройте непрозрачность блока.

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

Как добавить блоки фильтров в WooCommerce

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

Чтобы добавить блок фильтра, выполните следующие действия:

1. Откройте страницу или запись, где вы хотите разместить блок фильтра.
2. Определите желаемое место для размещения блока фильтра.
3. На панели инструментов редактора блоков нажмите кнопку "+" и найдите параметры фильтра WooCommerce, такие как фильтр по цене, фильтр по наличию, фильтр по атрибутам и фильтр по рейтингу.

Теперь давайте обсудим каждый доступный тип фильтра. 

Добавление фильтра по цене

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

Добавление фильтра по атрибуту

Блок фильтра атрибутов товаров позволяет пользователям фильтровать товары по таким атрибутам, как цвет и размер. Вы можете выбрать атрибуты, которые хотите использовать, из доступного списка. Его отображение может быть в виде списка или выпадающего меню. Вы также можете настроить тип запроса: И или ИЛИ. Другие возможности включают отображение количества товаров, выбор уровня заголовка, добавление кнопок и выбор фильтра.

Добавление фильтра по наличию

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

Блоки корзины и оформления заказа

Блок корзины добавляет отображение корзины на вашу страницу. Вы можете включить калькулятор стоимости доставки, выбрать ссылку для кнопки оформления заказа и настроить отображение в тёмном режиме. Этот блок также предоставляет уведомление о том, что вы можете установить страницу как страницу корзины по умолчанию в настройках WooCommerce. Также включена ссылка для отправки отзыва.

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

Как настроить страницу магазина на WooCommerce

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

1. Создайте новую страницу и назовите её "Магазин".

2. Добавьте блок поиска товаров.

3. Добавьте блок Список категорий товаров

Затем установите стиль отображения в раскрывающемся списке.

4. Добавьте фильтр по цене блок.
5. Добавьте избранные товары блок и выберите товары, которые хотите выделить. Настройте по необходимости.

6. Добавьте Все товары блок.

Установите количество столбцов и строк равным 2 и отключите опцию выпадающего списка сортировки.

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

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

После успешного создания пользовательской страницы магазина с помощью WooCommerce Blocks вы можете начать продавать свои физические и цифровые товары. Особенно для цифровых товаров крайне важно добавить плагин для скачивания файлов, такой как WP File Download Addon.

Этот плагин позволяет продавать цифровые товары для скачивания в WooCommerce. WP File Download Addon упрощает управление файлами и категориями файлов для цифровых товаров WooCommerce. Вы можете быстро создавать множество цифровых товаров для скачивания, связанных с одним или несколькими файлами.

Кроме того, этот плагин интегрируется с Dropbox, Google Drive, Microsoft OneDriveи функцией Social Locker . Вы можете предоставлять файлы из этих облачных сервисов в качестве цифровых загрузок WooCommerce с сильно ограниченным доступом через облачные API-коннекторы.

С дополнением WP File Download продажа цифровых товаров в вашем интернет-магазине WooCommerce стала более доступной и эффективной. После создания магазина с помощью блоков WooCommerce этот плагин идеально дополняет продажу вашего цифрового контента.

Заключение

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

После создания интернет-магазина следующим шагом является продажа физических и цифровых товаров. Вы можете использовать плагин WP File Download Addon, чтобы продавать цифровые товары с помощью WooCommerce, такие как электронные книги, программное обеспечение или мультимедийный контент.

Дополнение WP File Download доступно начиная с $49 в год, и им пользуются более 60 000 участников. Так чего же вы ждете? Присоединяйтесь к нам для лучших продаж цифровых продуктов!