Adding product to cart without reloading the page and replacing woocommerce "Add to Cart" button text?

Question

WordPress

Hello. Please tell me how to implement this functionality. Add to cart https://carlion34.ru/catalog/spets_zhidkosti/
I use storefront and woocomerce theme. In the product catalog, I added a quantity selection field before the "Add to Cart" button. As a result, the code for adding a button to the cart is displayed as follows:

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() ) {
    $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
    $html .= '<div class="uk-flex uk-flex-middle quantity-block"> <a class="quantity-arrow-minus"> - </a>' . woocommerce_quantity_input( array(), $product, false ) . '<a class="quantity-arrow-plus"> + </a></div>';
    $html .= '<button class="btncart  ajax_add_to_cart add_to_cart_button ">' . esc_html( $product->add_to_cart_text() ) . '</button>';
    $html .= '</form>';
  }
  return $html;
}

How to make the page not reload when adding an item to the cart
How to make the button text change when the item is already in the cart
Please help ((

Answer 1

Adding a product without reloading.
Adding a script:

var $warp_fragment_refresh = {
    url: wc_cart_fragments_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'get_refreshed_fragments' ),
    type: 'POST',
    success: function( data ) {
        if ( data && data.fragments ) {

            $.each( data.fragments, function( key, value ) {
                $( key ).replaceWith( value );
            });

            $( document.body ).trigger( 'wc_fragments_refreshed' );
        }
    }
};

$('.entry-summary form.cart').on('submit', function (e)
{
    e.preventDefault();

    $('.entry-summary').block({
        message: null,
        overlayCSS: {
            cursor: 'none'
        }
    });

    var product_url = window.location,
        form = $(this);

    $.post(product_url, form.serialize() + '&_wp_http_referer=' + product_url, function (result)
    {
        var cart_dropdown = $('.widget_shopping_cart', result)

        // update dropdown cart
        $('.widget_shopping_cart').replaceWith(cart_dropdown);

        // update fragments
        $.ajax($warp_fragment_refresh);

        $('.entry-summary').unblock();

    });
});

Change the line in the woocommerce/single-product/add-to-cart/simple.php template
on the

<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" />
<button type="submit" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

If we have only simple products in the store (without variable ones), then we can make it even easier - install a button from the archive template:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_loop_add_to_cart', 30 );

To change the text of the Add to Cart button, if the product has already been added, use the following functions :

// Change the add to cart text on single product pages
add_filter('woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text');
function woo_custom_cart_button_text() {
  
  foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
    $_product = $values['data'];
  
    if( get_the_ID() == $_product->get_ID() ) {
      return __('Already in cart - Add Again?', 'woocommerce');
    }
  }
  
  return __('Add to cart', 'woocommerce');
}

// Change the add to cart text on product archives
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );
function woo_archive_custom_cart_button_text() {
  
  foreach( WC()->cart->get_cart() as $cart_item_key => $values ) {
    $_product = $values['data'];
  
    if( get_the_ID() == $_product->get_ID() ) {
      return __('Already in cart', 'woocommerce');
    }
  }
  
  return __('Add to cart', 'woocommerce');
}