Overview

The Reset facet type – added in FacetWP v4.0 – adds a reset button or link.

Depending on the settings, the button or link resets all facets or a selection only.

You can set the button or link to automatically hide when no facets have selected values.

Usage

Go to the Facets tab, click “add new”, choose “Reset” as Facet type, set its options, and place it on your page with a shortcode.

Available options

Name Description
Reset UI Should the facet show as a button or a link.
Reset text The text of the button or link. Note: this text is translatable with the facetwp_i18n hook.
Include / exclude Include or exclude certain facets:

  • Reset everything – Reset all facets.
  • Reset only these facets – Reset only the selected facets (multiple select).
  • Reset all except these facets – Reset all facets except the selected facets (multiple select).
Auto-hide Automatically hide the reset button or link when no facets have selected values.

The facetwp/reset hook

The facetwp/reset hook fires when a reset button/link is clicked. An example of a way to use this:

Select a facet choice after a reset

The following code selects a specific facet choice after a reset. This can be useful if a specific facet choice was pre-selected on page load and you want to retain that pre-selection when a user clicks the Reset button/link:

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
// Replace "my_facet_name" with your facet name, and "my_facet_name" with the facet choice
add_action( 'wp_footer', function() { 
  ?>
  <script>
    (function($) {
      if ('object' !== typeof FWP) {
        return;
      }
      $(function() {
        FWP.hooks.addAction('facetwp/reset', function() {
          FWP.facets['my_facet_name'] = ['my_facet_choice'];
        });
      });
    })(jQuery)
  </script>
<?php }, 100 );

Scroll the page after a reset

To scroll the page to the top after clicking the Reset button/link, you can use the following code:

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_action( 'wp_head', function() { ?>
  <script>
    (function($) {
      $(document).on('facetwp-refresh', function() {
        if ( FWP.is_reset == true ) {
          FWP.enable_scroll = true;
        } else {
          FWP.enable_scroll = false;
        }
      });
      $(document).on('facetwp-loaded', function() {
        if ( FWP.enable_scroll == true ) {
          $('html, body').animate({
            scrollTop: 0 // Scroll to the top of the page
          }, 500);
        }
      });
    })(jQuery);
  </script>
<?php } );

If you want the page to scroll to the top of the results listing instead (the element with class facetwp-template), replace the scrollTop option with how it’s used in the next example:

Scroll the page after a reset or when all facets are deselected

Alternatively, if you want the scroll to also happen after manually deselecting all facets, you can check for an empty query string like this:

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_action( 'wp_head', function() {
  ?>
  <script>
    (function($) {
      $(document).on('facetwp-loaded', function() {
        if ( FWP.loaded ) { // Run only after the initial page load
          if ('' == FWP.buildQueryString()) { // When no facets are selected, the query string is empty
            $('html, body').animate({
              scrollTop: $('.facetwp-template').offset().top // Scroll to the top of the element with class "facetwp-template"
            }, 500);
          }
        }
      });
    })(jQuery);
  </script>
  <?php
}, 100 );

See our tutorial about page scrolling for more code examples of how and when to scroll the page, and ways to customize the scroll offset, duration and easing.

Reset facets programmatically

Besides using a Reset facet, it is also possible to reset all, or specific facets and/or individual facet choices programmatically with the FWP.reset() function.

Or you can reset facets by setting FWP.facets['my_facet_name'] = []; within the facetwp-refresh event, if needed conditionally, based on other facet selections.

See also

Last updated: November 19, 2024