WooCommerce ajax cart page - Disable “remove item”

Question

In WooCommerce ajax cart page, I have tried to detach default javascript event for removing added items (the little red icon with a cross) using:

$(".remove").off("click"); 

Or

$(".remove").unbind("click"); 

But it didn't work.

The main reason why I am trying to do this is because, in header, I have a custom menu cart icon with product number notification on it. And I can't either get this notification number updated through WooCommerce ajax, but only refreshing page.

How can I disable this javascript event? Or How can I make my notification script working with ajax?

Here is my menucart code:

<div id="expanded-menucart"> 

<?php  

foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {

    ?>

    <div class="one-menucart-item">

        <?php 

        $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
        $thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );
        $product_subtotal = apply_filters( 'woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal( $_product, $cart_item['quantity']), $cart_item, $cart_item_key );
        $quantity = $_product->get_stock_quantity();
        $antal = $cart_item['variation']['attribute_antal']; 
        $productid = $cart_item['product_id']; 

        echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
            '<a href="%s" class="remove, cart-remove" title="%s" data-product_id="%s" data-product_sku="%s">&times;</a>',
            esc_url( WC()->cart->get_remove_url( $cart_item_key ) ),
            __( 'Remove this item', 'woocommerce' ),
            esc_attr( $product_id ),
            esc_attr( $_product->get_sku() )
            ), $cart_item_key ); 

        echo $thumbnail; ?>
        <a id="<?php $productid; ?>" href="<?php the_permalink($productid); ?>"> <?php echo $cart_item['data']->post->post_title;?></a><br><br><?php
        echo $antal;
        echo $product_subtotal;?><br>

    </div><?php
}
?>
<?php global $woocommerce; ?>

    <p>TOTAL:
        <a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"><?php echo $woocommerce->cart->get_cart_total(); ?></a></p><br>

    <?php if ( WC()->cart->get_cart_contents_count() != 0 ) { ?>

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="menucart-checkout">
                    <a href="<?php get_home_url(); ?>/fcb/checkout">TILL CHECKOUTEN</a>
                </div>
            </div>
        </div>

    <?php } ?>

    </div>

External source on pastebin: http://pastebin.com/7rXuBQPj

Thanks.

Answer 1

So your problem is only when you are in cart page because in this case you have 2 carts:

• You have a mini cart kind of in your header (with notification, but without quantity buttons).
• You have in page content your normal cart (without that notifications, but with quantity buttons).

So they are in conflict and that is normal. You will have to chose between them.

---

The question: Are you really needing this mini-cart as it is on cart page?

2 solutions:

1. To have a light mini cart version on cart page (avoiding conflicts and live refreshing items (ajax remove)) only with item count, for example. Or you could disable it completely for cart page. You could use the conditional is_cart() for this purpose.

2. To bypass cart page (much more difficult) extending missing functionalities to your actual mini-cart:

   • Adding quantity buttons by items line
   • Adding optional coupon field functionality

In case 2 you will have to redirect customer to checkout, what is a classic behavior on some WooCommerce shops.