Hide the listing on initial page load

To hide the listing template on initial page load until a facet is used, add the following CSS to your (child) theme’s style.css file:

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

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

add_action( 'wp_footer', function() {
?>
<script>
document.addEventListener('facetwp-loaded', function() {
    fUtil('.facetwp-template').addClass('visible');
});
</script>
<?php
}, 100 );

Hide the listing when no facets are selected

The above solution only hides the post listing on inital page load. When you de-select all facet choices, or use the Reset facet button/link, the listing will still show.

If you need to always hide the listing when no facet choices are selected, use the following code. It shows/hides the post listing based on whether there are facet query variables in the URL.

Make sure to not include the CSS of the above solution.

add_action( 'wp_footer', function() {
?>
<script>
document.addEventListener('facetwp-loaded', function() {
    var tpl = fUtil('.facetwp-template');
    if ('' != FWP.buildQueryString()) {
        tpl.removeClass('facetwp-hidden');
    }
    else {
        tpl.addClass('facetwp-hidden');
    }
});
</script>
<?php
}, 100 );

See also