фильтр товаров woocommerce на простой странице

Как организовать фильтр товаров по атрибутам на отделньой странице? и желательно с подгрузкой ajax?

Сделал так, но чего от не работает, через плагины пытался сделать фильтр, но все время ведет на страницу магазина

<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce/Templates
* @version 1000.0
*/
defined( 'ABSPATH' ) || exit;
$sidebar = false;
if (!is_search() && !is_shop()){
$product_cat_id = get_queried_object()->term_id;
//var_dump($product_cat_id);
$subArgs = array('taxonomy' => 'product_cat', 'orderby' => 'menu_order', 'parent' => $product_cat_id , 'show_count' => 0, 'pad_counts' => 0, 'title_li' => '', 'hide_empty' => 0);
$subCategories = get_categories( $subArgs );
$link = get_term_link( $product_cat_id, 'product_cat' );
if ($subCategories && count($subCategories)) {
  $sidebar = true;
  var_dump();
}
}
$chosen_attributes = WC_Query::get_layered_nav_chosen_attributes();

$excludedCats = [15, 158];
$categoriesArgs = array(
  'taxonomy' => 'product_cat',
  'orderby' => 'none',
  'hierarchical' => 0,
  'hide_empty'   => 1,
  'exclude' => $excludedCats
);
$mainCategories = get_categories( $categoriesArgs );
if (!is_search() && !is_shop()) {
$currentCategory = get_queried_object();
}
get_header( 'shop' );?>



<style>
.title-tr {
    float: left;
    width: 250px;
    line-height: 15px;
    margin-right: 20px;
    font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 23px;
color: #1275B0;
}
.resp-tab p
font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 21px;
text-align: center;
color: #191C12;
}


.resp-tab td:first-child {
    width: 370px;
}
.resp-tab {
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    background: #F5FFD8;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius:5px;
}
img.attachment-thumbnail-215x300.size-thumbnail-215x300.wp-post-image {
    max-width: 30px;
    height: auto;
}

.resp-tab th, .resp-tab td {
    padding: 10px 20px;
    font-size: 13px;
    border: none;
    border: 1px solid #457759;
    vertical-align: middle;
}
.resp-tab th {
    color: #fff;
    background: #457759;
    font-weight: bold;
    border: 1px solid #fff;
    text-transform: uppercase;
    text-align: center;
    border-top: 1px solid #457759;
}
.resp-tab th:first-child {
    color: #fff;
    background: #457759;
    font-weight: bold;
    border: 1px solid #fff;
    text-transform: uppercase;
    text-align: center;
    border-top: 1px solid #457759;
    border-left: 1px solid #457759;
    border-top-left-radius: 5px;
}
.resp-tab th:last-child {
    color: #fff;
    background: #457759;
    font-weight: bold;
    border: 1px solid #fff;
    text-transform: uppercase;
    text-align: center;
    border-top: 1px solid #457759;
    border-right: 1px solid #457759;
    border-top-right-radius: 5px;
}

.resp-tab td span {
    background: #457759;
    color: #FFF;
    display: none;
    font-size: 11px;
    font-weight: bold;
   
    padding: 5px 10px;
    position: absolute;
    top: 0;
    left: 0;   
}
@media(max-width: 768px) {
    .resp-tab thead {
        display: none;
    }
    .resp-tab tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 30px;
    }
    .resp-tab td {
        margin: 0 -1px -1px 0;
        padding-top: 35px;
        position: relative;
        width: 50%;
    }
    .resp-tab td span {
        display: block;
    }
}
@media(max-width: 480px) {
    .resp-tab td {
        width: 100%;
    }
    .resp-tab td:first-child {
    width: 100%;
}
}
</style>
<div class="page__container page__schemes_content">
<div class="container">
<h1><?php the_title();?></h1>
<?php the_content();?>
<div id="subcategory-archive">
<div class="category__topcategories">
  <div class="container">
  <?php //var_dump($mainCategories);?>
    <div class="category__topcategories_grid flexw">
      <?php foreach($mainCategories as $category) { 
      $id = $category->term_id;
      $shortName = get_field('category_short_title', $category);
      
      if (isset($currentCategory) && $currentCategory->term_id == $id) {
        $currentClass = ' current';
      } else {
        $currentClass = '';
      }
      $url = get_term_link($id , 'product_cat');
      ?>
      <a class="category__topcategories_item category_<?php echo $id;?><?php echo $currentClass;?>" href="<?php echo $url;?>" title="<?php echo htmlspecialchars($category->name);?>">
      <?php if ((bool)$shortName ) { ?>
        <?php echo $shortName;?>
      <?php } else { ?>
        <?php echo $category->name;?>
      <?php };?>
      </a>
      <?php }; ?>
    </div>
  </div>
