WooCommerce: rimuovere un prodotto dal carrello con AJAX e jQuery

In WooCommerce possiamo rimuovere un prodotto dal carrello con AJAX e jQuery.

Definiamo la nostra action AJAX per la rimozione del prodotto dal carrello:

function my_wc_remove_product() {
  $product_id = (int) $_POST['id'];  
  $prod_unique_id = WC()->cart->generate_cart_id( $product_id );
  unset( WC()->cart->cart_contents[$prod_unique_id] );
  wp_send_json( array( 'removed' => true ) );
}

add_action( 'wp_ajax_my_remove_product', 'my_wc_remove_product' );
add_action( 'wp_ajax_nopriv_my_remove_product', 'my_wc_remove_product' );

Ora non ci resta che inserire nel frontend il riferimento all'ID del prodotto:

<?php 
global $woocommerce;
global $product;
$id = $product->get_id();
$cart_url = $woocommerce->cart->get_cart_url();
?>
<a href="#" class="my-remove-product" data-redirect="<?php echo $cart_url; ?>" data-id="<?php echo $id; ?>" aria-hidden="true">&times;</a>

Quindi con jQuery:

$( ".my-remove-product" ).click(function() {
    var $a = $( this );
    $.post( "/wp-admin/admin-ajax.php", { id: $a.data( "id" ) }, function( response ) {
        if( response.removed ) {
            window.location = $a.data( "redirect" );
        }
    });
    return false;
});

Se la rimozione ha avuto successo, reindirizziamo l'utente alla pagina del carrello. Questa soluzione può anche essere usata come una sorta di pulsante Annulla sulla pagina del singolo prodotto o sul loop dei prodotti, ma in questo caso il redirect dovrà essere diverso.