How to add FacetWP Reset Filters button

If you want to add a button to reset your FacetWP filters, you may use the snippet below:

Reset FacetWP Facets

Reset all facets:

FWP.reset();

Or reset one facet:

FWP.reset('make');

Or reset multiple facets:

FWP.reset(['make', 'model', 'year']);

Or reset individual values:

FWP.reset({ 'make': 'audi' });

Use onclick for buttons and other HTML elements:

<button value="Reset" onclick="FWP.reset()" class="facet-reset">Reset</button>

Don’t know where to write this code? check this FacetWP tutorial

Style your Facet Reset button

.facet-reset{
    font-size: 18px;
    font-weight: 500;
    padding: 4px 10px;
    line-height: 1.7em!important;
    background-color: #00b8bc; // add your own color code here
    color: #fff;
    border: 2px solid #00b8bc; // add your own color code here
    border-radius: 3px;
    -webkit-transition: all .2s;
    transition: all .2s;
    cursor: pointer;
}
.facet-reset:hover{
    color: #333;
    background-color: 009fa3; // add your own color code her
}

Show Reset button only when facets are selected

<script>
/*
Code placement: see the "Javascript" section on https://facetwp.com/how-to-use-hooks/

This assumes that your reset button looks like this:
<button value="Reset" onclick="FWP.reset()" class="facet-reset">Reset</button>
*/
(function($) {
    $(document).on('facetwp-loaded', function() {
        var query-string = FWP.build_query_string();
        if ( '' === query-string ) { // no facets are selected
            $('.facet-reset').hide();
        }
        else {
            $('.facet-reset').show();
        }
    });
})(jQuery);
</script>