djrmom

$(function() {       
	FWP.hooks.addFilter('facetwp/template_html', function() {
		return true;
	}, 200 );
});

djrmom

/** adjust as needed to fit mobile phones better **/

@media only screen and (max-width: 767px) {
    #facetwp-radius {
        display:block;
        float: none;
        width: 100%;
    }
    .location-wrap {
        width: 100%

djrmom

/** style checked label differently **/
.facetwp-type-checkboxes .facetwp-checkbox.checked {
	color: red;
  	text-decoration: underline;
	font-style: italic;
    font-weight: bold;
}

/** basic example of inline row of checkboxes **/
.facetwp-type-checkboxes .facetwp-checkbox {

djrmom

<?php
add_action( 'wp_footer', function() {
  ?>
  <script>
  (function($) {
    if ('object' !== typeof FWP) {
        return;
    }
    FWP.hooks.addFilter('facetwp/flyout/facets', function(facets) {
        return ['facet3', 'facet1', 'facet2']; // change the facet display order

djrmom

<div class="facetwp-flyout-tpl">
  {content}
  <button onclick="FWP.reset()">Reset</button>
</div>

djrmom

<?php
/** enables filter when show product catgories is enabled in woocommerce **/
add_filter( 'facetwp_woocommerce_support_categories_display', '__return_true' );

djrmom

(function($) {
    $(document).on('facetwp-refresh', function() {
      if ( 'undefined' !== typeof FWP.facets['facet_1'] && FWP.facets['facet_1'].length > 0 ) {
          FWP.facets['facet_2'] = FWP.facets['facet_1'];
          FWP.facets['facet_1'] = [];
      }
    });
})(jQuery);

djrmom

<?php echo wp_trim_words( preg_replace( '/\[vc_empty_space(\s)*(.)*]/', ' ', strip_tags( do_shortcode( get_the_content() ) ) ), 20 ); ?>

djrmom

<?php
/** run shortcodes for a facetwp template **/
add_filter( 'facetwp_template_html', function( $output, $class ) {
    return do_shortcode( $output );
}, 10, 2 );

djrmom

/** you may need to use !important to force css styles 
 ** width: 300px !important;
 ** or see https://www.w3schools.com/css/css_specificity.asp for adding css specificity to your css
 ** rules
 **/

/** change width of fselect **/
.facetwp-type-fselect .fs-wrap,
.facetwp-type-fselect .fs-dropdown {
    width: 300px;