В WooCommerce есть виджет «Фильтр товаров по цене»

Доработаем фильтр товаров по цене

Сделаем, чтобы фильтрация товаров по цене начиналась сразу после перемещения ползунка, а не так как по умолчанию это происходит в Woocommerce, то есть после нажатия кнопки «Фильтрация». Будет всё проще и лучше! Передвинул ползунок — получил отсортированные по цене товары.

Что потребуется сделать?

Первое это создать файл, например такой:

auto-price-filter.js

Создаём файл в теме в папке /js вот с таким содержанием:

jQuery(function($){
    // Используем делегирование события на document
    $(document).on('slidestop', '.price_slider', function(){
        var form = $(this).closest('form');
        form.submit(); // Автоматически отправляем форму
    });
});

Теперь идёт в файл темы functions.php и прописываем следующий код:

add_action( 'wp_enqueue_scripts', function() {
    // Подключаем наш кастомный JS
    wp_enqueue_script(
        'auto-price-filter', // handle
        get_stylesheet_directory_uri() . '/js/auto-price-filter.js', // путь до файла
        array('jquery'), // зависимости
        null, // версия (можно поставить time() для разработки)
        true  // в footer
    );
});

Всё готово!

Хотя давайте ещё уберём не нужную теперь кнопку с очень стрёмным названием «Фильтрация». При помощи стилей, скроем эту кнопку)

.widget_price_filter .button {
    display: none;
}