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

Клиенты часто будут приходить в ваш магазин WooCommerce с установленным бюджетом. Они подумают: «Я могу потратить только X долларов, поэтому мне нужно найти идеальное решение». Заставлять пользователей переходить страницу за страницей продуктов, пока они не найдут тот, который соответствует их бюджету, может быть утомительно. Вот где пригодится блок « Фильтровать товары по цене» WooCommerce.

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

Давайте приступим!

Как добавить фильтр товаров по цене блока WooCommerce к вашему сообщению или странице

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

Вместе эти два блока составляют идеальную комбинацию для главной страницы вашего магазина. Имея это в виду, откройте редактор блоков и сначала поместите блок « Все продукты »:

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

Пока мы не собираемся возиться с этими настройками. Вместо этого выберите вариант добавления нового блока над элементом « Все продукты ». Найдите блок « Фильтровать товары по цене »:

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

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

Фильтровать товары по цене Настройки и параметры блока WooCommerce

Блок « Фильтровать товары по цене » не предлагает широкого набора настроек. Однако вы можете настроить некоторые аспекты того, как блок выглядит и работает.

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

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

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

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

Советы и рекомендации по эффективному использованию блока фильтров по цене WooCommerce

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

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

Блок « Фильтровать товары по цене » уже содержит идентифицирующий заголовок «Фильтровать по цене». Этот заголовок идеально подходит для большинства магазинов, как и его уровень H3 по умолчанию. Мы рекомендуем использовать более низкие уровни заголовков только в том случае, если на странице есть другие элементы H3, которые имеют приоритет.

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

Что касается добавления кнопки подтверждения, мы оставляем этот выбор за вами. Включение кнопки означает, что сетка товаров не будет обновляться автоматически при использовании ползунка « Фильтровать товары по цене» . Однако это может быть допустимым компромиссом, если ваш сайт уже страдает от проблем с производительностью.

Часто задаваемые вопросы о блоке «Фильтровать товары по цене» WooCommerce

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

Почему не работает фильтр товаров по ценовому блоку?

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

Могу ли я редактировать минимальные и максимальные цены в фильтре продуктов по цене?

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

Вывод

Элемент « Фильтровать товары по цене» — это блок WooCommerce, который работает только тогда, когда вы соединяете его с другим элементом. Другие блоки, которые работают только в паре, включают «Фильтрация товаров по атрибуту» и « Активные фильтры товаров ».

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

У вас есть вопросы о том, как использовать блок « Фильтровать товары по цене »? Давайте поговорим о них в разделе комментариев ниже!

Избранное изображение Бахтияра Зейна / Shutterstock.com