Gists

<?php
/**
 * flush elementor buffers for image optimization feature
 **/
add_action( 'shutdown', function() {
    if ( FWP()->request->is_refresh ) {
        $buffer = ob_get_status();
        if ( 'Elementor\Modules\ImageLoadingOptimization\Module::handle_buffer_content' ==  $buffer['name'] ) {
            ob_end_flush();
        }
    }
}, -1 );

<?php
// This sets the class "checked", which makes the parent choice look selected, with a checked checkbox icon.
// If you just want to make the parent choice bold for example, use a custom class, e.g. 'selected', and add CSS to make it bold:
// .facetwp-checkbox.selected { font-weight: bold; }

add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    (function($) {
      document.addEventListener('facetwp-loaded', function() {
        $('.facetwp-depth.visible').prev('.facetwp-checkbox').toggleClass('checked');
      });
    })(jQuery);
  </script>
  <?php
}, 100 );

<?php
/** captures pagination for use with facet
 ** pager must be within facetwp-template class
 ** change 'a.page-numbers' to match element of the links ln 12
 ** ln 14 matches on page link format of /page/x/, change if needed
 **/

add_action( 'facetwp_scripts', function() {
    ?>
    <script>
        (function($) {
            $().on('click', 'a.page-numbers', function(e) {
                e.preventDefault();
                var matches = $(this).attr('href').match(/\/page\/(\d+)/);
                if (null !== matches) {
                    FWP.paged = parseInt(matches[1]);
                    FWP.soft_refresh = true;
                    FWP.refresh();
                }
            });
        })(fUtil);
    </script>
    <?php
}, 100 );

<?php
/** adds images to the labels in an fselect **/

add_filter( 'facetwp_facet_display_value', function( $label, $params ) {

    if ( 'my_facet_name' == $params['facet']['name'] ) { // Replace "my_facet_name" with the name of your facet
        $term_id = $params["row"]["term_id"]; // get term_id
        $img = // lookup image for the term_id to create an img tag for output
        $img = esc_html( $img ); // esc_html is needed for fselects to have image html in them, otherwise the html is stripped from the display
        $label = $img . $label; // prepends image to label, use $label = $img; if you want to only display image in label
    }

    return $label;    

}, 10, 2 );

<?php
/** enable hierarchy on an existing taxonomy **/
add_filter( 'register_taxonomy_args', function( $args, $taxonomy ) {
    if ( 'pa_color' == $taxonomy ) {
        $args['hierarchical'] = true;
    }
    return $args;
}, 10, 2 );

<style>
.gm-style-iw-c,
.gm-style-iw-tc {
  display: none;
}
</style>

<?php
/**
 * add labels above facets by changing shortcode output
 * this will apply to all facets except $exclude_types set below
 * change or remove conditional to apply this to whichever facets needed
 * wrapper can also be added
 */
add_filter( 'facetwp_shortcode_html', function( $output, $atts ) {
    if ( isset( $atts["facet"] ) && '' != $atts["facet"] ) { // check for facet shortcode
        $exclude_types = [ 'sort', 'reset', 'pager', 'map' ]; // set facet types to exclude from labels
        $facet = FWP()->helper->get_facet_by_name( $atts["facet"] ); // get facet settings
        if ( !in_array( $facet["type"], $exclude_types ) ) { // conditional to exclude types in $exclude_types
            $output = '<h3 class="facet-label">' . $facet["label"] .  '</h3>' . $output; // prepend with label and markup
            // uncomment below to add facet-wrap
            // $output = '<div class="facet-wrap">' . $output . '</div>';
        }
    }
    return $output;
}, 10, 2 );

<style>
/** numeric pager facet with some example styles
 ** to target a specific pager facet, use its facet name
 ** .facetwp-facet-standard_pager instead of .facetwp-type-pager
 ** example: .facetwp-type-standard_pager .facetwp-page
 ** if your css is not being applied, check for adding specificity
 ** https://www.w3schools.com/css/css_specificity.asp
 ** or !important https://www.w3schools.com/css/css_important.asp
 **/

/** wrapper for pager **/
.facetwp-type-pager .facetwp-pager {
    border: 1px solid red;
    padding: 5px;
}

/** individual page numbers and text **/
.facetwp-type-pager .facetwp-page {
    color: green;
}

/** hover class for page links **/
.facetwp-type-pager .facetwp-page:hover {
    text-decoration: underline;
}

/** currently selected link **/
.facetwp-type-pager .facetwp-page.active {
    font-style: bold;
}

/** page 1 **/
.facetwp-type-pager .facetwp-page.first {
    font-style: italic;
}

/** last page **/
.facetwp-type-pager .facetwp-page.last {
    font-style: italic;
}

/** previous page text **/
.facetwp-type-pager .facetwp-page.prev {
    color: red;
}

/** next page text **/
.facetwp-type-pager .facetwp-page.next {
    color: red;
}
</style>

<style>
/** load more button with background-image examples
 ** to target a specific button, use its facet name
 ** .facetwp-facet-my_load_more .facetwp-load-more
 ** .facetwp-facet-my_load_more.facetwp-facet-load_more_pager button
 ** if your css is not being applied, check for adding specificity
 ** https://www.w3schools.com/css/css_specificity.asp
 ** or !important https://www.w3schools.com/css/css_important.asp
 **/

.facetwp-load-more {
  background-color: yellow;
}

.facetwp-facet-load_more_pager button {
  /* same as .facetwp-load-more */
}

.facetwp-load-more:hover {
  background-color: green;  
}

.facetwp-load-more:active {
  background-color: purple;
}

.facetwp-load-more:focus {
  background-color: orange;
}

.facetwp-load-more:visited {
  /* does not work */
}

.facetwp-facet-load_more_pager.is-loading button {
  /** similar to active/focus **/
}
</style>

<?php
add_filter( 'facetwp_render_output', function( $output, $params ) {
    if ( FWP()->ajax->is_preload && isset( $output['settings']['map']['locations'] ) ) {
        $output['settings']['map']['locations'] = [];
    }
    return $output;
}, 11, 2 );