Woocommerce Question posted in
The official Woocommerce documentation can be found here.

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?

Tags:

3

Answers


  1. 0

    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 🙂

    Login or Signup to reply.
  2. 0

    The accepted answer works but it can be improved. For example, it submits the form even if a user clicks on the filter without changing the price range.

    WooCommerce triggers some filter-related events, so we can submit the form only when necessary:

    jQuery(function( $ ) {
   
    $( document.body ).on( 'price_slider_create', function( e, min, max ) {
        window.priceFilterRange = [ min, max ];
    } );
    $( document.body ).on( 'price_slider_change', function( e, min, max ) {
        if ( window.priceFilterRange[0] != min || window.priceFilterRange[1] != max ) {
            $( '.widget.woocommerce.widget_price_filter .button[type="submit"]' ).click();
        }
    } );
    
} );

    Of course, the submit button still need to be hidden 🙂

    Login or Signup to reply.
  3. 0

    None of these jquery solutions worked for me so here what I did may be it will help someone.

    jQuery('body').on('price_slider_change'),function(event, min, max){ 
    jQuery('.widget_price_filter form').trigger('submit');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search