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

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

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

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

Что такое WooCommerce Block?

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

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

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

Список функций WooCommerce Block

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

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

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

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

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

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

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

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

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

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

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

Чтобы добавить блок Featured Product, выполните следующие шаги:

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

2. Выберите кнопку «+» на панели инструментов блока, чтобы открыть список блоков, затем найдите и выберите «Featured Product».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создайте свой онлайн-магазин с WooCommerce Block и продавайте свои товары

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

Этот плагин позволяет продавать цифровые скачиваемые продукты в WooCommerce. Дополнение WP File Download делает управление файлами и категориями файлов для цифровых продуктов 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 Addon доступен начиная с $49 в год и используется более чем 60 000 участников. Итак, чего вы ждете? Присоединяйтесь к нам для улучшения продаж цифровых продуктов!