Woocommerce product multiple term checkbox filtering by simple ajax [category + color + price]

ajaxsfilter.js

jQuery(function($){
	$('#filter').change(function(){
		var filter = $('#filter');
		$.ajax({
			url:filter.attr('action'),
			data:filter.serialize(), // form data
			type:filter.attr('method'), // POST
			beforeSend:function(xhr){
				//filter.find('button').text('Processing...'); // changing the button label
				$('#appendTable').html('<label class="alert">Processing...</label>');
			},
			success:function(data){
				console.log(data);
				filter.find('button').text('Apply filter'); // changing the button label back
				$('#appendTable').html(data); // insert data
			}
		});
		return false;
	});
});

filterform.php

?>
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
	<?php
		$regions = get_terms( array( 'taxonomy' => 'product_cat', 'hide_empty' => 1, 'hierarchical' => 1, ) );
		if( $regions ) {
			echo "<div class='categories'><ul>";
			foreach( $regions as $region ) {
				if( $region->parent == 0 ) {
				
				echo '<li>'.$category_id = $region->term_id.'<input type="checkbox" id="region_' . $region->term_id . '" name="region_' . $region->term_id . '" /><label for="region_' . $region->term_id . '">' . $region->name . '</label>';
				foreach( $regions as $subcategory ) {
					if($subcategory->parent == $region->term_id) {
						echo '<ul><li>'.$category_id = $subcategory->term_id.'<input type="checkbox" data-parent="region_' . $region->term_id . '" id="region_' . $subcategory->term_id . '" name="region_' . $subcategory->term_id . '" /><label for="region_' . $subcategory->term_id . '">' . $subcategory->name . '</label></li></ul>';
					}
				}
				echo '</li>';
				
				}
			}
			echo "</ul></div>";
		}
	?>
	<?php
		if( $colors = get_terms( array( 'taxonomy' => 'pa_color' ) ) ) {
			echo "<div class='colors'>";
			foreach( $colors as $color ) :
				$value = get_field( 'chose_color', 'term_' . $color->term_id );
				echo '<label><input type="checkbox" id="color_' . $color->term_id . '" name="color_' . $color->term_id . '" /><div class="colorbox" style="background:'. $value .'">'. $value .'</div><label for="color_' . $color->term_id . '">' . $color->name . '</label></label>';
			endforeach;
			echo "</div>";
		}
	?>
	<div class='priceFilter'>
		<input type="text" name="price_min" placeholder="Min price" />
		<input type="text" name="price_max" placeholder="Max price" />
	</div>
			
	<input type="hidden" name="action" value="myfilter">
</form>

functions.php

add_action('wp_ajax_myfilter', 'saan_filter_function'); // wp_ajax_{ACTION HERE} 
add_action('wp_ajax_nopriv_myfilter', 'saan_filter_function');

