Last active
October 28, 2024 06:19
-
-
Save webaware/6260468 to your computer and use it in GitHub Desktop.
WooCommerce purchase page add-to-cart with quantity and AJAX, without customising any templates. See blog post for details: http://snippets.webaware.com.au/snippets/woocommerce-add-to-cart-with-quantity-and-ajax/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* start the customisation | |
*/ | |
function custom_woo_before_shop_link() { | |
add_filter('woocommerce_loop_add_to_cart_link', 'custom_woo_loop_add_to_cart_link', 10, 2); | |
add_action('woocommerce_after_shop_loop', 'custom_woo_after_shop_loop'); | |
} | |
add_action('woocommerce_before_shop_loop', 'custom_woo_before_shop_link'); | |
/** | |
* customise Add to Cart link/button for product loop | |
* @param string $button | |
* @param object $product | |
* @return string | |
*/ | |
function custom_woo_loop_add_to_cart_link($button, $product) { | |
// not for variable, grouped or external products | |
if (!in_array($product->product_type, array('variable', 'grouped', 'external'))) { | |
// only if can be purchased | |
if ($product->is_purchasable()) { | |
// show qty +/- with button | |
ob_start(); | |
woocommerce_simple_add_to_cart(); | |
$button = ob_get_clean(); | |
// modify button so that AJAX add-to-cart script finds it | |
$replacement = sprintf('data-product_id="%d" data-quantity="1" $1 ajax_add_to_cart add_to_cart_button product_type_simple ', $product->id); | |
$button = preg_replace('/(class="single_add_to_cart_button)/', $replacement, $button); | |
} | |
} | |
return $button; | |
} | |
/** | |
* add the required JavaScript | |
*/ | |
function custom_woo_after_shop_loop() { | |
?> | |
<script> | |
jQuery(function($) { | |
<?php /* when product quantity changes, update quantity attribute on add-to-cart button */ ?> | |
$("form.cart").on("change", "input.qty", function() { | |
$(this.form).find("button[data-quantity]").data("quantity", this.value); | |
}); | |
<?php /* remove old "view cart" text, only need latest one thanks! */ ?> | |
$(document.body).on("adding_to_cart", function() { | |
$("a.added_to_cart").remove(); | |
}); | |
}); | |
</script> | |
<?php | |
} |
Thanks for this great Solution, I have a simple question:
I want to apply the same for the related products loop?
Good Question,
You already have a solution?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What's up @webaware
Your code worked great, thanks for sharing.
However, I use the ContentViews "PRO" plugin to display my products, and the quantity box doesn't appear on the products displayed in the plugin view.
https://br.wordpress.org/plugins/content-views-query-and-display-post-page/
The developers told me that:
And our plugin uses the "add_to_cart" shortcode of WooCommerce to show the "Add to cart" button.
What change can I make so that your code displays the quantities field in contentviews as well?