Фильтрация продуктов по категории Ajax по умолчанию показывает все

У меня есть код, который перечисляет категории и продукты по категориям.

Когда я нажимаю “Все”, он показывает все продукты, но когда я перехожу на страницу /products, по умолчанию он не показывает все продукты, и мне нужно нажать “Все”, чтобы получить все продукты. Как я могу получить все продукты при переходе на страницу /products по умолчанию без нажатия на какую-либо категорию или ссылку “Все”?

Мой functions.php

function add_custom_scripts() {
wp_enqueue_script( 'ajax_term', get_stylesheet_directory_uri() . '/ajax/ajax-terms.js', array('jquery'), NULL, true );
wp_localize_script( 'ajax_term', 'wpAjax', array('ajaxUrl' => admin_url('admin-ajax.php')));    
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );

Products.php – страница /products

<div class="categories">
<ul class="categories-filter" name="categoryfilter">
    <li><a type="button" data-posttype="product" class="js-filter-item" href="<?php echo home_url(); ?>">Все</a></li>
    <?php
    if( $terms = get_terms( array( 
        'taxonomy' => 'product_cat' ) ) ) : 

        foreach ( $terms as $term ) :
        
         ?>
        <li>
            <a type="button" data-category="<?php echo $term->term_id; ?>" 
                data-posttype="product" 
                    data-taxonomy="<?php echo $term->taxonomy; ?>" class="js-filter-item" href="<?php echo $term->term_id; ?>" >
                <?php echo $term->name; ?>
        </a>
        </li>
    <?php 
          endforeach; 
          endif; 
    ?>
</ul>
</div>

<div id="response"></div>

Ajax-terms.js

(function($){

$(document).ready(function(){
    $(document).on('click', '.js-filter-item', function(event){
        (event).preventDefault();

        var category = $(this).data('category');

        $.ajax({
            url: wpAjax.ajaxUrl,
            data: { 
                action: 'filterterm', 
                category: category, 
                taxonomy:  $(this).data('taxonomy'),
                posttype:  $(this).data('posttype')
                },
            type: 'post',
            success: function(result){
                $('#response').html(result);
            },
            error: function(result){
                console.warn(result);
            }
        });
    });
});
})(jQuery);

Обработчик в functions.php

<?php

add_action('wp_ajax_nopriv_filterterm', 'filter_ajax_term');
add_action('wp_ajax_filterterm', 'filter_ajax_term');

function filter_ajax_term(){

$category = $_POST['category'];

 $args = array(
    'post_type' => 'product', 
    'posts_per_page' => -1, 
    'orderby'   => 'NAME', 
    'order' => 'ASC'
 );

 if(isset($category)) {
    $args['tax_query'] = 
    array( 
        array( 
                'taxonomy' => $_POST['taxonomy'], //или тег или пользовательская таксономия
                'field' => 'id', 
                'terms' => array((int)$category) 
            ) 
    ); 

}
 
$the_query = new WP_Query( $args ); ?>

    <div class="container">

        <?php if ( $the_query->have_posts() ) : 
            while ( $the_query->have_posts() ) : $the_query->the_post(); 
            
            $category = get_the_category(); 

            the_title('<h2>', '</h2>');
    
        endwhile; endif; ?>

    </div>

<?php

die();
}
?>

Во-первых, вам следует использовать REST API для фронтенда вместо admin-ajax.
Во-вторых, не следует использовать непроверенные значения POST.
А для ваших продуктов при загрузке страницы вам нужно сказать вашему Javascript заполнить ID “response”, когда ID присутствует.
Сейчас вы загружаете продукты только при срабатывании события нажатия на элемент класса js-filter-item.
Попробуйте это с помощью вспомогательной функции, подобной этой.

(function($){$(document).ready(function(){

if ($('#response').length){

  function load_all_products() {
    var category = $(this).data('category');

    $.ajax({
        url: wpAjax.ajaxUrl,
        data: { 
            action: 'filterterm', 
            category: category, 
            taxonomy:  $(this).data('taxonomy'),
            posttype:  $(this).data('posttype')
            },
        type: 'post',
        success: function(result){
            $('#response').html(result);
        },
        error: function(result){
            console.warn(result);
        }
    });
  }

  load_all_products();

  $('.js-filter-item').on('click', function(event){
      (event).preventDefault();
      load_all_products();
  });
}

});
})(jQuery);

Это не тестировалось и не будет работать копированием и вставкой, но, возможно, вы поймете суть.
Когда ID “response” присутствует, вызывайте функцию load_all_products().
Когда вы нажимаете на фильтр с классом “js-filter-item”, вызывайте эту функцию с выбранной кнопкой/фильтром/чем угодно.
Возможно, вам придется изменить вызовы $(this).data(xxx) на корректные значения.
Для пагинации вам нужно будет добавить переменную страницы.