AJAX add to cart button not working on custom query loop product woocommerce
-
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…', '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.
- The topic ‘AJAX add to cart button not working on custom query loop product woocommerce’ is closed to new replies.