Как фильтровать продукты Woocommerce по пользовательскому атрибуту

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

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

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

Итак, в этом уроке я покажу вам, как фильтровать продукты woocommerce по пользовательским атрибутам. Чтобы добиться этого, вам нужно

1. Загрузите смарт-фильтры Jet.
2. Войдите в административную панель WordPress -> Плагины -> Добавить новый -> Загрузить
3. Активируйте плагин с помощью лицензионного ключа
4. Затем создайте предустановку по умолчанию для атрибутов.
5. Выберите таксономию и термины, которые будут использоваться для создания фильтров.
6. Выберите тип фильтра. Например, флажок, радио или выбор.
7. Выберите количество столбцов
8. Выберите «да», чтобы активные фильтры отображались в виде меток.
9. Выберите положение активных фильтров
10. Скопируйте шорткоды
11. Вставьте его туда, где вы хотите показать фильтры, в основном боковые панели.

Вот как создавать фильтры в woocommerce, используя пользовательские атрибуты.

Что такое атрибут?

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

Наиболее широко используются следующие типы атрибутов:

• Цвет продукта
• Размер
• Масса
• Материал
• Рейтинги
• Бренд
• или настраиваемый фильтр на основе вашего продукта

Если вам нужна дополнительная помощь в настройке атрибутов, фильтров и вариаций, вам помогут сервисы GloriousThemes.

Чем это может быть вам полезно?

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

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

Если мне придется вручную просмотреть все ваши 1000 футболок, чтобы найти футболку с -> XL + черный + хлопок . Тогда я лучше пойду в обычный магазин, чем прокручивать 1000 футболок.

Видите, это проблема, верно.

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

Это не только экономит время клиента, но и помогает ему находить новые продукты на основе критериев поиска.

Видеоурок

Доступны различные типы фильтров

Причина, по которой мне нравятся Jet Smart Filters, заключается в том, что они предоставляют множество фильтров и потрясающие умопомрачительные дизайны, которые улучшают впечатление покупателя, а также внешний вид магазина.

Пока я использовал это для своего магазина, у меня было ощущение, что у меня есть свой собственный Amazon .

Вот список фильтров, которые этот плагин позволяет мне создавать.

• Категория
• Ярлык
• Цена
• Цвет
• Размер
• Рейтинг
• Бренд
• товары со скидкой
• товары в наличии

Разве эти фильтры не ошеломляют ? Загрузите Jet Smart Filter прямо сейчас.

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

Чтобы создать свои фильтры WooCommerce, используйте фильтры продуктов YITH Ajax.

Посетите https://crocoblock.com/plugins/jetsmartfilters/ и загрузите плагин. Затем войдите в свою учетную запись crocoblock и загрузите лицензионный код.

Примечание . Для работы этой функции фильтра вам потребуется версия Elementor Pro .

После того, как вы загрузили zip-файл, перейдите в WP-Admin -> Плагины -> Добавить новый -> Загрузить .

Установите и активируйте плагин.

Затем перейдите в Боковая панель администратора -> Crocoblock -> Лицензия , вставьте код лицензии и свой адрес электронной почты и активируйте лицензию. Как только он был активирован.

Перейдите в Crocoblock -> Настройки плагина Jet и включите настройки, которые вы хотите использовать.

« Сохранить изменения » вступит в силу автоматически.

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

Итак, как только вы обновили все настройки и готовы создать свой собственный фильтр, вам нужно посетить Боковую панель администратора -> Смарт-фильтры -> Добавить новый .

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

1. Добавить заголовок : — это заголовок фильтра, который поможет вам легко найти фильтр и добавить его на страницу WooCommerce. сделайте его осмысленным, чтобы вы могли легко понять, что делает фильтр. Это не видно публике.
2. Метка фильтра: — это имя фильтра, которое появится, когда вы добавите его в качестве виджета. Это будет видно публике.
3. Метка активного фильтра: — это имя фильтра, когда этот фильтр активен и используется. Это также видно публике.
4. Тип фильтра: — выберите нужный тип фильтра, установите флажок «Мне нравится», выберите поля, радио, ползунок и несколько других функций.
5. Переменная запроса: - Если вы хотите запросить продукты на основе определенного значения, используйте это. В основном рекомендуется для продвинутых пользователей.

Далее нажмите « Опубликовать ».

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

Как включить фильтр по товарам

Как только вы создали фильтр, половина работы сделана.

Да, наполовину Сделано.

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

Фильтр будет работать в следующих случаях:

• Elementor Pro Архивы Продукт
• Архивы Элементор Про
• Портфолио Elementor Pro
• Сообщения Elementor Pro
• Продукты Элементор Про
• Реактивный двигатель
• Календарь JetEngine
• Сетка продуктов JetWooBuilder
• Список продуктов JetWoobuilder
• Архивы WooCommerce от JetWooBuilder
• Шорткоды WooCommerce

Итак, простой способ, который я нашел, — это Elementor Pro. Чтобы загрузить elementor Pro, посетите https://elementor.com/pro/.

После того, как вы скачали и активировали Elementor Pro. Перейдите в WP-Admin -> Шаблоны -> Конструктор тем -> Архив продуктов .

Дайте правильное имя и нажмите « Создать шаблон ».

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

Нажмите на кнопку «вставить».

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

Далее нам нужно настроить фильтрующий элемент

Настройка элемента струйного фильтра с помощью Elementor.

После того, как вы разместили элемент Jet Smart Filters на боковой панели, настройки фильтров появятся на elementor.

Я предполагаю, что вы уже работали с elementor раньше, так как процесс аналогичен всем элементам.

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

Следующий шаг очень важен. В поле с надписью « Этот фильтр для » вам нужно выбрать продукты Elementor Pro Achives .

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

Нажмите «Показать кнопку «Применить», а затем нажмите кнопку «Обновить» Elementor.

Вот и все.

Теперь ваш фильтр активен и готов к использованию.

Где скачать плагин фильтра?

Для работы смарт-фильтра для WooCommerce необходимы плагины.

• Elementor Pro: помогает создавать страницы и добавлять виджеты с помощью перетаскивания. Не написав ни строчки кода. Нажмите здесь, чтобы загрузить Elementor Pro .
• Jet Smart Filters: этот плагин добавляет функциональность для включения пользовательских фильтров с использованием атрибутов, и все эти фильтры красиво оформлены. Для работы нужен Elementor Pro. Щелкните здесь, чтобы загрузить смарт-фильтры Jet .

Нужна профессиональная помощь?

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

Их профессиональная команда разберется с этим в настоящее время.

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

Вывод

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

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

И все эти сложные на вид вещи могут быть достигнуты с помощью Elementor Pro, который поможет вам добавить все эти функции с помощью функции перетаскивания.

Если у вас есть какие-либо вопросы, вы можете оставить комментарий ниже или связаться с нами. Вы также можете подписаться на наш YouTube и поставить лайк и подписаться на нас в Facebook, Twitter и Instagram.