Answer the question
In order to leave comments, you need to log in
How do I prevent the page from reloading when adding a product to the cart?
I use a filter on the site to select the quantity of goods:
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
if ( $product && ! $product->is_sold_individually() ) {
$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data"><td class="ten">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '</td><td class="twenty"><button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form>';
}
return $html;
}
Answer the question
In order to leave comments, you need to log in
I googled the working code with ajax for you
/**
* Add quantity field on the shop page.
*/
function ace_shop_page_add_quantity_field() {
/** @var WC_Product $product */
$product = wc_get_product( get_the_ID() );
if ( ! $product->is_sold_individually() && 'variable' != $product->get_type() && $product->is_purchasable() ) {
woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
}
}
add_action( 'woocommerce_after_shop_loop_item', 'ace_shop_page_add_quantity_field', 12 );
/**
* Add required JavaScript.
*/
function ace_shop_page_quantity_add_to_cart_handler() {
wc_enqueue_js( '
$(".woocommerce .products").on("click", ".quantity input", function() {
return false;
});
$(".woocommerce .products").on("change input", ".quantity .qty", function() {
var add_to_cart_button = $(this).parents( ".product" ).find(".add_to_cart_button");
// For AJAX add-to-cart actions
add_to_cart_button.attr("data-quantity", $(this).val());
// For non-AJAX add-to-cart actions
add_to_cart_button.attr("href", "?add-to-cart=" + add_to_cart_button.attr("data-product_id") + "&quantity=" + $(this).val());
});
// Trigger on Enter press
$(".woocommerce .products").on("keypress", ".quantity .qty", function(e) {
if ((e.which||e.keyCode) === 13) {
$( this ).parents(".product").find(".add_to_cart_button").trigger("click");
}
});
' );
}
add_action( 'init', 'ace_shop_page_quantity_add_to_cart_handler' );
The problem here is that AJAX will work, but will not add the required number of goods, only 1 item.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question