Custom remove cart item functionality in Woocommerce

I have the add item function set-up, which looks like this:

                <div class="col s4">
                    <a class="addtocart_link" href="<?php echo esc_url( $product->add_to_cart_url() ); ?>" title="<?php echo esc_attr( $product->add_to_cart_text() ); ?>">
                        <span class="action_box fa fa-plus"></span>
                    </a>
                </div>

Is there a similar or another way to create the remove item function?

Answer

yes there is wc_get_cart_remove_url but you need to get the cart item key to do so you can use the following :

<?php
$cart_item_key = WC()->cart->generate_cart_id( $product->get_ID() );
$in_cart       = WC()->cart->find_product_in_cart( $cart_item_key );
if ( $in_cart ) {
    $cart_item_remove_url = wc_get_cart_remove_url( $cart_item_key );
    ?>
    <div class="col s4">
        <a class="remove_from_cart" href="<?php echo esc_url( $cart_item_remove_url ); ?>" title="remove_from_cart ">
            <span class=" action_box fa fa-minus "></span></a>
            </div>
    <?php

}

Of course the code above will work for simple product only and simply it will remove all items from the carts.

If you want to reduce the cart item one item at time you need to use different approach as follow:

First : Let add our Remove link & add_to_cart with some attribute like quantity and product id in order to process the data with our script.

add_action( 'woocommerce_after_add_to_cart_button', 'remove_product' );

function remove_product() {
    global $product;

    $cart_item_key        = WC()->cart->generate_cart_id( $product->get_ID() );
    $in_cart              = WC()->cart->find_product_in_cart( $cart_item_key );
    $cart_item_remove_url = wc_get_cart_remove_url( $cart_item_key );

?>

<div class="col s4">
<a class="addtocart_link"
id ="add_to_cart" 
title="add_to_cart" 
data-product-id="<?php echo $product->get_ID(); ?>"
data-cart-item-key="<?php echo $cart_item_key; ?>">
<span class="action_box fa fa-plus"></span></a>
            </div>
<?php
    if ( $in_cart ) {
        $quantities = WC()->cart->get_cart_item_quantities();
        foreach ( $quantities as $key => $quantity ) {
            if ( $product->get_ID() == $key ) {
                if ( $quantity > 1 ) {
                    ?>
                    <div class="col s4">
                    <a id="remove_one_item" class="remove_from_cart" href="#" 
                    data-product-id="<?php echo $product->get_ID(); ?>"
                    data-in-cart-qty="<?php echo  $quantity; ?>"
                    data-cart-item-key="<?php echo $cart_item_key; ?>"
                    title="remove_from_cart ">
                        <span class=" action_box fa fa-minus "></span></a>
                    </div>
                    <?php
                    return;
                }
            }
        }
        ?>
        <div class="col s4">
        <a class="remove_from_cart" href="<?php echo esc_url( $cart_item_remove_url ); ?>" title="remove_from_cart ">
        <span class=" action_box fa fa-minus "></span></a>

        <?php
    }

}

Now Let we need add our script to WordPress Footer or you can added it to your Javascript file

add_action( 'wp_footer', 'change_qty_script' );

function change_qty_script() {
    ?>
    <script>
    jQuery(document).ready(function ($) {
    $('#remove_one_item').click(function () {

        var current_qty = parseInt($(this).attr('data-in-cart-qty'));
        var id = $(this).attr('data-product-id');
        var cat_item_key = $(this).attr('data-cart-item-key');
        var data = {
            product_id: id,
            quantity: current_qty - 1,
            cat_item_key : cat_item_key
        };
        var url = wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'update_qty');
        $.post(url, data, function (response) {
            if (!response) {
                return;
            }
            if (response) {
                location.reload();
            }
        });
    });
    $('#add_to_cart').click(function () {

        var id = $(this).attr('data-product-id');
        var cat_item_key = $(this).attr('data-cart-item-key');
        var data = {
            product_id: id,
            quantity: 1,
        };
        var url = wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart');
        $.post(url, data, function (response) {
            if (!response) {
                return;
            }
            if (response) {
                location.reload();
            }
        });
    });

    });
    </script>
    <?php

}

Finally we need to process the data when the user clicked remove link

add_action( 'wc_ajax_update_qty', 'update_qty' );

function update_qty() {
    ob_start();
    $product_id   = absint( $_POST['product_id'] );
    $product      = wc_get_product( $product_id );
    $quantity     = $_POST['quantity'];
    $cat_item_key = $_POST['cat_item_key'];

    WC()->cart->set_quantity( $cat_item_key, $quantity, true );

    wp_send_json( 'done' );
}

Place the codes above in your functions.php and you are good to go.

all codes above has bees tested and it’s working fine.