How to Hide Empty Facets

Using some JavaScript, you can hide facets that contain no values. In this example, each of our facets is contained within an element having the class of facet-wrap.

<script>
(function($) {
    document.addEventListener('facetwp-loaded', function() {
        $.each(FWP.settings.num_choices, function(key, val) {
            var $facet = $('.facetwp-facet-' + key);
            var $parent = $facet.closest('.facet-wrap');
            var $flyout = $facet.closest('.flyout-row');
            if ($parent.length || $flyout.length) {
                var $which = $parent.length ? $parent : $flyout;
                (0 === val) ? $which.hide() : $which.show();
            }
        });
    });
})(jQuery);
</script>

Place this code into your theme’s header.php or (better yet) into a custom javascript file.

See Also

JS Variables

facetwp-loaded