FacetWP in most cases is not compatible with “normal” (link-based) numbered pagination that comes with your theme, page builder widgets/modules or blocks. Link-based pagination reloads the page with e.g. /page/2 in the URL, while FacetWP refreshes the page with AJAX. Also (non-FacetWP) AJAX-based pagination is not compatible with FacetWP.

To get your pagination to work with your listing template, you need to replace it with a (numbered) Pager facet. Make sure that this Pager facet is outside of the listing container with class facetwp-template, like any facet should be. This is important to check because link-based pagination is often inside the listing container.

Note that there are several exceptions to the above. For some modules/widgets in the FacetWP-supported page builders and blocks, you can use their built-in pagination. Check the respective Help Center pages for info on where it works and where not. FacetWP also supports WooCommerce built-in pagination. In all situations, it is also possible to use a Pager facet instead.

It is also possible to make link-based pagination work with FacetWP:

If you are a developer, it is also possible to customize any link-based pagination to work with FacetWP, by intercepting the click events and letting them trigger a FacetWP AJAX refresh.

Here is a basic example:

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
// Change 'a.page-numbers' in line 9 to match the element of the links.
// Line 11 matches on page link format of '/page/x/'. Change this if needed.
// Important: the pager must be within the element with the 'facetwp-template' class.

add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    (function($) {
      $().on('click', 'a.page-numbers', function(e) {
        e.preventDefault();
        var matches = $(this).attr('href').match(/\/page\/(\d+)/);
        if (null !== matches) {
          FWP.paged = parseInt(matches[1]);
          FWP.soft_refresh = true;
          FWP.refresh();
        }
      });
    })(fUtil);
  </script>
  <?php
}, 100 );

When using this setup, you need to make sure the pager is inside the listing container with class facetwp-template (as opposed to when using a Pager facet), because otherwise the pager will not update its “current” page when used.

FacetWP uses this concept itself in several places: in the WooCommerce integration JavaScript file, and in the JS code of our Blocks, Bricks, Elementor and Beaver Builder add-ons. You can also check out this example using the WP PageNavi plugin.

See also

Last updated: November 27, 2024