Ask your WordPress questions! Pay money and get answers fast! (more info)

Woocommerce ajax add to cart WordPress



We are developing an e-commerce site with woocommerce plugin for our client.

This is an online grocery shop. Customers should be able to add products to cart on product archives page directly, continuously, without the page reloading on each add-to-cart click.

I have managed to grab the php code of quantity field and add to cart button from single products page php. It is, however, not ajax enabled.

else if($flatsome_opt['grid_style'] == "grid3") { ?>

<div class="info style-<?php echo $flatsome_opt['grid_style']; ?>">
<a href="<?php the_permalink(); ?>">
<table style="margin-bottom: 0px;">

<p class="name"><?php the_title(); ?></p>

<?php if ( in_array( 'yith-woocommerce-wishlist/init.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { ?>
<?php echo do_shortcode('[yith_wcwl_add_to_wishlist]'); ?>
<?php } ?></td>
<td><?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?>
<table style="margin-bottom: 0px;">
<h5 class="shop_attributes"><?php $product->list_attributes(); ?></h5>
<form class="cart" method="post" enctype='multipart/form-data'>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

if ( ! $product->is_sold_individually() )
woocommerce_quantity_input( array(
'min_value' => apply_filters( 'woocommerce_quantity_input_min', 1, $product ),
'max_value' => apply_filters( 'woocommerce_quantity_input_max', $product->backorders_allowed() ? '' : $product->get_stock_quantity(), $product )
) );
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />

<button type="submit" class="single_add_to_cart_button button ttbutton secondary"><?php echo $product->add_to_cart_text(); ?></button>

<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>

</div><!-- end info -->

<?php } ?>

How can I add ajax function to this?


Answers (3)


Romel Apuya answers:

Have you enabled this??

firefish comments:

yes, but i need the quantity field too.

attached an image of the product when ajax add to cart is enabled.