Что это такое и как их использовать

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

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

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

Оглавление:

Введение в блоки фильтров продуктов WooCommerce

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

Вот краткий обзор бесплатных блоков фильтра продуктов WooCommerce:

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

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

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

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

Блоки фильтров продуктов WooCommerce могут значительно улучшить взаимодействие с пользователем (UX) вашего интернет-магазина. Если у вас есть обширный каталог продуктов, клиенты могут часами просматривать ваши товары в поисках тех, которые соответствуют их потребностям. Тем не менее, они, скорее всего, расстроятся и перейдут к покупкам в другом месте.

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

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

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

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

Вы можете найти все эти блоки в WordPress, нажав кнопку + , чтобы вставить новый блок и выполнив поиск «Фильтр WooCommerce:»

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

Теперь давайте посмотрим, как использовать блоки фильтров продуктов WooCommerce. В качестве примера мы будем использовать элемент « Фильтровать товары по атрибуту» .

Шаг 1. Добавьте атрибуты к своим продуктам WooCommerce.

️ Примечание . Для других фильтров (таких как цена или акции) вам не нужно настраивать какие-либо атрибуты.

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

Начните с перехода в « Продукты » > « Атрибуты » на панели управления WordPress. Здесь вы можете создавать новые классификации для своих продуктов. Как видите, в нашем интернет-магазине уже есть Цвет и Размер :

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

Затем откройте свои продукты, чтобы добавить их таксономии. Вы можете сделать это, перейдя в « Продукты »> «Все продукты» и щелкнув элемент.

Теперь прокрутите вниз до раздела « Данные продукта » и откройте меню « Атрибуты »:

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

Например, в нашем примере мы добавили красный цвет в качестве атрибута цвета для нашего продукта:

Когда вы добавите все свои переменные, нажмите Сохранить атрибуты . Теперь покупатели смогут находить товары с такими характеристиками через блок фильтра товаров WooCommerce.

Шаг 2. Вставьте блок фильтра товаров.

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

Во-первых, вам нужно добавить блок All Products на свою страницу. В противном случае WooCommerce не сможет фильтровать и отображать определенные элементы.

Вы можете сделать это, нажав кнопку + и выполнив поиск «все продукты». Выберите блок и добавьте его на свою страницу:

Затем найдите «Атрибут фильтра WooCommerce»:

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

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

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

Шаг 3: Настройте параметры блока

Затем вы можете настроить внешний вид блока фильтра продуктов WooCommerce. Просто щелкните блок « Фильтровать товары по атрибуту », а затем выберите значок шестеренки справа:

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

Вы также можете выбрать уровень заголовка для атрибутов вашего продукта. Значение по умолчанию — H3 , но вы можете выбрать от H2 до H6 в соответствии со стилистическими потребностями вашего магазина.

Если вы прокрутите вниз, вы должны увидеть некоторые дополнительные конфигурации в разделе «Настройки блока» :

Здесь вы можете выбрать тип запроса . Если вы выберете И , WooCommerce будет отображать только продукты, которые содержат все указанные атрибуты клиента. Между тем, опция Или покажет все элементы, которые имеют хотя бы один из атрибутов.

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

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

Вот и все! Ваш блок фильтра продуктов WooCommerce теперь готов к действию:

Просто сохраните и опубликуйте свои изменения. Теперь клиенты смогут фильтровать поиск товаров по определенным атрибутам.

Обзор плагинов фильтрации продуктов WooCommerce

Помимо бесплатных блоков WooCommerce, вы также можете получить доступ к сторонним плагинам, чтобы повысить гибкость настройки фильтров. Например, плагин WooCommerce Product Search содержит следующие параметры фильтра:

• Продукты: отображает коллекцию отфильтрованных продуктов. Этот блок может копировать страницу вашего магазина и отображать элементы, контролируемые другими блоками фильтров продуктов, на той же странице.
• Поиск: создает фильтрованную функцию поиска для вашего магазина WooCommerce.
• Категории: показывает товары, которые соответствуют определенным категориям, таким как тип одежды или пол.
• Атрибуты: Отображает товары с определенными атрибутами, такими как цвет, торговая марка, размер, форма, производитель или определенные функции.
• Теги: показывает продукты, которые соответствуют тегам продуктов, включая «рекомендуемые», «логотип» или «популярные».
• Цена: Отображает товары в пределах указанных ценовых параметров.
• Рейтинг: Представляет товары в соответствии с их средним рейтингом.
• Распродажа: отображаются только товары, которые продаются со скидкой.
• На складе: показывает только те товары, которые есть на складе.
• Сброс: позволяет клиентам сбросить параметры фильтра продукта. Затем они смогут увидеть все ваши доступные элементы или ввести новые настройки, чтобы настроить свой поиск.

В качестве альтернативы вы можете рассмотреть возможность использования плагина WOOF Products Filter for WooCommerce:

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

WooCommerce Product Filter от WooBeWoo — еще один отличный бесплатный вариант:

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

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

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

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

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

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