Customize cart item removed notice in Woocommerce 3 - wordpress

Question

I am using the WooCommerce 3.4.4 version and I am trying to edit the notice message when you press the "X" button to remove the product from the cart page.
Currently the notice is "<product name>" removed. Undo?
I want to remove the quotations and change the message to Product name has been removed. [Undo button]
I have managed to remove the quotation marks from the product name by writing
add_filter( 'woocommerce_cart_item_removed_title', 'removed_from_cart', 10, 2);
function removed_from_cart( $message, $product_data ) {
$product = get_the_title($product_data['product_id']);
$message = $product;
return $message;
}
But I am a bit confused on how to do the rest of the edits. Any help is appreciated.

Answer 1

Updated
The only available hook is woocommerce_cart_item_removed_title that you are using already. and displays the product name between quotes. You can also use gettex filter hook to remove the ? after "Undo" text:
add_filter( 'woocommerce_cart_item_removed_title', 'removed_from_cart_title', 12, 2);
function removed_from_cart_title( $message, $cart_item ) {
$product = wc_get_product( $cart_item['product_id'] );
if( $product )
$message = sprintf( __('Product %s has been'), $product->get_name() );
return $message;
}
add_filter('gettext', 'cart_undo_translation', 35, 3 );
function cart_undo_translation( $translation, $text, $domain ) {
if( $text === 'Undo?' ) {
$translation = __( 'Undo', $domain );
}
return $translation;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
But you can not change or add button tag class the the <a> html tag…
Instead use the existing restore-item tag class adding some custom CSS styles to it.
Below some CSS styles example, that you can add to the styles.css file of your active child theme:
.woocommerce-message .restore-item, {
float: right;
padding: 0 0 0 1em;
background: 0 0;
color: #fff;
box-shadow: none;
line-height: 1.618;
border-width: 0 0 0 1px;
border-left-style: solid;
border-left-color: rgba(255,255,255,.25)!important;
border-radius: 0;
}
.woocommerce-message .restore-item:hover {
background: 0 0;
color: #fff;
opacity: .8;
}
This is what you will get: