Customizing the User Selections box

FacetWP includes a User Selections feature. The shortcode looks like this:

[facetwp selections="true"]

This generates an HTML unordered list of user selections. FacetWP adds basic CSS styling to make the list appear on a single line, with a little “x” button beside each item. See an example here.

The User Selections feature is entirely client-side. It requires no extra DB queries, but also means that any customization code happens in JavaScript.

To customize the output, you’d use the facetwp/loaded action:

(function($) {
  $(function() {
    wp.hooks.addAction('facetwp/loaded', function() {
      // add custom code here
    }, 12);
  });
})(jQuery);

Unlike normal JavaScript events, we’re using WP-JS-Hooks to let us control the execution order. For example, setting the priority to 12 ensures that our code runs after the Selections box has rendered (which has a priority of 10).