How to remove a product from the cart using a link in the product archive?

Question

WordPress

Good day!

It is necessary to implement the ability to add and remove goods from the cart while on the page with a list of goods.

If we click on the plus, then one product is added to the basket, if we click again, the quantity increases.
If we click on the minus, then the product is removed from the basket, or if there were several, then the quantity is minus.

This should work via AJAX.

How to be added to the cart, I roughly understood

<a href="/products/?add-to-cart=<?php echo esc_attr( $product->get_id() ); ?>" class="add_to_cart_button ajax_add_to_cart" data-quantity="1" data-product_id="<?php echo esc_attr( $product->get_id() ); ?>" rel="nofollow">+</a>

But how to deal with the removal of goods, I can not figure it out. It doesn't work like that

<a href="/products/?remove_item=<?php echo esc_attr( $product->get_id() ); ?>" class="product_type_simple add_to_cart_button ajax_add_to_cart" data-quantity="1" data-product_id="<?php echo esc_attr( $product->get_id() ); ?>" rel="nofollow">-</a>

In the cart, there is a delete button, but it works to delete the entire product (the entire quantity). I spied it on GET ?remove_item=

Please tell me how to implement it.
Thanks in advance!

Answer 1

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
    }

}

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

}

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' );
}