How to hide the listing until facets are selected
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 );