WooCommerce purchase page add-to-cart with quantity and AJAX, by customising the add-to-cart template in the WooCommerce loop. See blog post for details: http://snippets.webaware.com.au/snippets/woocommerce-add-to-cart-with-quantity-and-ajax/
add-to-cart.php
<?php /** * Loop Add to Cart -- with quantity and AJAX * requires associated JavaScript file qty-add-to-cart.js * * @link http://snippets.webaware.com.au/snippets/woocommerce-add-to-cart-with-quantity-and-ajax/ * @link https://gist.github.com/mikejolley/2793710/ */ // add this file to folder "woocommerce/loop" inside theme global $product; if( $product->get_price() === '' && $product->product_type != 'external' ) return; // script for add-to-cart with qty wp_enqueue_script('qty-add-to-cart', get_stylesheet_directory_uri() . '/js/qty-add-to-cart.js', array('jquery'), '1.0.1', true); ?> <?php if ( ! $product->is_in_stock() ) : ?> <a href="<?php echo get_permalink($product->id); ?>" class="button"><?php echo apply_filters('out_of_stock_add_to_cart_text', __('Read More', 'woocommerce')); ?></a> <?php else : ?> <?php switch ( $product->product_type ) { case "variable" : $link = get_permalink($product->id); $label = apply_filters('variable_add_to_cart_text', __('Select options', 'woocommerce')); break; case "grouped" : $link = get_permalink($product->id); $label = apply_filters('grouped_add_to_cart_text', __('View options', 'woocommerce')); break; case "external" : $link = get_permalink($product->id); $label = apply_filters('external_add_to_cart_text', __('Read More', 'woocommerce')); break; default : $link = esc_url( $product->add_to_cart_url() ); $label = apply_filters('add_to_cart_text', __('Add to cart', 'woocommerce')); break; } //printf('<a href="%s" rel="nofollow" data-product_id="%s" class="button add_to_cart_button product_type_%s">%s</a>', $link, $product->id, $product->product_type, $label); if ( $product->product_type == 'simple' ) { ?> <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'> <?php woocommerce_quantity_input(); ?> <button type="submit" data-quantity="1" data-product_id="<?php echo $product->id; ?>" class="button alt ajax_add_to_cart add_to_cart_button product_type_simple"><?php echo $label; ?></button> </form> <?php } else { printf('<a href="%s" rel="nofollow" data-product_id="%s" class="button add_to_cart_button product_type_%s">%s</a>', $link, $product->id, $product->product_type, $label); } ?> <?php endif; ?>
qty-add-to-cart.js
/*! script for WooCommerce add to cart with quantity, via AJAX Author: support@webaware.com.au Author URI: http://snippets.webaware.com.au/ License: GPLv2 or later Version: 1.0.1 */ // @link http://snippets.webaware.com.au/snippets/woocommerce-add-to-cart-with-quantity-and-ajax/ // @link https://gist.github.com/mikejolley/2793710/ // add this file to folder "js" inside theme jQuery(function ($) { /* when product quantity changes, update quantity attribute on add-to-cart button */ $("form.cart").on("change", "input.qty", function() { if (this.value === "0") this.value = "1"; $(this.form).find("button[data-quantity]").data("quantity", this.value); }); /* remove old "view cart" text, only need latest one thanks! */ $(document.body).on("adding_to_cart", function() { $("a.added_to_cart").remove(); }); });
in theme functions.php
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_loop_add_to_cart', 30 );