Overview

User Selections dynamically show each choice the user makes with the available facets on the page. The selections are grouped and displayed per facet and are preceded by the facet’s label.

The user selections can individually be clicked away, which dynamically resets that choice, and updates the results and facets. User selections are a good companion for a Reset facet, which resets all choices at once (or, depending on its settings, a selection of facets).

The code of the selections is a <ul>/<li> construction, with each facet’s choices grouped in a <li></li>, making them easy to style:

FacetWP User Selections
Default and custom styled User Selections

Note: The facet labels which appear before each user selection, are translatable with the facetwp_i18n hook.

Adding User Selections

Paste the following into an HTML widget, HTML block, or directly into your PHP template file:

echo facetwp_display( 'selections' )

Or use a shortcode:

[facetwp selections="true"]

Shortcode placement

Shortcodes can be added to the body field of your pages, or into Text widgets (Appearance > Widgets). If you’re using the WordPress 5+ block editor, you can paste shortcodes into a Shortcode block:

Solving issues with User Selections

If the User Selections are not showing all selected facet options, or are behaving erratically, make sure you do not have any facets with the name “labels”. This is a reserved word that will cause User Selections to malfunction. In newer versions of FacetWP, if you try to enter “labels” as name, it will automatically be changed to “labels_” on save.

Add a label above the User Selections

If you want to display a label above the User Selections, add the following code to your (child) theme’s functions.php. The label will only be visible if there are selections:

<?php
  add_action( 'wp_head', function() {
  ?>
    <script>
      (function($) {
        $(function() {
          FWP.hooks.addAction('facetwp/loaded', function() {
            $('<p class="selections-label">You selected: </p>').insertBefore('.facetwp-selections ul');
          }, 100 );
        });
      })(jQuery);
    </script>
<?php
}, 100 );

See also