Change "[Remove]" link text to an icon for coupon in WooCommerce checkout

Question

I would like to change the "[Remove]" link text to an icon for coupons in WooCommerce checkout page.

Instead of "[Remove]" I would like it to be a trash can icon from Font Awesome.

I have found 2 code snippets to change the text:

function filter_woocommerce_cart_totals_coupon_html( $coupon_html, $coupon, $discount_amount_html ) {
    // Change text
    $coupon_html = $discount_amount_html . ' <a href="' . esc_url( add_query_arg( 'remove_coupon', rawurlencode( $coupon->get_code() ), defined( 'WOOCOMMERCE_CHECKOUT' ) ? wc_get_checkout_url() : wc_get_cart_url() ) ) . '" class="woocommerce-remove-coupon" data-coupon="' . esc_attr( $coupon->get_code() ) . '">' . __( '[Remove &amp; Re-Calculate]', 'woocommerce' ) . '</a>';

    return $coupon_html;
}
add_filter( 'woocommerce_cart_totals_coupon_html', 'filter_woocommerce_cart_totals_coupon_html', 10, 3 );

OR

function filter_woocommerce_cart_totals_coupon_html( $coupon_html, $coupon, $discount_amount_html ) {
    // Change text
    $coupon_html = str_replace( '[Remove]', '[Remove &amp; Re-Calculate]', $coupon_html );

    return $coupon_html;
}
add_filter( 'woocommerce_cart_totals_coupon_html', 'filter_woocommerce_cart_totals_coupon_html', 10, 3 );

These code snippets allow me to change the text but I could not figure out how to add the icon. I would appreciate if someone could help me..

Thanks @LoicTheAztec, it worked. I have an additional question. On Stack Overflow if you hover over certain buttons/links a small popup appears explaining the button/link. [Screenshot](https://ibb.co/026V3YX). I would like to do the same for the coupon removal icon. Is that possible? — JOKKER, Feb 18 '21 at 18:23
It's called a **Tooltip**… so this is a functionality that works with Javascript and CSS… [JQuery UI has a tooltip functionality](https://jqueryui.com/tooltip/) and there are also a lot of libraries that allows that. There are [some plugins for Wordpress too](https://wordpress.org/plugins/search/Tooltip/) — LoicTheAztec, Feb 18 '21 at 18:29

score 2 · Accepted Answer · answered Feb 18 '21 at 18:35

For example you can add a Font Awesome Icon using the following, on your 2nd code snippet:

function filter_woocommerce_cart_totals_coupon_html( $coupon_html, $coupon, $discount_amount_html ) {
    // Change returned text
    return str_replace( '[Remove]', ' [<i class="fas fa-minus-circle"></i> Remove &amp; Re-Calculate]', $coupon_html );
}
add_filter( 'woocommerce_cart_totals_coupon_html', 'filter_woocommerce_cart_totals_coupon_html', 10, 3 );

Code goes in functions.php file of the active child theme (or active theme). It should work.

You will get in checkout page something like:

Change "[Remove]" link text to an icon for coupon in WooCommerce checkout

1 Answers1