В интернет-магазинах на WooCommerce покупатели часто хотят быстро отфильтровать товары по цене — например, выбрать все товары в диапазоне от 1000 до 5000 рублей. В этой статье мы подробно разберем, как реализовать выбор по цене в WooCommerce, используя как стандартные возможности, так и дополнительные плагины. Также приведем примеры кода для тонкой настройки фильтрации.
Зачем нужна фильтрация товаров по цене в WooCommerce
Фильтр по цене значительно улучшает пользовательский опыт, позволяя покупателям быстро находить товары в нужном ценовом диапазоне. Без такого фильтра пользователи вынуждены листать сотни товаров или вручную сравнивать цены, что снижает конверсию и увеличивает показатель отказов.
WooCommerce изначально предлагает базовый виджет фильтра по цене, но он не всегда гибок и не всегда вписывается в дизайн сайта. Поэтому важно понимать, как его можно настроить или заменить на более удобный вариант.
Стандартный фильтр по цене WooCommerce и его настройка
WooCommerce поставляется с виджетом "Фильтр по цене" (Price Filter), который можно добавить в сайдбар или другую область виджетов. Он основан на слайдере, который позволяет выбрать минимальную и максимальную цену.
Чтобы добавить этот фильтр:
- Перейдите в админку WordPress Внешний вид > Виджеты.
- Добавьте виджет Фильтр по цене в нужную область.
- Настройте заголовок и сохраните.
Однако у стандартного виджета есть ограничения:
- Он фильтрует только по цене товаров, у которых есть цена, игнорируя товары с вариациями с разными ценами.
- Нет возможности задать собственные диапазоны цен или статичные кнопки выбора.
- Ограниченная визуальная настройка.
Расширение функционала фильтра по цене с помощью плагинов
Если стандартный фильтр не подходит, есть плагины, которые позволяют сделать фильтрацию по цене более гибкой и удобной.
Плагин WPGPT Filter Pro для WooCommerce
Плагин WPGPT Filter Pro позволяет создавать настраиваемые фильтры, включая фильтрацию по цене с несколькими режимами отображения: слайдер, диапазон, статичные кнопки и другие. Плагин интегрируется с AJAX, что делает фильтрацию мгновенной без перезагрузки страницы.
Пример настройки фильтра по цене в WPGPT Filter Pro:
- Выберите тип фильтра "Цена".
- Установите режим отображения на "Диапазон слайдер".
- Настройте минимальную и максимальную цену, шаг изменения.
- Активируйте AJAX-обновление.
Плагин Clearfy Pro для оптимизации WooCommerce
Clearfy Pro не только оптимизирует скорость и безопасность сайта, но и расширяет возможности WooCommerce, в том числе улучшая фильтрацию товаров. Вкупе с WPGPT Filter Pro можно получить мощный и быстрый фильтр по цене.
Настройка кастомного фильтра по цене с помощью кода
Если вы хотите сделать фильтр по цене с уникальным дизайном или логикой, можно реализовать его самостоятельно с помощью PHP и AJAX.
Пример создания фильтра по цене с AJAX
Вот упрощенный пример кода, который добавляет фильтр по цене на страницу магазина и обновляет товары без перезагрузки.
<?php
// Добавляем HTML для выбора диапазона цены
function wpexamples_add_price_filter() {
?>
<div id="wpexamples-price-filter">
<label>Цена от: </label>
<input type="number" id="wpexamples-price-min" value="0" min="0" />
<label>до: </label>
<input type="number" id="wpexamples-price-max" value="10000" min="0" />
<button id="wpexamples-price-filter-btn">Применить</button>
</div>
<?php
}
add_action('woocommerce_before_shop_loop', 'wpexamples_add_price_filter', 20);
// AJAX обработчик
function wpexamples_filter_products_by_price() {
$min_price = isset($_POST['min_price']) ? floatval($_POST['min_price']) : 0;
$max_price = isset($_POST['max_price']) ? floatval($_POST['max_price']) : 1000000;
$args = array(
'post_type' => 'product',
'posts_per_page' => -1,
'meta_query' => array(
array(
'key' => '_price',
'value' => array($min_price, $max_price),
'compare' => 'BETWEEN',
'type' => 'NUMERIC'
)
)
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
wc_get_template_part('content', 'product');
}
} else {
echo '<p>Товары не найдены</p>';
}
wp_die();
}
add_action('wp_ajax_wpexamples_filter_price', 'wpexamples_filter_products_by_price');
add_action('wp_ajax_nopriv_wpexamples_filter_price', 'wpexamples_filter_products_by_price');
// Подключаем JS
function wpexamples_enqueue_scripts() {
if (is_shop() || is_product_category()) {
wp_enqueue_script('wpexamples-price-filter', get_stylesheet_directory_uri() . '/js/price-filter.js', array('jquery'), false, true);
wp_localize_script('wpexamples-price-filter', 'wpexamples_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
));
}
}
add_action('wp_enqueue_scripts', 'wpexamples_enqueue_scripts');
?>В файле price-filter.js должен быть код, который по нажатию кнопки отправляет AJAX-запрос и обновляет список товаров без перезагрузки:
jQuery(document).ready(function($) {
$('#wpexamples-price-filter-btn').on('click', function() {
var minPrice = $('#wpexamples-price-min').val();
var maxPrice = $('#wpexamples-price-max').val();
$.ajax({
url: wpexamples_ajax_object.ajax_url,
type: 'POST',
data: {
action: 'wpexamples_filter_price',
min_price: minPrice,
max_price: maxPrice
},
beforeSend: function() {
$('#wpexamples-price-filter-btn').prop('disabled', true).text('Загрузка...');
},
success: function(response) {
$('.products').html(response);
},
complete: function() {
$('#wpexamples-price-filter-btn').prop('disabled', false).text('Применить');
}
});
});
});Обработка товаров с вариациями и сложными ценами
При работе с вариативными товарами фильтрация по цене становится сложнее, так как цена может быть разной для каждой вариации. В таких случаях простая фильтрация по метаполю _price не учитывает все варианты.
Чтобы фильтровать вариативные товары по диапазону цен, можно:
- Использовать плагин WPGPT Filter Pro, который умеет работать с вариациями и показывает товары, у которых хотя бы одна вариация попадает в выбранный диапазон.
- Создать собственную логику, которая собирает минимальную и максимальную цену всех вариаций и сохраняет их в отдельное метаполе, по которому и делать фильтр.
Пример функции для записи минимальной и максимальной цены вариаций:
function wpexamples_save_variation_price_range($post_id) {
if (get_post_type($post_id) !== 'product') return;
$product = wc_get_product($post_id);
if ($product->is_type('variable')) {
$prices = array();
foreach ($product->get_children() as $child_id) {
$variation = wc_get_product($child_id);
$prices[] = $variation->get_price();
}
if (!empty($prices)) {
update_post_meta($post_id, '_min_variation_price', min($prices));
update_post_meta($post_id, '_max_variation_price', max($prices));
}
}
}
add_action('save_post_product', 'wpexamples_save_variation_price_range');Далее в запросах фильтра использовать эти метаполя вместо _price.
Выводы и рекомендации
Фильтрация товаров по цене — важный элемент удобства интернет-магазина на WooCommerce. Стандартный виджет подойдет для простых случаев, но для более сложной логики и лучшего UX лучше использовать плагины, например, WPGPT Filter Pro, или создавать кастомные решения с помощью AJAX и PHP.
Обязательно учитывайте особенности вариативных товаров, чтобы фильтр корректно отображал все доступные варианты по цене.
Если хотите улучшить производительность и функциональность магазина, рассмотрите использование Clearfy Pro вместе с фильтрами для комплексной оптимизации.