Фильтры товаров — важный элемент любого интернет-магазина на WordPress, позволяющий пользователям быстро находить нужные позиции по параметрам: категориям, цене, атрибутам и другим характеристикам. В этой статье разберём, как создать собственный настраиваемый фильтр товаров, используя WooCommerce и немного пользовательского кода. Это поможет сделать поиск по каталогу более удобным и повысить конверсию.
Почему стандартных фильтров WooCommerce часто недостаточно
WooCommerce из коробки предлагает базовые виджеты фильтрации по цене, атрибутам и категориям. Но у многих магазинов появляются требования, которые сложно реализовать стандартными средствами. Например:
- Фильтрация по пользовательским мета-полям или сложным условиям.
- Комбинирование нескольких фильтров с динамической подгрузкой результатов без перезагрузки страницы.
- Кастомный дизайн и расположение фильтров вне сайдбара.
В таких случаях приходится создавать собственные фильтры, которые учитывают бизнес-логику магазина и удобны для пользователей.
Выбор плагина для создания фильтров: обзор популярных решений
Перед тем как писать код, стоит рассмотреть готовые плагины. Они экономят время и часто покрывают большинство задач. Вот несколько популярных вариантов:
1. WOOF – Products Filter for WooCommerce
Очень мощный и гибкий плагин, который позволяет фильтровать по таксономиям, атрибутам, цене, мета-полям. Поддерживает AJAX, можно настроить шаблоны и отображение.
2. FacetWP
Платный плагин с расширенными возможностями фильтрации и очень быстрой работой. Подходит для больших каталогов.
3. Filter Everything
Поддерживает фильтрацию по любым пользовательским полям и таксономиям с AJAX. Есть бесплатная и платная версии.
Если же вы хотите точечно решить задачу и сделать фильтр под конкретные требования, то ниже пример, как реализовать кастомный фильтр с помощью кода.
Создаём кастомный фильтр товаров: пример реализации
Допустим, у нас есть магазин с товарами, у которых есть дополнительное мета-поле _wpexamples_color — цвет товара. Мы хотим сделать фильтр по цвету, который будет выводиться на странице каталога и показывать только товары выбранного цвета.
1. Добавляем значения цвета в товары
Для начала добавим мета-поле цвет в карточку товара. Можно использовать плагин Advanced Custom Fields или сделать вручную. Вот пример кода для добавления поля в админку WooCommerce:
add_action('woocommerce_product_options_general_product_data', 'wpexamples_add_color_field');
function wpexamples_add_color_field() {
woocommerce_wp_text_input(array(
'id' => '_wpexamples_color',
'label' => __('Цвет товара', 'wpexamples'),
'desc_tip' => 'true',
'description' => __('Введите цвет товара, например: красный, синий.', 'wpexamples')
));
}
add_action('woocommerce_process_product_meta', 'wpexamples_save_color_field');
function wpexamples_save_color_field($post_id) {
$color = isset($_POST['_wpexamples_color']) ? sanitize_text_field($_POST['_wpexamples_color']) : '';
update_post_meta($post_id, '_wpexamples_color', $color);
}Теперь при создании или редактировании товара можно указать цвет.
2. Выводим фильтр по цвету на фронтенде
Создадим простой селект в шаблоне архива товаров, который позволит выбрать нужный цвет:
function wpexamples_render_color_filter() {
// Получаем все цвета из товаров
global $wpdb;
$colors = $wpdb->get_col("SELECT DISTINCT meta_value FROM {$wpdb->postmeta} WHERE meta_key = '_wpexamples_color' AND meta_value != ''");
if(empty($colors)) return;
echo '<form method="GET" id="wpexamples-color-filter">';
echo '<select name="wpexamples_color" onchange="this.form.submit()">';
echo '<option value="">'.__('Выберите цвет', 'wpexamples').'</option>';
foreach($colors as $color) {
$selected = (isset($_GET['wpexamples_color']) && $_GET['wpexamples_color'] === $color) ? ' selected' : '';
echo '<option value="'.esc_attr($color).'"'.$selected.'>'.esc_html($color).'</option>';
}
echo '</select>';
echo '</form>';
}
add_action('woocommerce_before_shop_loop', 'wpexamples_render_color_filter', 20);Этот код выведет выпадающий список цветов над списком товаров, который будет отправлять выбранный цвет через GET-параметр.
3. Фильтруем товары по выбранному цвету
Добавим фильтр в основной запрос WooCommerce, чтобы показывать товары только с выбранным цветом:
function wpexamples_filter_products_by_color($query) {
if (!is_admin() && $query->is_main_query() && is_shop()) {
if (!empty($_GET['wpexamples_color'])) {
$color = sanitize_text_field($_GET['wpexamples_color']);
$meta_query = $query->get('meta_query');
if (!is_array($meta_query)) {
$meta_query = array();
}
$meta_query[] = array(
'key' => '_wpexamples_color',
'value' => $color,
'compare' => '='
);
$query->set('meta_query', $meta_query);
}
}
}
add_action('pre_get_posts', 'wpexamples_filter_products_by_color');Теперь при выборе цвета в фильтре будут отображаться только товары с заданным значением мета-поля.
Расширяем функционал фильтра: AJAX и мультирежим
Чтобы улучшить UX, стоит сделать фильтр без перезагрузки страницы с помощью AJAX. Для этого потребуется добавить обработку AJAX-запроса и заменить контент товаров динамически. Кроме того, можно добавить возможность выбора нескольких цветов или комбинировать фильтры по другим таксономиям.
Пример AJAX-фильтра выходит за рамки этой статьи, но в сети много примеров и готовых решений, которые можно адаптировать под свой магазин.
Советы по оптимизации и безопасности
При работе с пользовательскими мета-полями и фильтрами обязательно фильтруйте входящие данные через sanitize_text_field или другие функции WordPress для безопасности. Не забывайте про кэширование запросов и индексацию, чтобы фильтры работали быстро даже при большом количестве товаров.
Для сложных фильтров с большим количеством условий лучше использовать специализированные плагины или ElasticSearch.
Итоги
Создание настраиваемого фильтра товаров в WordPress — задача вполне решаемая своими силами с помощью WooCommerce и минимального кода. Такой подход даёт полный контроль над логикой фильтрации и дизайном. При этом можно комбинировать и расширять фильтр, чтобы сделать удобный и быстрый каталог товаров для ваших пользователей.