</div>
<form role="search" method="get" class="woocommerce-product-search" name="s" 
      action="<?php echo esc_url(home_url('/')); ?>">
    <input style="display: none;" type="search"
           id="woocommerce-product-search-field-<?php echo isset($index) ? absint($index) : 0; ?>"
           class="search-field"
           placeholder="<?php echo esc_attr__('Search products&hellip;', 'woocommerce'); ?>" value=""
           name="s"/>
    <div class="search_title">
        Фильтр 
    </div>
    <div class="row s-fast-search__row justify-content-center">
        <div class="col-md-12">
            <?php
            $diametr = wp_dropdown_categories("taxanomy=pa_sistema-organizma&echo=0&show_option_none=Все&name=diametr");
            ?>
            <label>Выберите </label>
            <div><?php echo $diametr; ?></div>
        </div>
        <div class="col-md-12">
            <?php
            $razmer = wp_dropdown_categories("taxonomy=pa_razmer&echo=0&show_option_none=Все размеры&name=razmer");
            ?>
            <label>Выберите</label>
           <div> <?php echo $razmer; ?></div>
        </div>

    </div>
    <!--row-->
    <button type="submit" class="filtr_search_button"
            value="<?php echo esc_attr_x('Search', 'submit button', 'woocommerce'); ?>">Искать
    </button>
    <input type="hidden" name="post_type" value="product"/>
</form>

 
    <div id="true-side" class="sidebar">
 
        <?php dynamic_sidebar( 'true_side' ); ?>
 
    </div>
 

<div id="woof_results_by_ajax">

</div>
<table class="resp-tab">
    <thead>
        <tr>
            <th>БАД</th>
            <th>Прийом БАД</th>
            <th>Мета прийому БАД</th>
            <th>Ціна</th>
        </tr>
    </thead>
    <tbody>

<?php 
$loop = new WP_Query( array( 
  'post_type' => 'product', 
  'posts_per_page' => 40,
  'orderby' => 'menu_order', 
  'order' => 'ASC',
  'product_category' => 'biologicheski-aktivnye-dobavki',
  )); 

  while ( $loop->have_posts() ): $loop->the_post(); ?>
          <tr>
            <td><span>БАД</span>    
            <p class="title-tr">   <?php the_title(); ?> </p> 
                  <?php the_post_thumbnail("thumbnail-215x300"); ?>  </td>
            <td><span>Прийом БАД</span><p>Контент 1</p></td>
            <td><span>Мета прийому БАД</span><p>Контент 1</p></td>
            <td><span>Ціна</span>     <p>      <?php
  $price = get_post_meta( get_the_ID(), '_regular_price', true);
  $sale = get_post_meta( get_the_ID(), '_price', true);
  
  if (!empty($sale)){
    echo $sale;
  } else {
    echo $price;
  }
  ?></p>
        <a href="<?php the_permalink(); ?>" class="pridbati">Придбати</a></td>
        </tr>
        

  <?php endwhile; ?>
      </tbody>
</table>

  
</div>

</div>
</div>
<?php get_footer();?>