How to make the button add product to cart without reloading the page in woocommerc?

Question

css

Replaced the "Order" button in the product catalog with the add...

Answer 1

Everything is processed as needed, well, except for this flex: 1 1 auto;, this is for child elements.

header {
  display: flex;
  justify-content: center;
}
.header {
  border-width: 2px 2px 2px 7px;
  border-style: solid;
  border-color: #600;
  border-radius: 1px;
  max-width: 836px;
}

Answer 2

There, even in the settings of the wc itself, there is an addition to the basket with ajax

Answer 3

The old button worked fine, this setting is enabled, but for some reason ajax is not applied to the new button.
current button

<div class="woo-buttons"><form action="?add-to-cart=343" class="cart" method="post" enctype="multipart/form-data">	<div class="quantity">
        <label class="screen-reader-text" for="quantity_5e08e6199eed3">Количество Маргарита</label>
    <input type="number" id="quantity_5e08e6199eed3" class="input-text qty text" step="1" min="0" max="" name="quantity" value="1" title="Кол-во" size="4" inputmode="numeric">
      </div>
  <button type="submit" class="button alt product_type_simple added_to_cart add_to_cart_button ajax_add_to_cart">Заказать</button></form></div>

The one that was

<div class="woo-buttons"><a href="?add-to-cart=343" data-quantity="1" class="product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="343" data-product_sku="mk-8533" aria-label="Добавить &quot;Маргарита&quot; в корзину" rel="nofollow">Заказать</a></div>