На странице архива я использую функцию добавления в корзину с выбором количества. Однако я хочу использовать AJAX вместо этой формы. Как этого добиться?

Question

Теперь это моя функция, она выводит селектор количества и кнопку добавления в корзину. Это работает хорошо. Однако после того, как покупатель добавит товар в корзину, URL-адрес будет следующим: mysite.com/product/?add-to-cart=123 Очевидно, что после обновления или повторного ввода этой страницы тот же товар добавляется снова. Пожалуйста, помогите мне понять, чтобы преобразовать эту форму в AJAX метод.

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_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() && is_user_logged_in() ) {
        $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
        $html .= woocommerce_quantity_input( array(), $product, false );
        $html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
        $html .= '</form>';
    }
    return $html;
}