Фильтр товаров

1. Создайте шорткод [custom_filter], который будет выводить форму фильтра и список записей.

add_shortcode( 'custom_filter', 'custom_filter_shortcode' );

function custom_filter_shortcode() {
  ob_start();
  ?>
  <form id="custom-filter-form">
    <label for="filter-price">Сортировать по цене:</label>
    <select id="filter-price" name="filter-price">
      <option value="asc">По возрастанию</option>
      <option value="desc">По убыванию</option>
    </select>

    <label for="filter-color">Сортировать по цвету:</label>
    <select id="filter-color" name="filter-color">
      <option value="">Все цвета</option>
      <?php
      $terms = get_terms( 'color' );
      foreach ( $terms as $term ) {
        echo '<option value="' . $term->slug . '">' . $term->name . '</option>';
      }
      ?>
    </select>

    <label for="filter-tag">Сортировать по тегам:</label>
    <select id="filter-tag" name="filter-tag">
      <option value="">Все теги</option>
      <?php
      $terms = get_terms( 'tag' );
      foreach ( $terms as $term ) {
        echo '<option value="' . $term->slug . '">' . $term->name . '</option>';
      }
      ?>
    </select>

    <button id="filter-submit" type="submit">Применить фильтр</button>
  </form>

  <ul id="custom-filter-results">
    <?php
    $args = array(
      'post_type' => 'product',
      'posts_per_page' => -1,
      'meta_key' => 'price',
      'orderby' => 'meta_value_num',
      'order' => 'ASC'
    );
    $products = new WP_Query( $args );
    while ( $products->have_posts() ) {
      $products->the_post();
      echo '<li>' . get_the_title() . ' - Цена: ' . get_field( 'price' ) . ' руб.</li>';
    }
    wp_reset_postdata();
    ?>
  </ul>

  <script>
    jQuery(document).ready(function($) {
      $('#custom-filter-form').on('submit', function(event) {
        event.preventDefault();

        var data = {
          'action': 'custom_filter',
          'filter-price': $('#filter-price').val(),
          'filter-color': $('#filter-color').val(),
          'filter-tag': $('#filter-tag').val()
        };

        $.ajax({
          url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
          type: 'POST',
          data: data,
          success: function(response) {
            $('#custom-filter-results').html(response);
          }
        });
      });
    });
  </script>
  <?php
  return ob_get_clean();
}

2. Создайте обработчик Ajax-запроса, который будет фильтровать список записей в соответствии с выбранными параметрами.

function custom_filter_ajax_handler() {
  $args = array(
    'post_type' => 'product',
    'posts_per_page' => -1,
    'meta_key' => 'price',
    'orderby' => 'meta_value_num',
    'order' => $_POST['filter-price']
  );

  if ( $_POST['filter-color'] ) {
    $args['tax_query'] = array(
      array(
        'taxonomy' => 'color',
        'field' => 'slug',
        'terms' => $_POST['filter-color']
      )
    );
  }

  if ( $_POST['filter-tag'] ) {
    $args['tax_query'] = array(
      array(
        'taxonomy' => 'tag',
        'field' => 'slug',
        'terms' => $_POST['filter-tag']
      )
    );
  }

  $products = new WP_Query( $args );

  if ( $products->have_posts() ) {
    while ( $products->have_posts() ) {
      $products->the_post();
      echo '<li>' . get_the_title() . ' - Цена: ' . get_field( 'price' ) . ' руб.</li>';
    }
  } else {
    echo '<li>Нет записей, удовлетворяющих выбранным параметрам.</li>';
  }

  wp_die();
}

add_action( 'wp_ajax_custom_filter', 'custom_filter_ajax_handler' );
add_action( 'wp_ajax_nopriv_custom_filter', 'custom_filter_ajax_handler' );