Как настроить фильтры по классам доставки товаров WooCommerce

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

Но и условия доставки тоже имеют значение, особенно когда для одного продукта предусмотрена бесплатная транспортировка, а для другого — платная экспресс-доставка.

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

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

В этой статье я покажу вам, как настроить фильтры по классу доставки товаров в WooCommerce.

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

Стоимость доставки — одна из главных причин, по которой покупатели бросают свои корзины. Я видел это на собственном примере в магазинах, которые предлагают как товары с бесплатной доставкой, так и с платной.

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

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

Это также выгодно для магазинов, предлагающих различные вариации доставки, такие как стандартная, экспресс или самовывоз.

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

Настройка фильтров по классам доставки в WooCommerce

Самый простой способ добавить фильтры по классам доставки в WooCommerce — использовать плагин, такой как WPFilters.

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

Вот что можно сделать с помощью WPFilters:

• Фильтрация по классу доставки. Дайте покупателям возможность сужать выбор по классу доставки, например, бесплатная, экспресс или стандартная.
• Несколько типов фильтров. Отображайте классы в виде флажков или выпадающего списка. Также есть возможность показывать фильтры в виде ползунка или списка с переключателями, в зависимости от дизайна магазина.
• Отображение количества товаров. Показывайте посетителям точное количество продуктов, относящихся к каждому классу доставки, до того, как они применят фильтр.
• Гибкое размещение. Встраивайте фильтры на любую страницу, в сайдбар или в специальную область виджетов на странице вашего магазина ВуКомерс.

Итак, давайте посмотрим, как вы можете использовать WPFilters для добавления фильтров классов доставки в интернет -магазин.

Шаг 1: Установка и активация WPFilters

Сначала нужно посетить сайт SearchWP и зарегистрировать аккаунт WPFilters.

После входа в систему перейдите на вкладку «Загрузки» в дашборде вашего аккаунта.

Затем нажмите «Скачать WPFilters» и сохраните ZIP-файл на свой компьютер. Я также рекомендую скопировать лицензионный ключ сейчас, чтобы он был под рукой в дальнейшем.

После этого вам нужно будет загрузить и установить плагин на сайт.

Шаг 2: Создание нового элемента фильтра

Чтобы создать фильтр по классу доставки, нужно перейти в раздел «WPFilters» > «Элементы» в дашборде ВордПресс.

Здесь просто нажмите кнопку «Добавить новый», чтобы открыть конструктор фильтров.

Затем перейдите в раздел «Поля фильтра» и выберите тип поля. Для фильтров по классу доставки я рекомендую использовать «Флажок», так как он позволяет покупателям выбирать сразу несколько вариантов доставки.

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

Шаг 3: Подключение к источнику данных о классах доставки

Далее прокрутите страницу вниз до раздела «Источник данных».

Затем кликните раскрывающийся список и найдите пункт «Класс доставки товара» в списке таксономических параметров WooCommerce.

При выборе этого параметра фильтр напрямую связывается с классами доставки, настроенными в WC. Любой класс доставки, созданный в вашем магазине, автоматически отобразится в качестве варианта фильтра.

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

Шаг 4: Кастомизация параметров фильтра

После подключения источника данных пришло время кастомизировать внешний вид и поведение фильтра на сайте.

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

Параметр «Горизонтальная компоновка» хорошо подходит, если размещаете фильтр в верхней части сетки товаров, а не в сайдбаре.

Теперь прокрутите вниз до раздела «Элементы». Здесь можете включить параметр «Количество элементов», чтобы покупатели могли видеть, сколько товаров содержит каждый класс доставки, прежде чем кликнуть.

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

Шаг 5: Отображение фильтра на странице магазина WooCommerce

Теперь, когда фильтр создан, пришло время разместить его там, где покупатели смогут его увидеть.

Вы можете нажать кнопку «Вставить» в правом верхнем углу редактора фильтра. Появится попап с 3 вариантами: блок Gutenberg, шорткод или PHP-код для разработчиков.

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

Для этого перейдите в раздел «Внешний вид» > «Виджеты» в дашборде WP.

Затем прокрутите страницу до раздела «Сайдбар» и нажмите значок «+», чтобы добавить новый блок. Здесь найдите элемент «WPFilters» и добавьте его в сайдбар.

В панели настроек справа нажмите раскрывающийся список «Выбрать элемент» и выберите только что созданный фильтр классов доставки.

Когда закончите, нажмите «Обновить».

Шаг 6: Протестируйте фильтр классов доставки

Последний шаг — перейти на страницу вашего магазина WooCommerce и протестировать фильтр в действии.

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

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

Именно такой опыт заставляет покупателей дольше оставаться на сайте.

FAQ

Заключение

Я надеюсь, что это руководство помогло вам узнать, как настроить фильтры классов доставки товаров в WooCommerce.