I know this is a big question but i'm struggling with this for too long without any improvements because I know very little things about coding.

I'm trying to create a "simple" ajax product filter by category and I've seen different tutorials and surely messed up everything trying to implement this to an existing wordpress theme.

I started by listing the links of my parent product categories in my archive page, and this seems to work well:

$category = get_queried_object();
$categories = get_terms( $category->taxonomy,
    array( 'parent' => $category->term_id,

foreach($categories as $cat) : ?>
    <li class="archive-filter__item">
    <a data-category="<?= $cat->term_id; ?>" href="<?= get_term_link($cat->term_id); ?>"><?= $cat->name; ?></a>
<?php endforeach; ?>

Then I create (I think) a jQuery to listen the click on that link, get the data from it and output in the section below:

(function($) {

    $(document).on('click', '.archive-filter__item > a', function(e){

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

    url: wpAjax.ajaxUrl,
    data: {action: 'filter', category: category },
    success: function(result) {

        return false;

Then I create an "example.php" file to output the function, where the loop is the same of my theme's archive page (after the WPQuery):


use Pikart\Ombra\DependencyInjection\Service;
use Pikart\Ombra\Shop\ShopTemplateHelper;
use Pikart\Ombra\ThemeOptions\ThemeOption;
use Pikart\WpThemeCore\Shop\ShopUtil;

add_action( 'wp_ajax_nopriv_filter', 'filter_ajax' );
add_action( 'wp_ajax_filter', 'filter_ajax' );

function filter_ajax() {

    $category = $_POST['category'];

    $args = array (
    'post_type' => 'product',

    if(isset($category)) {
        $args['category'] = array($category);

    $query = new WP_Query($args); 

    if ( ShopTemplateHelper::woocommerceProductLoop() ) {

        do_action( 'woocommerce_before_shop_loop' );


        if ( $query->wc_get_loop_prop( 'total' ) ) {
            while ( $query->have_posts() ) {

                do_action( 'woocommerce_shop_loop' );

                wc_get_template_part( 'content', 'product' );


        do_action( 'woocommerce_after_shop_loop' );

    }  else {

        do_action( 'woocommerce_no_products_found' );



I enqueued the scripts with:

function load_scripts() {

wp_enqueue_script('ajax', get_template_directory_uri() . '/assets/js/scripts3.js', array('jquery'), NULL, true);

wp_localize_script('ajax' , 'wpAjax', 
    array('ajaxUrl' => admin_url('admin-ajax.php'))
}add_action( 'wp_enqueue_scripts', 'load_scripts' );

And added this to my theme's functions.php:

require_once get_template_directory() . '/includes/src/scripts.php';
require_once get_template_directory() . '/includes/src/example.php';

Well, all I can get from this is that when I click on the category link it outputs in the correct section the 'woocommerce_no_product_found' function of the loop.

I really can't understand where the error is, if it's in the jquery or in the "example.php" file.

Can anyone help me figure it out? You'll have all my love <3

Sorry for my bad english. Thank you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.