Support » Plugin: WooCommerce » AJAX add to cart button not working on custom query loop product woocommerce

  • Resolved clestcruz

    (@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 when I create a 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 template I have been working.

    <?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(); ?>

    What’s confusing also is that I tried applying the loop on the up-sells template(up-sells.php) which is a template of woocommerce and it works fine.

    <?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();

    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 produces the same output. I really don’t know why it only increments one item to the cart.

    https://wordpress.org/plugins/woocommerce/

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘AJAX add to cart button not working on custom query loop product woocommerce’ is closed to new replies.