WooCommerce Price Filter – trigger on change instead of submit

Does anyone know how I can customize the WooCommerce price filter widget to filter on a ‘change’ trigger instead of having the submit button?

It is located in templates/content-widget-price-filter.php – but since it is made as a form, does that mean I HAVE to use a submit button to trigger the event?

Answer

In your child theme, you could create a jQuery script that detects a click on the slider to automatically click on the “Filter” button.

jQuery( document ).ready(function($) {
    var priceSliderElements = $('.price_slider');
    var priceFilterFormSubmit = $('.widget.woocommerce.widget_price_filter .button[type="submit"]');
    priceSliderElements.on('click', function() {
        priceFilterFormSubmit.click();
    })
});

Then just hide the filter button in your css (can can do that in jQuery if you prefer):

.widget.woocommerce.widget_price_filter .button[type="submit"] {
    display: none;
}

Tested and it works 🙂