function saan_filter_function(){
	//wp_quick_view();
	$args = array(
		'post_type' => 'product',
		'orderby' => 'name',
		'order'	=> 'DESC',
		'posts_per_page' => -1,
	);

	$args['tax_query'] = array( 'relation' => 'AND' );
	$all_terms = array();
	$all_colors = array();
	
	$regions = get_terms( array( 'taxonomy' => 'product_cat' ) );
	$colors = get_terms( array( 'taxonomy' => 'pa_color' ) );
	
	// for taxonomies / categories
	if( $regions ) {
		foreach( $regions as $region ) {
			if( $region->parent == 0 ) {
				if( isset( $_POST['region_' . $region->term_id ] ) && $_POST['region_' . $region->term_id] == 'on' ){
					$all_terms[] = $region->term_id;
					}
				foreach( $regions as $subcategory ) {
					if($subcategory->parent == $region->term_id) {
						if( isset( $_POST['region_' . $subcategory->term_id ] ) && $_POST['region_' . $subcategory->term_id] == 'on' ){
							$all_terms[] = $subcategory->term_id;
						}
					}
				}
			}
		}
		
		if( count( $all_terms ) > 0 ) {
			$args['tax_query'][] = array(
				array(
					'taxonomy' => 'product_cat',
					'field' => 'id',
					'terms'=> $all_terms,
				)
			);
		}
	}
	// for taxonomies / color
	if( $colors ) {
		foreach( $colors as $color ) {
			if( isset( $_POST['color_' . $color->term_id ] ) && $_POST['color_' . $color->term_id] == 'on' )
				$all_colors[] = $color->term_id;
		}
		
		if( count( $all_colors ) > 0 ) {
			$args['tax_query'][] = array(
				array(
					'taxonomy' => 'pa_color',
					'field' => 'id',
					'terms'=> $all_colors,
				)
			);
		}
	}
	
		
	
	// create $args['meta_query'] array if one of the following fields is filled
	if( isset( $_POST['price_min'] ) && $_POST['price_min'] || isset( $_POST['price_max'] ) && $_POST['price_max'] || isset( $_POST['featured_image'] ) && $_POST['featured_image'] == 'on' )
		$args['meta_query'] = array( 'relation'=>'AND' ); // AND means that all conditions of meta_query should be true
 
	// if both minimum price and maximum price are specified we will use BETWEEN comparison
	if( isset( $_POST['price_min'] ) && $_POST['price_min'] && isset( $_POST['price_max'] ) && $_POST['price_max'] ) {
		$args['meta_query'][] = array(
			'key' => '_price',
			'value' => array( $_POST['price_min'], $_POST['price_max'] ),
			'type' => 'numeric',
			'compare' => 'between'
		);
	} else {
		// if only min price is set
		if( isset( $_POST['price_min'] ) && $_POST['price_min'] )
			$args['meta_query'][] = array(
				'key' => '_price',
				'value' => $_POST['price_min'],
				'type' => 'numeric',
				'compare' => '>'
			);
 
		// if only max price is set
		if( isset( $_POST['price_max'] ) && $_POST['price_max'] )
			$args['meta_query'][] = array(
				'key' => '_price',
				'value' => $_POST['price_max'],
				'type' => 'numeric',
				'compare' => '<'
			);
	}
	
	
	
	
	$query = new WP_Query( $args );
 
	if( $query->have_posts() ) {
		while( $query->have_posts() ){
			$query->the_post();
			global $product; 
			$sku = $product->get_sku(); //get sku
			echo '<div class="home-grid-item et_pb_column et_pb_column_1_3">';
			$productURL= get_permalink();
			$productTitle = get_the_title();
			$product_id = $product->post->ID;
			$getDesc = $product->post->post_excerpt;
			$add_to_cart = do_shortcode('[add_to_cart_url id="'.$post->ID.'"]');
			$src = WC()->plugin_url() . '/assets/images/placeholder.png';
			$placeholder_image = get_option( 'woocommerce_placeholder_image', 0 );
			$has_image = get_the_post_thumbnail_url($loop->post->ID);

			if ( $product->is_type( 'simple' ) ) {
			  $max_percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
		   } elseif ( $product->is_type( 'variable' ) ) {
			  $max_percentage = 0;
			  foreach ( $product->get_children() as $child_id ) {
				 $variation = wc_get_product( $child_id );
				 $price = $variation->get_regular_price();
				 $sale = $variation->get_sale_price();
				 if ( $price != 0 && ! empty( $sale ) ) $percentage = ( $price - $sale ) / $price * 100;
				 if ( $percentage > $max_percentage ) {
					$max_percentage = $percentage;
				 }
			  }
		   }

				if ( !$has_image ) { //empty( $placeholder_image )
					//if ( is_numeric( $placeholder_image ) ) {
						$image = wp_get_attachment_image_src( $placeholder_image, $size = 'woocommerce_thumbnail' );

						if ( ! empty( $image[0] ) ) {
							$src = $image[0];
							//echo "<img src='$has_image' class='img-responsive' alt=''/>";
						}
					//} else {
						//$src = $placeholder_image;
						//$src = $placeholder_image;
					//}
				}
				else {
					$src = $has_image;
				}


				echo "<div class='homeTab-grid-image'>
					<a href='$productURL'>
						<img src='$src' alt='$productTitle'>
					</a>

					<a data-fancybox='quick-view-$i' href='$src' class='quickview quickBtn' title='Quick View'></a>
					<div class='d-none'>
						<!--<a href='$src' data-fancybox='quick-view-$i' data-type='image'></a>-->
						<div class='product-form'>
							<h3><a href='$productURL'>$productTitle</a></h3>";

							$terms = get_the_terms ( $product_id, 'product_cat' );
							foreach ( $terms as $term ) {
								 //$cat_id = $term->id;
								 echo "<span class='catName'>" . $term->name . '</span>';
							}

							$rating = $product->get_average_rating();
							if ( $rating > 0 ) {
								$title = $rating;
							} else {
								$title = 'Not rated yet';
								$rating = 0;
							}
							echo "<div class='rating'><label>" . $title . '</label>(<span>' . $product->get_review_count() . '</span>)</div>';

								$regular_price = get_post_meta( get_the_ID(), '_regular_price', true );
								$sale_price = get_post_meta( get_the_ID(), '_sale_price', true );
								echo "<span class='product-price'>";
									if($sale_price && $max_percentage > 0) {
										echo "<span class='regular-price'>" . wc_price( $regular_price ) . "</span>";
										echo "<span class='sale-price'>" . wc_price( $sale_price ) . "</span>";
										echo "<div class='sale-perc'>-" . round($max_percentage) . "% Off</div>";
									}
									else {
										echo wc_price( $regular_price );
									}
								echo "</span>";


						echo "<p>$getDesc</p>";
						if( !my_custom_cart_contains( $product_id ) ) {
							echo "<div class='et_pb_button_module_wrapper btnAfterBefore'><button class='my-custom-add-to-cart-button et_pb_button commonBtn' data-product-id='$product_id'>add to cart</button></div>";
						}
						else {
							echo "<div class='et_pb_button_module_wrapper btnAfterBefore'><button class='my-custom-add-to-cart-button et_pb_button commonBtn' data-product-id='$product_id'>added to cart</button></div>";
						}
				echo "</div>
					</div>
				</div>";

				echo "<div class='homeTab-grid-details'>";
					echo "<a href='$productURL' class='woocommerce-loop-product__title'>$productTitle</a>";

					$terms = get_the_terms ( $product_id, 'product_cat' );
				foreach ( $terms as $term ) {
					 //$cat_id = $term->id;
					 echo "<span class='catName'>" . $term->name . '</span>';
				}

				$rating = $product->get_average_rating();
				if ( $rating > 0 ) {
					$title = $rating;
				} else {
					$title = 'Not rated yet';
					$rating = 0;
				}
				echo "<div class='rating'><label>" . $title . '</label>(<span>' . $product->get_review_count() . '</span>)</div>';

					$regular_price = get_post_meta( get_the_ID(), '_regular_price', true );
					$sale_price = get_post_meta( get_the_ID(), '_sale_price', true );
					echo "<span class='product-price'>";
						if($sale_price && $max_percentage > 0) {
							echo "<span class='regular-price'>" . wc_price( $regular_price ) . "</span>";
							echo "<span class='sale-price'>" . wc_price( $sale_price ) . "</span>";
							echo "<div class='sale-perc'>-" . round($max_percentage) . "% Off</div>";
						}
						else {
							echo wc_price( $regular_price );
						}
					echo "</span>";
				echo '</div>';//homeTab-grid-details


				echo '</div>'; //home-grid-item
		}
	}
		
	else {
		echo 'No posts found';
	}		
	wp_reset_postdata();
	die();
}