Удаление продукта со страницы оформления заказа Woocommerce с помощью Ajax

Я добавил кнопку удаления для товаров на странице оформления заказа.

Код –

function add_delete( $product_title, $cart_item, $cart_item_key ) {

    if (  is_checkout() ) {
        /* Получить корзину пользователя */
        $cart     = WC()->cart->get_cart();
        foreach ( $cart as $cart_key => $cart_value ){
           if ( $cart_key == $cart_item_key ){
                $product_id = $cart_item['product_id'];
                $_product   = $cart_item['data'] ;

                /*Добавить значок удаления */
                $return_value = sprintf(
                  '<a href="https://wordpress.stackexchange.com/questions/320237/%s" class="remove" title="https://wordpress.stackexchange.com/questions/320237/%s" data-product_id="https://wordpress.stackexchange.com/questions/320237/%s" data-product_sku="https://wordpress.stackexchange.com/questions/320237/%s" data-cart_item_key="https://wordpress.stackexchange.com/questions/320237/%s">&times;</a>',
                  esc_url( WC()->cart->get_remove_url( $cart_key ) ),
                  __( 'Удалить этот товар', 'woocommerce' ),
                  esc_attr( $product_id ),
                  esc_attr( $_product->get_sku() ),
                  esc_attr( $cart_item_key )
                );

                /* Добавить имя продукта */
                $return_value .= '&nbsp; <span class = "product_name" >' . $product_title . '</span>' ;

                return $return_value;
            }
        }
    }else{

        $_product   = $cart_item['data'] ;
        $product_permalink = $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '';
        if ( ! $product_permalink ) {
            $return_value = $_product->get_title() . '&nbsp;';
        } else {
            $return_value = sprintf( '<a href="https://wordpress.stackexchange.com/questions/320237/%s">%s</a>', esc_url( $product_permalink ), $_product->get_title());
        }
        return $return_value;
    }

}
add_filter ('woocommerce_cart_item_name', 'add_delete' , 10, 3 );

Это работает хорошо.
Но для удаления товара обновляется вся страница, в отличие от страницы корзины.

Страница корзины использует ajax для удаления товара. И я пытаюсь сделать то же самое здесь. Но проблема в том, что я не знаю много об Ajax.

Вот что я попробовал.

JavaScript

jQuery(document).ready(function($){

$(document).on('click', 'tr.cart_item a.remove', function (e)
{
    e.preventDefault();

    var product_id = $(this).attr("data-product_id"),
        cart_item_key = $(this).attr("data-cart_item_key"),
        product_container = $(this).parents('.shop_table');

    // Добавить загрузчик
    product_container.block({
        message: null,
        overlayCSS: {
            cursor: 'none'
        }
    });

    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: wc_checkout_params.ajax_url,
        data: {
            action: "product_remove",
            product_id: product_id,
            cart_item_key: cart_item_key
        },
        success: function(response) {
            if ( ! response || response.error )
                return;

            var fragments = response.fragments;

            // Заменить фрагменты
            if ( fragments ) {
                $.each( fragments, function( key, value ) {
                    $( key ).replaceWith( value );
                });
            }
        }
    });
});

});

И PHP

function warp_ajax_product_remove()
{
    // Получить фрагмент отзыва о заказе
    ob_start();
    foreach (WC()->cart->get_cart() as $cart_item_key => $cart_item)
    {
        if($cart_item['product_id'] == $_POST['product_id'] && $cart_item_key == $_POST['cart_item_key'] )
        {
            WC()->cart->remove_cart_item($cart_item_key);
        }
    }

    WC()->cart->calculate_totals();
    WC()->cart->maybe_set_cart_cookies();

    woocommerce_order_review();
    $woocommerce_order_review = ob_get_clean();
}

add_action( 'wp_ajax_product_remove', 'warp_ajax_product_remove' );
add_action( 'wp_ajax_nopriv_product_remove', 'warp_ajax_product_remove' );

Он удаляет товар, но страница оформления заказа не обновляется.

Можете ли вы помочь? Спасибо

Используйте jQuery('body').trigger('update_checkout'); в вашем javascript, например, при успешном ответе ajax, это обновит страницу оформления заказа с помощью ajax.

$.ajax({
    type: 'POST',
    dataType: 'json',
    url: wc_checkout_params.ajax_url,
    data: {
        action: "product_remove",
        product_id: product_id,
        cart_item_key: cart_item_key
    },
    success: function(response) {
        if ( ! response || response.error )
            return;

        var fragments = response.fragments;

        // Заменить фрагменты
        if ( fragments ) {
            $.each( fragments, function( key, value ) {
                $( key ).replaceWith( value );
            });
        }
        jQuery('body').trigger('update_checkout');
    }
});

Я думаю, что в вашем js есть ошибка в закрывающих фигурных скобках, есть лишняя } и поэтому он не работает, должно быть
});
}
});
});
});

Хотя это протестировано и работает

   jQuery( function($){
    if (typeof woocommerce_params === 'undefined')
        return false;

    console.log('определено');

  $(document).on('click', 'tr.cart_item a.remove', function (e){
e.preventDefault();

var product_id = $(this).attr("data-product_id"),
    cart_item_key = $(this).attr("data-cart_item_key"),
    product_container = $(this).parents('.shop_table');

// Добавить загрузчик
product_container.block({
    message: null,
    overlayCSS: {
        cursor: 'none'
    }
 });

 $.ajax({
    type: 'POST',
    dataType: 'json',
    url: wc_checkout_params.ajax_url,
    data: {
        action: "product_remove",
        product_id: product_id,
        cart_item_key: cart_item_key
    },
    success: function (result) {
                $('body').trigger('update_checkout');
                console.log(result);
        }
    });
});
});