How to Create a Custom WooCommerce Product Filter with AJAX

<div class="widget-box" id="filterbar-one">
    <h3><?php echo __( 'Filter By Categories', 'drh' ) ?><span></span></h3>
    <div class="textwidget">
        <?php
        $taxonomy     = 'product_cat';
        $orderby      = 'name';  
        $show_count   = 0;      // 1 for yes, 0 for no
        $pad_counts   = 0;      // 1 for yes, 0 for no
        $hierarchical = 1;      // 1 for yes, 0 for no  
        $title        = '';  
        $empty        = 0;
        $args = array(
            'taxonomy'     => $taxonomy,
            'orderby'      => $orderby,
            'show_count'   => $show_count,
            'pad_counts'   => $pad_counts,
            'hierarchical' => $hierarchical,
            'title_li'     => $title,
            'hide_empty'   => $empty
        );
        $all_categories = get_categories( $args );
        echo "<ul>";
        
        foreach ($all_categories as $cat) {
            $category_id = $cat->term_id;
        ?>
        <li>
            <input type="checkbox" id="" name="chk_cat_ids[]" class="p_cat styled-checkbox" value="<?php echo $cat->term_id ;?>">                
            <label class="styled-checkbox-label" for="styled-checkbox-1"><span class="styled-checkbox-lbl"><?php echo $cat->name ;?></span></label>               
        </li>
        <?php 
        }
        echo "</ul>";
        ?>
    </div>
</div>

<div class="mid-right full-right">
    <div id="product_results"></div>
</div>

<script type="text/javascript">
jQuery(".p_cat").change(function() {
    product_results_filters(1);    
});

var setpage = 1;
var perpage = 12;
product_results_filters(setpage);

function product_results_filters(setpage) {
    jQuery("#product_results").fadeIn(400).html('<div class="product_results-loader"><img src="<?php echo get_template_directory_uri().'/images/ripple.gif'; ?>" align="absmiddle" alt="Loading..." ></div>');
    jQuery.ajax({
        url: '<?php echo site_url(); ?>/wp-admin/admin-ajax.php',
        type: "post",
        data: {
            action: 'product_results_filters_ajax',
            setpage: setpage,
            perpage: perpage,
            p_cat_ids: jQuery("input:checkbox.p_cat:checked").serialize()
        },
        success: function(data) {        
            jQuery("#product_results").html(data);        
        },
        error: function() {
            //alert("failure");
        }                
    });
}
</script>

<?php 

function fun_product_results_filters_ajax() { 
    ob_clean();
    
    $p_cat_ids = "";
    $p_cat_ids = explode("&", $_REQUEST['p_cat_ids']);

    $p_cat_ids_arr = array();
    if($_REQUEST['p_cat_ids'] != ""){
        foreach($p_cat_ids as $p_cat_idsval){
            $valget = explode("=", $p_cat_idsval);
            $p_cat_ids_arr[] = $valget[1];
        }
    }

    $perpage = $_REQUEST['perpage'];
    $args = array(
        'post_type'              => array('product'),
        'post_status'            => array('Publish'),
        'posts_per_page'         => $perpage,
        'paged'                  => $_REQUEST['setpage']
    );
    
    $conditinalarr = array('relation' => 'AND');
    
    if($_REQUEST['p_cat_ids'] != ""){
        if(count($p_cat_ids_arr) > 0){
            $conditinalarr[] = array(
                'taxonomy' => 'product_cat',
                'field'    => 'id',
                'terms'    => $p_cat_ids_arr
            );
        }
    }
    
    if(count($conditinalarr) > 1){
        $args['tax_query'] = $conditinalarr;
    }
    
    $query = new WP_Query($args);
    $trecord = $query->post_count;
    $tpage = $query->max_num_pages;

    if ($query->have_posts()) {
        do_action('woocommerce_before_shop_loop');
        woocommerce_product_loop_start();
        
        while ($query->have_posts()) {
            $query->the_post();
            do_action('woocommerce_shop_loop');
            wc_get_template_part('content', 'product');
        }
        
        woocommerce_product_loop_end();    
        do_action('woocommerce_after_shop_loop');    
    } else {
        echo "No products were found matching your selection.";
    }

    wp_reset_postdata();
    wp_die(); 
}

// Register AJAX actions
add_action('wp_ajax_nopriv_product_results_filters_ajax', 'fun_product_results_filters_ajax');
add_action('wp_ajax_product_results_filters_ajax', 'fun_product_results_filters_ajax');
?>