Enable Ajax add to cart button on products custom loop in Woocommerce

Question

This is the code which I have written for the custom loop code for the product-archive page. I want to use ajax for adding products to the cart. How should I do it?
I would also like to know which woocommerce function show woocommerce notices to the customer. Like when I click add to cart Notice should be shown to the client that product has been added.

$args = array(
    'post_type' => 'product',
    'posts_per_page' => 12,
);
$loop = new WP_Query($args);
if ($loop->have_posts()) {
    while ($loop->have_posts()): $loop->the_post();
      ?>
        <!-- tab product -->
        <li class="col-sx-12 col-sm-4">
          <div class="product-container">
            <div class="left-block">
              <a href="<?php echo get_permalink(); ?>" target="_blank">
                <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($loop->post->ID), 'single-post-thumbnail');?>
                <img height="300px" width="300px" class="img-responsive" alt="product" src="<?php echo $image[0]; ?>">
              </a>
              <div class="quick-view">

              </div>
              <div class="add-to-cart ">
                <a href="<?php echo $product->add_to_cart_url(); ?>" class="cart">
                  <span>
                    <span class="add-to-cart-content">Add To Cart
                    </span>
                  </span>
                </a>
              </div>
            </div>
            <div class="right-block">
              <h5 class="product-name">
                <a href="<?php echo get_permalink(); ?>" target="_blank" class="product-block-click">
                  <?php echo $product->get_title(); ?>
                </a>
              </h5>
              <div class="content_price">
                <span class="price product-price">
                  <i class="fa fa-inr" aria-hidden="true">
                  </i>
                  <?php echo $product->get_regular_price(); ?>
                </span>
                <span class="price old-price">
                  <i class="fa fa-inr" aria-hidden="true">
                  </i>
                  <?php echo $product->get_sale_price(); ?>
                </span>
                <span class="discount-block">50 % OFF
                </span>
              </div>
            </div>
          </div>
        </li>
      <?php
    endwhile;
}
echo "</ul>";
wp_reset_postdata();
?>

There are quite a few tutorials on the Internet about adding a WooCommerce product to the cart via AJAX. Have you tried any? — cabrerahector
More on @LoicTheAztec point, you should enable Ajax enabled cart button from the WooCommerce Setting -> Products, if you haven't enabled it. — Mohammad Ashique Ali

LoicTheAztec LoicTheAztec · Accepted Answer · 2018-10-26T20:15:41

For your Ajax add to cart button, you just simply need to use the same code than in the template loop/add-to-cart.php (which is not so simple if you are not used to Woocommerce).

There is no notices on Ajax add to cart action, but instead a "view cart" button appears on the right of the add to cart button that did the action.

Note:

Ajax add to cart button doesn't work with variable or grouped products.
Ajax add to cart needs to be enabled in Woocommerce > Settings > Products:

Your revisited code with the functional Ajax add to cart button:

$loop = new WP_Query( array(
    'post_type' => 'product',
    'posts_per_page' => 12,
) );

if ($loop->have_posts()) {
    while ($loop->have_posts()): $loop->the_post();
      $product = wc_get_product($loop->post->ID);
      ?>
        <!-- tab product -->
        <li class="col-sx-12 col-sm-4">
          <div class="product-container">
            <div class="left-block">
              <a href="<?php echo get_permalink(); ?>" target="_blank">
                <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($loop->post->ID), 'single-post-thumbnail');?>
                <img height="300px" width="300px" class="img-responsive" alt="product" src="<?php echo $image[0]; ?>">
              </a>
              <div class="quick-view">

              </div>
              <div class="add-to-cart "><?php
                echo sprintf( '<a href="%s" data-quantity="1" class="%s" %s>%s</a>',
                    esc_url( $product->add_to_cart_url() ),
                    esc_attr( implode( ' ', array_filter( array(
                        'button', 'product_type_' . $product->get_type(),
                        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
                        $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
                    ) ) ) ),
                    wc_implode_html_attributes( array(
                        'data-product_id'  => $product->get_id(),
                        'data-product_sku' => $product->get_sku(),
                        'aria-label'       => $product->add_to_cart_description(),
                        'rel'              => 'nofollow',
                    ) ),
                    esc_html( $product->add_to_cart_text() )
                );
              ?></div>
            </div>
            <div class="right-block">
              <h5 class="product-name">
                <a href="<?php echo get_permalink(); ?>" target="_blank" class="product-block-click">
                  <?php echo $product->get_title(); ?>
                </a>
              </h5>
              <div class="content_price">
                <span class="price product-price">
                  <i class="fa fa-inr" aria-hidden="true">
                  </i>
                  <?php echo $product->get_regular_price(); ?>
                </span>
                <span class="price old-price">
                  <i class="fa fa-inr" aria-hidden="true">
                  </i>
                  <?php echo $product->get_sale_price(); ?>
                </span>
                <span class="discount-block">50 % OFF
                </span>
              </div>
            </div>
          </div>
        </li>
      <?php
    endwhile;
}
echo "</ul>";
wp_reset_postdata();
?>

Tested and works.

Enable Ajax add to cart button on products custom loop in Woocommerce

1 Answers