How do I prevent the page from reloading when adding a product to the cart?

Question

WordPress

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;
}

But after adding this filter, when you click "add to cart", the page is refreshed. How to solve the problem, if possible, in more detail?
Website: https://furnitura-ricom.ru/shop/

Answer 1

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' );

Answer 2

The problem here is that AJAX will work, but will not add the required number of goods, only 1 item.