How to fix add to cart with quantity and AJAX Woocommerce 2.1 release

AJAX Woocommerce 2.1WooCommerce is a great e-commerce plugin for WordPress. It has some very nice basic features, but it’s also easy to customise and extend. On single product pages, you can add to cart with a quantity other than just one, and on the purchase page you can add to cart via AJAX without leaving the page. Wouldn’t it be nice to add to cart with both quantity and AJAX?

So Woocomerce 2.1 not working with add to cart via quantity and AJAX. I have work base on a project for a customer, I find out fix this probem as well, Now let being step by step tho fix.

First all at go to your theme/woocommerce/loop/add-to-cart.php change current code with new one below:

  1. <?php
  2. /**
  3. * Loop Add to Cart -- with quantity and AJAX
  4. * requires associated JavaScript file quantity.js
  5. *
  6. * @ref: http://www.w3networking.com/fix-add-cart-quantity-ajax-woocommerce-21-release/
  7. */
  8.  
  9. // add this file to folder "woocommerce/loop" inside theme
  10.  
  11. global $product;
  12.  
  13. //if( $product->get_price() === '' && $product->product_type != 'external' ) return;
  14.  
  15. // script for add-to-cart with qty
  16. if (defined('SCRIPT_DEBUG') && SCRIPT_DEBUG) {
  17. $min = '';
  18. $version = time();
  19. }
  20. else {
  21. $min = '.min';
  22. $version = '1.1.2';
  23. }
  24. wp_enqueue_script('qty-add-to-cart', get_stylesheet_directory_uri() . "/js/quantity.js", array('jquery'), $version, true);
  25.  
  26. ?>
  27.  
  28. <?php if ( ! $product->is_in_stock() ) : ?>
  29.  
  30. <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>
  31.  
  32. <?php else : ?>
  33.  
  34. <?php
  35.  
  36. switch ( $product->product_type ) {
  37. case "variable" :
  38. $link = get_permalink($product->id);
  39. $label = apply_filters('variable_add_to_cart_text', __('Select options', 'woocommerce'));
  40. break;
  41. case "grouped" :
  42. $link = get_permalink($product->id);
  43. $label = apply_filters('grouped_add_to_cart_text', __('View options', 'woocommerce'));
  44. break;
  45. case "external" :
  46. $link = get_permalink($product->id);
  47. $label = apply_filters('external_add_to_cart_text', __('Read More', 'woocommerce'));
  48. break;
  49. default :
  50. $link = esc_url( $product->add_to_cart_url() );
  51. $label = apply_filters('add_to_cart_text', __('Add to cart', 'woocommerce'));
  52. break;
  53. }
  54.  
  55. //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);
  56.  
  57. if ( $product->product_type == 'simple' ) {
  58.  
  59. ?>
  60. <form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
  61.  
  62. <?php woocommerce_quantity_input(); ?>
  63.  
  64. <button type="submit" data-quantity="1" data-product_id="<?php echo $product->id; ?>" class="button alt add_to_cart_button product_type_simple">
  65. <?php echo $label; ?>
  66. </button>
  67.  
  68. </form>
  69. <?php
  70.  
  71. } else {
  72.  
  73. 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);
  74.  
  75. }
  76.  
  77. ?>
  78.  
  79. <?php endif; ?>

 

Copy and paste thi Javascript with name quantity.js located you theme/js/

  1. /*!
  2. script for WooCommerce add to cart with quantity, via AJAX
  3. Author URI: http://www.w3networking.com/fix-add-cart-quantity-ajax-woocommerce-21-release/
  4. Version: 1.1.2
  5. */
  6.  
  7. // @ref: http://www.w3networking.com/fix-add-cart-quantity-ajax-woocommerce-21-release/
  8. // add this file to folder "js" inside theme
  9.  
  10. jQuery(function ($) {
  11.  
  12. /* when product quantity changes, update quantity attribute on add-to-cart button */
  13. $("form.cart").on("change", "input.qty", function() {
  14. if (this.value === "0")
  15. this.value = "1";
  16.  
  17. $(this.form).find("button[data-quantity]").attr("data-quantity", this.value);
  18. });
  19.  
  20. /* remove old "view cart" text, only need latest one thanks! */
  21. $(document.body).on("adding_to_cart", function() {
  22. $("a.added_to_cart").remove();
  23. });
  24.  
  25. });