-
-
Save webaware/6260326 to your computer and use it in GitHub Desktop.
| <?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: [email protected] | |
| 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(); | |
| }); | |
| }); |
Worked perfect for me. THANKS!
(does anyone know how to implement the loader on the button like the default woocommerce one?)
Worked perfect for me. THANKS!
(does anyone know how to implement the loader on the button like the default woocommerce one?)
NVM, used the "adding_to_cart" and "added_to_cart" hooks in the JS
Unfortunately, this no longer works with Woo 4.0.1 - the quantity sent is always 1.
Can confirm that this is no longer working with Woo 4.*
Yes, not working anymore after upgrade. Hope there will be a fix soon.
After Woo 4.0+, I've found that adjusting the JS to the following does the trick:
$(".button.product_type_simple.add_to_cart_button.ajax_add_to_cart").on('click', function() { var $button = $(this); $button.attr('data-quantity', $button.parent().find('input.qty').val()); });
Using .data() is apparently the wrong thing to use in this case, according to the docs.
Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr.
So instead, we are explicitly updating the data-quantity attribute to the input value using .attr().
Many thanks! It works :)
After Woo 4.0+, I've found that adjusting the JS to the following does the trick:
$(".button.product_type_simple.add_to_cart_button.ajax_add_to_cart").on('click', function() { var $button = $(this); $button.attr('data-quantity', $button.parent().find('input.qty').val()); });Using .data() is apparently the wrong thing to use in this case, according to the docs.
Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr.
So instead, we are explicitly updating the data-quantity attribute to the input value using .attr().
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.
$(".button.product_type_simple.add_to_cart_button.ajax_add_to_cart").on('click', function() { var $button = $(this); $button.attr('data-quantity', $button.parent().parent().find('input.qty').val()); });
After Woo 4.0+, I've found that adjusting the JS to the following does the trick:
$(".button.product_type_simple.add_to_cart_button.ajax_add_to_cart").on('click', function() { var $button = $(this); $button.attr('data-quantity', $button.parent().find('input.qty').val()); });Using .data() is apparently the wrong thing to use in this case, according to the docs.
Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr.
So instead, we are explicitly updating the data-quantity attribute to the input value using .attr().
Are you saying you replaced the following from the js file, with the code you've provided?
$("form.cart").on("change", "input.qty", function() {
if (this.value === "0")
this.value = "1";
$(this.form).find("button[data-quantity]").data("quantity", this.value);
});
i'm using Woocommerce 4.8 and i got this:
" Fatal error: Uncaught Error: Call to a member function get_price() on null "
Hello,
I was wondering if it was possible when you click on the "-" button (in my archive page) that removes the quantity of the product in the cart (in ajax)?
I want to reproduce the same system as in the basket, add or delete the ajax quantities with the minus and the plus.
Do you have an idea please?
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.