AJAX добавить в корзину кнопку, не работающую с пользовательским запросом loop product woocommerce

Я создаю пользовательский сайт электронной коммерции, используя woocommerce, и у меня возникли проблемы с установкой кнопки "добавить в корзину". Всякий раз, когда я добавляю несколько сумм в поле ввода/количество, он только увеличивает или добавляет один элемент в корзину. Это происходит только при создании настраиваемого цикла.

В магазине и на странице с одним продуктом он отлично работает. Если я добавлю 10 элементов и нажмите кнопку "Добавить в корзину". Он точно добавляет 10 предметов в корзину.

Вот шаблон, который я работал.

<?php

/*
* Template Name: Home
*/

get_header(); ?>

<section class="full-width home-template">

    <div class="full-width shop-section">

        <div class="container">

            <?php
            $args = array(
                    'post_type' => 'product',
                    'meta_query' => array(
                        array(
                            'key' => '_stock_status',
                            'value' => 'instock'
                        )
                    )
            );

            $crate_products = new WP_Query ( $args );
            if ( $crate_products->have_posts() ) : while ( $crate_products->have_posts() ) :
              $crate_products->the_post();

            ?>

            <div id="post-<?php the_ID() ?>" class="three columns product-post">

                <?php // wc_get_template_part('content', 'product'); ?>


                <figure class="featured-image">
                    <?php
                    //Display Product Thumbnail
                    $product_thumbnail =  woocommerce_get_product_thumbnail();

                    ?>

                    <a href="<?php  the_permalink()?>" ><?php echo $product_thumbnail ?></a>
                </figure>


                <h2 class="product-price"><a href="<?php the_permalink(); ?>"><?php wc_get_template( 'single-product/price.php' ); ?></a></h2>
                <span class="product-name"><?php the_title(); ?></span>

                <?php // woocommerce_quantity_input(); ?>


                <div class="add-to-cart-btn">
                <?php woocommerce_template_loop_add_to_cart( $crate_products->post, $product ); ?>
                <?php // do_action( 'woocommerce_after_shop_loop_item' ); ?>
                </div>


            </div>

            <?php wp_reset_postdata(); ?>

            <?php endwhile; else: ?>

            <?php endif; ?>

            <?php wp_reset_query(); ?>


        </div>

    </div>


</section>


<?php get_footer(); ?>

Смущает также, что функциональность AJAX работает на шаблоне upsells (up-sells.php), который является шаблоном woocommerce, и он отлично работает.

<?php
/**
 * Single Product Up-Sells
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/up-sells.php.
 *
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

global $product, $woocommerce_loop;

$upsells = $product->get_upsells();

if ( sizeof( $upsells ) === 0 ) {
    return;
}

$meta_query = WC()->query->get_meta_query();

$args = array(
    'post_type'           => 'product',
    'ignore_sticky_posts' => 1,
    'no_found_rows'       => 1,
    'posts_per_page'      => $posts_per_page,
    'orderby'             => $orderby,
    'post__in'            => $upsells,
    'post__not_in'        => array( $product->id ),
    'meta_query'          => $meta_query
);

$products = new WP_Query( $args );

$woocommerce_loop['columns'] = $columns;

if ( $products->have_posts() ) : ?>

    <div class="upsells products">

        <div class="twelve columns">
            <h2><?php // _e( 'You may also like&hellip;', 'woocommerce' ) ?></h2>
      </div>

        <?php woocommerce_product_loop_start(); ?>

            <?php while ( $products->have_posts() ) : $products->the_post(); ?>

                <div id="post-<?php the_ID() ?>" class="three columns product-post">

                    <?php  wc_get_template_part('content', 'product'); ?>





                </div>

            <?php endwhile; // end of the loop. ?>

        <?php woocommerce_product_loop_end(); ?>

    </div>

<?php endif;

wp_reset_postdata();

Я уже пробовал применить решения от этого разработчика

• https://gist.github.com/claudiosmweb/5114131

а также этот

• https://gist.github.com/webaware/6260468

Но он все равно производит тот же вывод. Я действительно не знаю, почему он только увеличивает один предмет в тележке. Я проверил консоль браузера на наличие каких-либо ошибок и также прокомментировал некоторые части кода, чтобы обеспечить или сообщить вам, что я пробовал разные методы или параметры, чтобы сделать работу с функционалом