How to hide the template until facets are selected

To hide the template on pageload, add the following CSS to your theme’s style.css:

.facetwp-template { display: none; }
.facetwp-template.visible { display: block; }

Then, add the following into your theme’s functions.php or into the Custom Hooks plugin:

add_action( 'wp_head', function() {
?>
<script>
(function($) {
  $(document).on('facetwp-loaded', function() {
    if (FWP.loaded) {
      $('.facetwp-template').addClass('visible');
    }
  });
})(jQuery);
</script>
<?php
}, 100 );

That’s it! Now your template is hidden until the facets get used.