AJAX add to cart button not working on custom loop products woocommerce

[clestcruz]

I’m building a custom e-commerce website using woocommerce and I’m having some trouble fixing the “add to cart button”. Whenever I add the multiple amounts it only increments or adds one item to the cart. This only happens and I create custom loop.

On the shop and single-product page, it works fine. If I add 10 items and press the add to cart button. It exactly adds 10 items to cart.

Here is the code I have been working on.

        <?php
        $args = array(
                'post_type' => 'product',
        );

        $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 
            <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 do_action( 'woocommerce_after_shop_loop_item' ); ?>
            </div>
             ?>

        </div>

        <?php wp_reset_postdata(); ?>

        <?php endwhile; else: ?>

        <?php endif; ?>

        <?php wp_reset_query(); ?>

I have already tried applying the solutions from this developer

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

and also this one

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

but it still same output. I really don’t know it only increments one item to the cart.