Remove the “item title text” on hover

Resolved Monica
(@monicamonica)

7 years, 1 month ago

Hello,

How can I add some title text to the “remove item” cross icon next to products on the cart page.

I would like it so that when you hover over the cross icon it says “remove item”

Thanks,
Monica.

Viewing 5 replies - 1 through 5 (of 5 total)

taisho
(@taisho)

7 years, 1 month ago
Hello Monica, I found it to be an interesting addition, so I crafted code for child theme functions.php which will add title ‘Remove this item’. This text is already used in ‘aria-label’ attribute of the same element, so the bonus is that it exists in WooCommerce translation files.
```
// Show tooltip on remove icon hover (cart page & mini cart).
add_filter( 'woocommerce_cart_item_remove_link', 'filter_woocommerce_cart_item_remove_link', 10, 2 );
function filter_woocommerce_cart_item_remove_link( $string, $cart_item_key ) {
	$title = __( 'Remove this item', 'woocommerce' );
	$to_replace = 'aria-label="' . $title . '"' ;
	$replacement = 'aria-label="' . $title . '" ' . 'title="' . $title . '" ';
    return str_replace( $to_replace, $replacement, $string );
};
```
- This reply was modified 7 years, 1 month ago by taisho.
Riaan K.
(@riaanknoetze)

7 years, 1 month ago

Hey there,

This question is better suited to the WooCommerce forums over at https://ww.wp.xz.cn/support/plugin/woocommerce/ as it’s not directly related to the Storefront theme 🙂

Grateful for the snippet though; that’s pretty cool!

Thread Starter Monica
(@monicamonica)

7 years, 1 month ago

Ah understood, thanks @riaanknoetze 🙂 Actually, I realised I must have been half asleep while creating this post as I actually wanted to Add some title text not remove it! I noticed in the Storefront theme that there is no “Remove this item” title text so I wanted to add it for a client who is using storefront.

Many thanks for the code @taisho ! I’m not a php coder so how would I amend your code to add some title text?

Thanks,
Monica.
taisho
(@taisho)

7 years, 1 month ago
If you want to use custom text, which is not translation-ready, code will indeed change a bit:
```
// Show tooltip on remove icon hover (cart page & mini cart).
add_filter( 'woocommerce_cart_item_remove_link', 'filter_woocommerce_cart_item_remove_link', 10, 2 );
function filter_woocommerce_cart_item_remove_link( $string, $cart_item_key ) {
	$aria_label = __( 'Remove this item', 'woocommerce' );
	$title = 'Wave a wand and make this product disappear from cart';
	$to_replace = 'aria-label="' . $aria_label . '"' ;
	$replacement = 'aria-label="' . $aria_label . '" ' . 'title="' . $title . '" ';
    return str_replace( $to_replace, $replacement, $string );
};
```
- This reply was modified 7 years, 1 month ago by taisho.
- This reply was modified 7 years, 1 month ago by taisho.
Thread Starter Monica
(@monicamonica)

7 years ago

Just wanted to say that this works perfectly – many thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Remove the “item title text” on hover’ is closed to new replies.