Create a gist now

Instantly share code, notes, and snippets.

WooCommerce - Template add-to-cart.php with quantity and Ajax!
* Custom Loop Add to Cart.
* Template with quantity and ajax.
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly.
global $product;
<?php if ( ! $product->is_in_stock() ) : ?>
<a href="<?php echo apply_filters( 'out_of_stock_add_to_cart_url', get_permalink( $product->id ) ); ?>" class="button"><?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?></a>
<?php else : ?>
$link = array(
'url' => '',
'label' => '',
'class' => ''
switch ( $product->product_type ) {
case "variable" :
$link['url'] = apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) );
case "grouped" :
$link['url'] = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) );
case "external" :
$link['url'] = apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) );
default :
if ( $product->is_purchasable() ) {
$link['url'] = apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
$link['label'] = apply_filters( 'add_to_cart_text', __( 'Add to cart', 'woocommerce' ) );
$link['class'] = apply_filters( 'add_to_cart_class', 'add_to_cart_button' );
} else {
$link['url'] = apply_filters( 'not_purchasable_url', get_permalink( $product->id ) );
$link['label'] = apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) );
// If there is a simple product.
if ( $product->product_type == 'simple' ) {
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype="multipart/form-data">
// Displays the quantity box.
// Display the submit button.
echo sprintf( '<button type="submit" data-product_id="%s" data-product_sku="%s" data-quantity="1" class="%s button product_type_simple">%s</button>', esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_html( $link['label'] ) );
} else {
echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="%s button product_type_%s">%s</a>', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
<?php endif; ?>
function cs_wc_loop_add_to_cart_scripts() {
if ( is_shop() || is_product_category() || is_product_tag() || is_product() ) : ?>
jQuery( document ).ready( function( $ ) {
$( document ).on( 'change', '.quantity .qty', function() {
$( this ).parent( '.quantity' ).next( '.add_to_cart_button' ).attr( 'data-quantity', $( this ).val() );
<?php endif;
add_action( 'wp_footer', 'cs_wc_loop_add_to_cart_scripts' );

Exactly what I needed, thank you!


Actually i tried the above step by adding them to add-to-cart.php file but it didnt work....please help on this...


Great stuff, works fine for me!


it works.

but it dont affect my "single product" page.

how can i make this snipet work in my single page?


thanks for the code, works perfectly. but there is some issue
Each time you add product it appends on previous quantity i needs it to update cart with latest quantity., also when u add 0 products it says 1 product added.



Great loop! Saved me a ton of time, thanks.


Hello, thanks for the code, for some reason the quantity is not matching the input.

The only takes the first initial input, if I update the input to something else, it keeps adding the initial number. Any help?


Almost Perfect, only issue is i got another plugin for variable products which show option selection box, quantity selection box and of course an Add to cart Button as well, but color, size, position of add to cart button is not exactly like on single product page and under the variable product page , how could i fix that . have a look at screenshot here


Could you share that plugin you mention?


This is generating errors on server running php5.4


It's referencing this line:
echo sprintf('%s', esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_html( $link['label'] ) );

Any Ideas? I have read that these offset errors are common on PHP 5.4 but not exactly sure how to fix it, any help would be appreciated!


I have used the above code and thank you for this. But i could not get the product variable option in the product single page, if the product type is "Variable Product". So i have changed two lines and it is working fine now.

switch ( $product->product_type ) {
case "variable" :
$link = apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
$label = woocommerce_variable_add_to_cart();


Not working on latest woocommerce (tested with storefront theme).


It worked verry fine but i upgrade woocommerce and it not working now :(
With latest woocommerce and storefront, it not work
Please help me if you can


Since 2.5.2 you have to add .ajax_add_to_cart css class to your link.
See here woothemes/woocommerce@856d192


Yes, as ebelrose said. In your add_to_cart.php you must replace "product_type_simple" with "ajax_add_to_cart" and it works.
Thank you very much, it worked great for me. (btw im not sure this is the correct solution, but it works for me)


WooCommerce add-to-cart.js uses jQuery data() function, in order to avoid cache issues update the quantity attribute with the data() function.

Use this:
$( this ).parent( '.quantity' ).next( '.add_to_cart_button' ).data( 'quantity', $( this ).val() );

Instead of this
$( this ).parent( '.quantity' ).next( '.add_to_cart_button' ).attr( 'data-quantity', $( this ).val() );

clestcruz commented Apr 23, 2016 edited

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 custom loop to query woocommerce products

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 the cart.

Here is the code I have been working on. I really don't know why it only increments one item to the cart. I tried applying ebelrose, raczosala and MonteroJJ and still the same output

    $args = array(
        'post_type' => 'product',
    $crate_products = new WP_Query($args);

    if ($crate_products->have_posts()):
        while ($crate_products->have_posts()):

                <div id="post-<?php
            the_ID() ?>" class="three columns product-post">

                <?php  wc_get_template_part('content', 'product'); ?>


            wp_reset_postdata(); ?>

      else : ?>

    endif; ?>

    wp_reset_query(); ?>
Lewiscowles1986 commented May 6, 2016 edited

Interested to know what you make of an alternative approach here. Also be interested to know if Ajax could be implemented in core WC?


So it does work just the add to cart filter for variable products have changed.



So if you do change the variable apply filter it will work.


So you can use this filter to remove the select options variable add to cart text.

// remove the filter 
remove_filter( 'variable_add_to_cart_text', 'filter_variable_add_to_cart_text', 10, 3 );


Does anyone know how you can adapt this code so that the page does not refresh after adding the product to the cart? Is anyone else having the same problem?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment