FacetWP automatically refreshes whenever any facet interaction happens. It is possible to disable this feature and add a submit/apply/filter button instead to let the user initiate the filtering of the results.

Step 1: Disable auto-refresh

To disable FacetWP’s auto-refresh functionality, add the following code to your (child) theme’s functions.php or into the Custom Hooks add-on:

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
<?php
add_action( 'wp_footer', function() {
  ?>
  <script>
    (function($) {
      $(function() {
        if ('undefined' !== typeof FWP) {
          FWP.auto_refresh = false;
        }
      });
    })(fUtil);
  </script>
  <?php
}, 100 );

The above code will prevent auto-refresh for all facet types, except for Pager facets and Reset facets. If needed you can re-enable auto-refresh for individual facets or facet types with FWP.refresh(), for example when using a Sort facet.

Step 2: Add an “Apply” or “Submit” button/link to your page

After disabling the auto-refresh functionality in step 1, you can add a button to your page to let the user manually apply all facet selections made. You can style the button however you wish. The important part is that the FWP.refresh() method is triggered on click:

<button onclick="FWP.refresh()">Apply</button>

You can also use a link:

<a href="javascript:;" onclick="FWP.refresh()">Apply</a>

Disable auto-refresh and add an “Apply” or “Submit” button with an Elementor FacetWP Button widget

Add an Apply button with an Elementor add-on FacetWP Button widget.
Add an Apply button with an Elementor add-on FacetWP Button widget.

If you are using Elementor, with the Elementor add-on installed, you can use the FacetWP Button widget to place an “Apply” or “Submit” button on your page.

Just add the FacetWP Button widget, and select “Apply button” as the button type.

Trigger a refresh with a Sort facet

In the above setup with a Submit button, if you also have a Sort facet, you may want to trigger a direct refresh when using it, without having to use the Submit button.

Add the following code to your (child) theme’s functions.php to trigger a refresh after any changes to the Sort facet:

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
<?php
add_action( 'wp_head', function() {
  ?>
    <script>
      (function($) {
        $(document).on('change','.facetwp-type-sort select', function() {
          FWP.refresh();
        });
      })(jQuery);
    </script>
  <?php
}, 100 );

Conditionally disable auto-refresh

FacetWP’s auto-refresh is an “all-or-nothing” feature, so it is not possible to disable or enable auto-refresh only for specific facets.

What is possible though is disabling it only on specific posts, pages, archives or templates, using one or more conditional tags. This example disables auto-refresh on two specific pages:

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( 'facetwp_scripts', function() {

  if ( is_page( [ 345, 346 ] ) ) { // Disable auto-refresh on these pages
    ?>
    <script>
      (function($) {
        $(function() {
          if ('undefined' !== typeof FWP) {
            FWP.auto_refresh = false;
          }
        });
      })(fUtil);
    </script>
    <?php
  }

}, 100 );

See also