How To Allow Users To Remove Products On Checkout Page in WooCommerce

This code snippet will add a cross symbol to order review table in checkout page. The cross icon will allow users to remove a product from the cart. It can be styled by some CSS (Cascading Style Sheets).

The function lionplugins_woocommerce_checkout_remove_item hooks into woocommerce_cart_item_name filter, which allows to change the output and add a link (the cross icon) around the product item name. The link we add is based on WC()->cart->get_remove_url( $cart_item_key ) function, which creates an url for specified cart item key.

Add the code below to your theme’s functions.php file.

/**
 * Allows to remove products in checkout page.
 * 
 * @param string $product_name 
 * @param array $cart_item 
 * @param string $cart_item_key 
 * @return string
 */
function lionplugins_woocommerce_checkout_remove_item( $product_name, $cart_item, $cart_item_key ) {
	if ( is_checkout() ) {
		$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
		$product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );

		$remove_link = apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
			'<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s">×</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 );

		return '<span>' . $remove_link . '</span> <span>' . $product_name . '</span>';
	}

	return $product_name;
}
add_filter( 'woocommerce_cart_item_name', 'lionplugins_woocommerce_checkout_remove_item', 10, 3 );