Запуск магазина WooCommerce подразумевает управление сотнями товаров. Без надлежащей фильтрации магазин превращается в огромный каталог, который неудобно просматривать. Когда покупатели не могут найти ту самую черную толстовку среднего размера в своем ценовом диапазоне, они уходят.
Вот почему мы тестировали WBW Product Filter в течение двух недель. Плагин добавляет необходимые фильтры продуктов по цене, размеру, цвету и любым другим атрибутам продукта, позволяя клиентам сузить круг поиска именно до того, что им нужно.
Из этого практического обзора вы узнаете, как WBW Product Filter работает в реальном магазине, что он делает хорошо, а чего не хватает.
Основные характеристики WBW Product Filter
WBW Product Filter — это плагин WordPress, который помогает владельцам магазинов WooCommerce добавить и настроить поиск продуктов. Плагин добавляется в боковую панель магазина или любую область виджетов, и при этом не нужно трогать код, чтобы настроить его.
Можно попробовать бесплатную версию плагина или перейти на премиум. Бесплатная версия обрабатывает базовую фильтрацию, а премиум добавляет такие функции, как мгновенные результаты поиска и плавающие фильтры.
Наше внимание привлекло то, как плагин думает о том, куда смотрят клиенты. Он размещает фильтры продуктов на левой стороне страницы, где, как показывают исследования, 70% покупателей смотрят в первую очередь.
Основные характеристики плагина:
- Фильтровать продукты по цене, ценовому диапазону, категориям, тегам и атрибутам.
- Живой поиск на основе AJAX для мгновенных результатов.
- Полная совместимость с Elementor.
- Адаптивный дизайн для мобильных устройств.
- Несколько вариантов отображения (переключатели, флажки, раскрывающиеся меню).
- Настраиваемое размещение.
- Поддержка пользовательских полей и метазначений.
Начало работы: установка и настройка плагина
Давайте посмотрим, как запустить WBW Product Filter. Мы начнем с установки, а затем покажем начальные настройки, которые наиболее важны.
Перейдите в Плагины > Добавить новый в панели управления WordPress и найдите «WBW Product Filter». Нажмите Установить, затем Активировать.
После активации найдите новое меню «WBW Product Filter» в боковой панели инструментов WordPress. Щелкните на него и перейдите в «Настройки».
Откроются несколько важных опций для настройки. Самая важная из них — индексация продуктов; она помогает работать быстрее, создавая индекс всех продуктов. Нажмите «Начать индексацию параметров продуктов». Это действие можно запустить в фоновом режиме или запланировать на позже.
Другие ключевые настройки включают в себя:
- Параметры отображения на мобильных устройствах (например, перемещение фильтров боковой панели наверх).
- Настройки отображения продукта.
- Обновления AJAX для мгновенных результатов (лучше изначально отключить эту функцию).
- Сообщения, когда продукты не найдены.
- Автоматические обновления индекса после изменения продукта.
Практический опыт использования плагина WBW Product Filter
А теперь самое интересное. Давайте посмотрим, как можно использовать WBW Product Filter, чтобы сделать процесс покупок для клиентов более удобным.
Создание первого фильтра продуктов
WBW Product Filter помогает клиентам найти именно то, что они хотят найти в вашем магазине WooCommerce. Он позволяет фильтровать продукты по любым критериям — цене, категориям, тегам, атрибутам и даже настраиваемым полям.
Как начать:
- Перейдите в раздел «Фильтры» на панели управления WordPress.
- Нажмите «Добавить новый фильтр».
- Дайте название (например, «Фильтр основного магазина»)
- Нажмите «Создать», чтобы открыть конструктор.
Вы увидите три основные вкладки: Фильтры, Дизайн и Расширенные. Первая вкладка — это место, где создаются все параметры поиска, Дизайн управляет внешним видом фильтров, а Расширенные позволяет добавлять пользовательские CSS или JavaScript.
Читать также:
WooCommerce против Shopify — все, что нужно знать.
Понимание возможностей WBW Product Filter
С помощью этого плагина клиенты смогут находить продукты, используя любую комбинацию:
- Цена (с использованием точных значений или пользовательских диапазонов).
- Категории и теги для удобной навигации.
- Состояние запасов (просмотр того, что есть в наличии, отсутствует или находится в ожидании заказа).
- Распродажа и избранные продукты.
- Рейтинги по звездам для качественных фильтров.
- Атрибуты продукта, такие как размер, цвет и материалы.
- Пользовательские мета-поля для специализированной фильтрации.
- Подробная информация о продукте, например размеры и вес.
- Статус загружаемого и виртуального продукта.
Каждый тип фильтра полностью настраиваемый. Вы выбираете, как он отображается — флажки, радиокнопки, раскрывающиеся списки, ползунки или цветные значки. Вы можете сделать фильтрацию сворачиваемой, скрыть определенные параметры или расположить их в любом порядке с помощью перетаскивания.
Примеры фильтров продуктов
В качестве примера настроим два основных фильтра, которые необходимы каждому магазину: цену и атрибуты продукта.
Настройка фильтрации цен
Фильтр цен будет скорее всего первым, что вы захотите добавить в свой магазин. В конструкторе нажмите кнопку «Добавить фильтр» вверху и выберите «Цена» из списка параметров. Откроется панель настроек цен.
Теперь нужно настроить работу:
- Добавьте заголовок, например «Filter по цене», и описание.
- Выберите способ отображения метки: всегда открыто, закрыто или без метки.
- Выбирайте между полями ввода, ползунком цен или текстовыми подсказками.
- Установите отображение валюты и положение (до/после цены).
Можно выбрать скин фильтра (по умолчанию, плоский, большой, современный), чтобы он соответствовал дизайну вашего магазина. Все эти параметры отображаются прямо на панели настроек, с предварительным просмотром в реальном времени того, как будет выглядеть выбор цены.
Настройка фильтра атрибутов
Добавление фильтрации атрибутов работает аналогичным образом — начните с нажатия «Добавить фильтр» и выбора «Атрибут» из списка. Это откроет панель настроек атрибутов, где вы настроите такие позиции, как размер, цвет или любые другие вариации продукта.
Какие ключевые параметры нужно настроить:
- Выберите атрибуты (размер, цвет и т. д.).
- Добавьте понятное название и выберите способ отображения метки.
- Выберите стиль отображения: раскрывающийся список, флажки или образцы цвета.
- Выберите, следует ли скрывать атрибуты без товаров.
- Установите порядок: по алфавиту или пользовательский.
Стиль отображения особенно важен — раскрывающиеся списки отлично подходят для простых параметров выбора, таких как размеры, в то время как флажки лучше подходят, когда клиенты хотят выбрать несколько вариантов. Для цвета визуальные образцы делают выбор интуитивно понятным. Вы можете включить количество товара, чтобы показать, сколько товаров соответствует каждому атрибуту.
Совместимость с Elementor
Если для создания своего магазина используется Elementor, плагин интегрируется с ним напрямую. Это означает, что можно добавлять и настраивать фильтры продуктов, не выходя из редактора Elementor.
Как использовать фильтры продуктов в Elementor
Сначала убедитесь, что Elementor и WBW Product Filter установлены и активированы. Затем при редактировании любой страницы в Elementor вы найдете виджет WooFilter в разделе WooCommerce. Перетащите его туда, где хотите отображать фильтры.
Виджет предоставляет три основные вкладки для работы:
- Фильтры: добавьте и настройте типы (цена, категории, атрибуты).
- Параметры: управление работой фильтров продуктов, включая размещение кнопок и загрузку настроек.
- Дизайн: настройте внешний вид в соответствии с магазином.
Что хорошо в использовании фильтров в Elementor, так это то, что видны изменения в реальном времени. Независимо от того, настраиваете ли вы макеты, меняете стили кнопок или настраиваете дизайн, вы получите живой предварительный просмотр того, как это будет выглядеть в магазине.
Плагин работает как с бесплатной, так и с профессиональной версиями Elementor и совместим с популярными дополнениями, такими как Element Pack Pro и Ultimate Addons для Elementor.
Синхронизация нескольких фильтров продуктов
Если у вас достаточно большой магазин, то может понадобиться, чтобы разные наборы фильтров работали вместе. Например, необходимо разместить один на боковой панели, а другой — над продуктами. Синхронизация нескольких фильтров позволяет им работать вместе, обновляясь в режиме реального времени по мере того, как клиенты делают выбор.
Чтобы это настроить:
- Перейдите в Параметры -> Содержимое в настройках фильтра.
- Включить «Filter synchronization».
- Повторите для всех фильтров, которые хотите синхронизировать.
Теперь они будут работать вместе автоматически.
Плавающий режим
Хотите, чтобы фильтры продуктов отображались во всплывающем окне, а не занимали постоянное место на странице? Именно это и делает Плавающий режим. Эта опция находится на вкладке Дизайн в Плавающем режиме — просто выберите «Использовать Плавающий режим», чтобы начать использование.
С помощью плавающего режима можно настроить:
- Отображение на устройстве: показывать на всех устройствах, только на мобильных устройствах или только на настольных компьютерах
- Стиль кнопки: используйте кнопку плагина или создайте собственный триггер.
- Внешний вид всплывающего окна: настройте заголовок, фон, границы и анимацию
- Размещение: выберите, где и как будет отображаться всплывающее окно фильтра.
Для кнопки плагина можно настроить каждую деталь — от использования текста или собственного значка до выбора между фиксированными или плавающими позициями. Разработчики также могут создавать пользовательские триггеры с помощью JavaScript, чтобы открывать фильтры проуктов из любого элемента на странице.
Версии плагина
WBW Product Filter поставляется в бесплатной и премиум-версиях. Бесплатная версия включает в себя основные возможности фильтрации — можно настроить базовые фильтры цен и категорий, интегрировать их со стилем вашей темы и использовать конструктор drag-and-drop.
Для более продвинутых потребностей премиум-версии открывают такие функции, как AJAX live search для мгновенных результатов, расширенные скины ценовых фильтров и несколько стилей отображения. Здесь предлагаются также вариант рейтинга звезд и больше вариантов сортировки, помогающие клиентам найти именно то, что они хотят.
Все версии поставляются с основными преимуществами — настройка методом перетаскивания, совместимость с мобильными устройствами и основные типы фильтров продуктов. Премиум-лицензии включают пожизненные обновления и поддержку.
Вашим клиентам не придется продираться через страницы с продуктами, чтобы найти то, что они хотят. WBW Product Filter помогает сузить круг поиска до того, что именно они ищут.
Вы можете начать с бесплатной версии и попробовать базовую фильтрацию, а при необходимости перейти на премиум-версию, если необходимы такие функции, как мгновенный поиск и всплывающие фильтры. Настройка проста, и все качественно работает на мобильных устройствах.
Источник: wplift.com
Комментарии к записи: 0