<?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; ?> |
/*! | |
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(); | |
}); | |
}); |
This comment has been minimized.
This comment has been minimized.
Absolutely perfect, thanks man! |
This comment has been minimized.
This comment has been minimized.
You saved me a day mate. Many thanks. Works like a charm !! |
This comment has been minimized.
This comment has been minimized.
Same here, thanks a lot, clean and efficient ! |
This comment has been minimized.
This comment has been minimized.
Can anyone help? With this code included, I'm now seeing double. It now comes up with 2 "add to cart" and "qty" buttons. |
This comment has been minimized.
This comment has been minimized.
This is not the best way to do this, to save client rendering / processing it is better to only perform the check when the "add_to_cart" button is pressed. Not every time the quantity value is changed. Also much much simpler
|
This comment has been minimized.
This comment has been minimized.
This worked great, thanks a bunch. |
This comment has been minimized.
This comment has been minimized.
AJAX doesn't work anymore after updating to WC 2.5. Add to cart button and quantity selector works fine otherwise but site reloads. Any suggestions how to fix this? Edit. I solved the problem by adding ajax_add_to_cart class to the button. |
This comment has been minimized.
This comment has been minimized.
IPA2, Can you explain further on your fix please? Such as the code snippet and file to edit? Lol... Will be much appreciated by many that see your post I'm sure :D |
This comment has been minimized.
This comment has been minimized.
@thanewest - not sure if you're still looking for your solution, but I fixed the AJAX issue by adding the '.ajax_add_to_cart' class to the button on line 48 of add-to-cart.php as follows:
|
This comment has been minimized.
This comment has been minimized.
@webaware - On the first instance of adding products to an empy cart, I'm finding that it's taking a pretty long time (sometimes in excess of 6 seconds), but speeds up when adding further products. Is there a fix for this that you're aware of? |
This comment has been minimized.
This comment has been minimized.
For anyone using the https://docs.woothemes.com/document/minmax-quantities/ plugin. Here's an update to the minimum quantity rule. |
This comment has been minimized.
This comment has been minimized.
I'm able to get AJAX to work with the Add to Cart button, but for some reason changing the product quantity from the archive page loads the single-product template. Anyone know why that would be happening? Edit: Fixed it. My anchor tag was wrapped around the form. I just added |
This comment has been minimized.
This comment has been minimized.
@graemebryson thanks, was just updating a site for this and you saved me some time :) |
This comment has been minimized.
This comment has been minimized.
@graemebryson re: slow first time, should not be related to this script, probably more related to WooCommerce itself. Do you have a persistent object cache? (e.g. memcached) |
This comment has been minimized.
This comment has been minimized.
Hello! I just updated to 2.5.5 woocommerce and this is broken now! (it worked fine for 2.5.4) The problem - It is not adding the items to the cart. You need to refresh the page to get it to show the cart items... Please help, i have been looking for solutions, but am having no luck :( |
This comment has been minimized.
This comment has been minimized.
Thanks man!! perfect! |
This comment has been minimized.
This comment has been minimized.
Thanks, it worked after a few JS tweaks for the theme I'm using. Acutally, my theme's so FUBAR that I'm using the main code inside mythemedirectory/woocommerce/single-product/add-to-cart/simple.php, at which point it seems that wp_enqueueing isn't possible. So, I had to throw in these lines into functions.php instead of the main code:
|
This comment has been minimized.
This comment has been minimized.
please help me how to |
This comment has been minimized.
This comment has been minimized.
Help! |
This comment has been minimized.
This comment has been minimized.
Thanks, its working! |
This comment has been minimized.
This comment has been minimized.
Is there a way to make this work on pages using woocommerce single product shortcodes? It works fine on shop/archive pages but unfortunately I cannot get it to show on a custom page I have... |
This comment has been minimized.
This comment has been minimized.
Thanks, it's working but not like I want. First one is that quantity input goes into - numbers. And the second one is I want to have control over it. Like placing it wherever I want: center or in line with button and remove Price tag. I want something like in site plov.com or plov.kz. Please help me do that. I use Widgetkit grid to show products on homepage and I have add to cart button in that grid. Quantity input shows left aligned and button is Centered. |
This comment has been minimized.
This comment has been minimized.
When WP_Debug enabled I get 10000 of errors, because get |
This comment has been minimized.
This comment has been minimized.
It's work but does not send value from input. I have + and - buttons. When I enter the number of works, but that's not the point |
This comment has been minimized.
This comment has been minimized.
I've rewritten the andrewmclagan code and it works!
Thanks Bro! |
This comment has been minimized.
This comment has been minimized.
Hi, Thanks for the help. |
This comment has been minimized.
This comment has been minimized.
@xnnx were you able to fix the issue? |
This comment has been minimized.
This comment has been minimized.
Hi, I would like the quantity selector button only to show on the loop if the product is a certain category. I tried adding this code to replace line 50 in the add-to-cart.php file, but I can't get it to work. Is this the wrong code or am I inserting into the wrong place (or does this just not work)?
|
This comment has been minimized.
This comment has been minimized.
This code is working fine to add the item in mini ajax cart, but a one issue is when i choose multiple qty it update only one qty. Simply to say the qty is not updating. can anyone help to resolve this qty update issue. As well as it is not removing view cart link. When performing the add to cart action. |
This comment has been minimized.
This comment has been minimized.
Worked perfect for me. THANKS! (does anyone know how to implement the loader on the button like the default woocommerce one?) |
This comment has been minimized.
This comment has been minimized.
NVM, used the "adding_to_cart" and "added_to_cart" hooks in the JS |
This comment has been minimized.
This comment has been minimized.
Unfortunately, this no longer works with Woo 4.0.1 - the quantity sent is always 1. |
This comment has been minimized.
This comment has been minimized.
Can confirm that this is no longer working with Woo 4.* |
This comment has been minimized.
This comment has been minimized.
Yes, not working anymore after upgrade. Hope there will be a fix soon. |
This comment has been minimized.
This comment has been minimized.
After Woo 4.0+, I've found that adjusting the JS to the following does the trick:
Using .data() is apparently the wrong thing to use in this case, according to the docs.
So instead, we are explicitly updating the data-quantity attribute to the input value using .attr(). |
This comment has been minimized.
This comment has been minimized.
Many thanks! It works :) |
This comment has been minimized.
This comment has been minimized.
Not sure why, but this worked until I updated Woo in September 2020. Now the quantity I set doesn't reflect on cart. Instead only 1 product is added. EDIT: For me it was necessary to add another parent() function.
|
This comment has been minimized.
This comment has been minimized.
Are you saying you replaced the following from the js file, with the code you've provided?
|
This comment has been minimized.
This comment has been minimized.
i'm using Woocommerce 4.8 and i got this: |
This comment has been minimized.
Thanks!