Как создать боковые панели с фильтрами для страниц Divi WooCommerce

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

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

Стандартные боковые панели WooCommerce

WooCommerce включает несколько фильтруемых виджетов.

• Фильтровать товары по атрибуту
• Фильтровать товары по цене
• Фильтровать товары по рейтингу

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

WordPress темы

Фильтруемые виджеты отлично работают на страницах, созданных с использованием обычных тем WordPress. The Twenty Seventeen без проблем показывает их на боковой панели. Я использую образцы данных WooCommerce, которые включают цвета и цены. Фильтр продуктов по атрибутам и цене выделяется.

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

Строители WordPress

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

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

Этот был построен с помощью Elementor. Я добавил боковую панель над товарами. Он показывает текстовый виджет, но не фильтры. Я также опубликовал страницу для просмотра вживую, но никакой разницы не было.

Вот Divi Builder с той же боковой панелью. Использование плагина или темы Divi Builder дало тот же результат. Я опубликовал страницу для просмотра в реальном времени, но фильтры по-прежнему не отображались.

Отображение фильтров WooCommerce на боковых панелях Builder

К счастью, есть простой способ показать фильтр продукта WooCommerce на боковой панели, даже если вы создаете страницу продукта с помощью конструктора страниц. Нам нужен плагин под названием WooCommerce Product Filter.

Themify - Фильтр продуктов WooCommerce

WooCommerce Product Filter - это бесплатный плагин от Themify, который работает иначе, чем стандартные виджеты фильтров продуктов WooCommerce. Легко создавайте несколько комбинаций фильтров. Создайте форму с помощью конструктора форм перетаскивания. Установите вертикальный или горизонтальный макет, выберите количество столбцов и стиль, соответствующий вашему веб-сайту. Он показывает результаты поиска в реальном времени и включает в себя множество опций. Он интуитивно понятен в использовании и работает со всеми конструкторами тем.

Создание нового фильтра продукта

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

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

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

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

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

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

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

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

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

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

Фильтры теперь отображаются на страницах магазина, созданных с помощью конструкторов. Вот страница с Divi Builder.

Вот фильтр, показанный на странице, созданной Beaver Builder в теме Twenty Sixteen.

Вот фильтр с Elementor в теме Twenty Seventeen. Здесь используется горизонтальная компоновка.

Использование Themify - Фильтр продуктов WooCommerce с макетами Divi

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

Это вертикальная компоновка. Он прекрасно вписывается в дизайн макета.

Я установил кнопки в соответствии со стилем макета. К сожалению, мне не удалось настроить кнопку поиска.

Вот горизонтальная раскладка. В этом примере по-прежнему используется макет 3/2 столбца, который я выбрал для вертикального фильтра.

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

Для этого я разместил фильтр под модулем магазина.

Вот фильтр над модулем магазина.

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

Фильтрация продуктов WooCommerce

Чтобы выполнить поиск, пользователь нажимает кнопки, устанавливает флажки и перемещает ползунок, чтобы отфильтровать то, что он ищет. Они также могут ввести заголовок. Когда они готовы, они просто нажимают кнопку поиска.

результаты поиска

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

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

Конечные мысли

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

Я хотел бы иметь больше контроля над отображением результатов. Например, было бы полезно разместить шорткод там, где будет отображаться результат. Это позволит разместить результаты в любом месте страницы, а не внизу. Это позволит настраивать нижние колонтитулы, область результатов на странице и т. Д. Я также хотел бы иметь еще несколько вариантов стиля. В основном я хочу стилизовать кнопку поиска.

Themify - WooCommerce Product Filter - отличный выбор, если вам нужен бесплатный плагин для добавления фильтра продуктов на ваши страницы Divi Builder.

Ждем вашего ответа. Вы пробовали плагин Themify - WooCommerce Product Filter со страницами магазинов, созданными с помощью Divi Builder? Расскажите нам о своем опыте в комментариях.

Избранные изображения через Макса Грибоедова / shutterstock.com