WooCommerce: Change the “Remove this Item” Icon @ Cart

I have a very long to-write list. Possibly I have enough content for another 2 years 🙂

However, the other day a premium WooCommerce student asked me for some feedback on his custom CSS – so I had to give it priority! The request was: what’s the easiest way to change the little icon/button on the Cart page that has the function of removing items from the cart (yes, that ugly white cross on a red circle)?

How to change the "Remove this item" icon on the WooCommerce Cart page
How to change the “Remove this item” icon on the WooCommerce Cart page

 

—–     —–     —–     —–     —–     —–     —–     —–

Table of Contents

—–     —–     —–     —–     —–     —–     —–     —–

Change the “Remove this item” Icon – Default WooCommerce

In default WooCommerce, and using a theme that does not apply its own style to the Cart (for example, 2017 theme), the “remove” icon is… not an icon!

In fact, it’s a simple “x” (as per the “x” character) with a 1px border and 100% border radius, which makes it look like an “x” with a circle around it:

The “x” character with a 1px border and 100% border radius to “fake” the remove icon @ WooCommerce Cart

So, you can use simple CSS (you can learn more from the following paragraph even if it is for Storefront theme) to override it:


/* Hide the "x" */

a.remove {
    text-indent: -9999px;
    border: 0;
}

/* Add a Fontawesome icon instead */
/* Learn More in the Following Paragraphs */

a.remove:before {
    font-family: FontAwesome;
    content: "\f1f8";
    float: left;
    text-indent: 0;
}

If you don’t see the icon, it means Fontawesome is not installed in your website yet. To achieve this, you need to add some code to the of your theme’s header.php file: https://fontawesome.io/get-started

Change the “Remove this item” Icon – Storefront Theme

Before giving you the solution, I’d like to show you a series of screenshots. In this way, you can find out how to change the “Menu Cart” icon, the “Add to cart” icon (if any) and all the other icons that are added by your theme or plugins!

In fact, my solution is specific to the Storefront theme – and each theme is different. So you’ll need to adapt your CSS to your specific case.

1. Let’s “Inspect” the “Remove this item” icon via Google Chrome

First, we want to understand what is actually generating this icon. Is it HTML? Maybe a CSS trick instead?

"Inspect" the "Remove this item" icon to see what's generating the icon
“Inspect” the “Remove this item” icon to see what’s generating the icon

2. The “Remove this item” is a link (“a href”) with some CSS styling; but there is no sign of the icon/image!

“Inspect” allows us to study the HTML and CSS of the inspected element. However, nothing seems to tell us where the “white cross red circle” comes from.

"Remove this item" link: HTML & CSS
“Remove this item” link: HTML & CSS

3. Hold on – take a look at that “::before” inside the “a href”. Welcome to the world of CSS pseudo-elements 🙂

Here’s what happens when I highlight the “::before” in the HTML window instead. Take a look at the CSS:

CSS ::before
CSS ::before

4. CSS “content” and font-family

Well, in a few words, the icon is being generated by a CSS “content” call:

content: "\f057";

And, further down, the same element takes a font-family = “FontAwesome”:

font: normal normal normal 1em/1 FontAwesome;

These 2 lines are therefore responsible for generating that ugly white cross… what if we wanted to replace that icon with a “trashcan”? Or something else?

5. FontAwesome

So, somewhere around WooCommerce HTML (or my theme’s, Storefront), this FontAwesome is getting called. This means we can reuse this and see if it provides more icons!

So, let’s go to https://fontawesome.io/icons/ and look for “REMOVE” icons:

Looking for other "REMOVE" icons on the FontAwesome website
Looking for other “REMOVE” icons on the FontAwesome website

Let’s pick one, for example the “trash” icon:

FontAwesome "trash" icon specs
FontAwesome “trash” icon specs

And write down the “Unicode”: f1f8

6. Custom CSS: override the original icon… with one line of code!

Now that you’ve picked the icon and know its Unicode, go to your custom CSS and add this one line:


/* Change WooCommerce "Remove this item" Icon */
/* Original call was --> content: "\f057"; */
/* Just replacing the Unicode...: */

a.remove:before {
     content: "\f1f8";
}

And one line of CSS code will now give you this final result 🙂

"Remove this item" icon is now a trashcan
“Remove this item” icon is now a trashcan

7. Custom CSS: also change the icon color… with another one liner!


/* Change WooCommerce "Remove this item" Icon Color */
/* Original call was --> color: #e2401c; */
/* Just replacing the color code...: */

a.remove:before {
     color: #222222;
}

Change the “Remove this item” Icon – Other Themes

It’s impossible to know whether your custom theme is overriding the “remove product from cart” icon. Hopefully, one of the above 2 methods will work for you and can be applied to your specific case 🙂

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: How to Fix the “Cart is Empty” Issue
    For some reason, sometimes you add products to cart but the cart page stays empty (even if you can clearly see the cart widget has products in it for example). But don’t worry – it may just be a simple cache issue (and if you don’t know what cache is that’s no problem either) or […]
  • WooCommerce: “You Only Need $$$ to Get Free Shipping!” @ Cart
    This is a very cool snippet that many of you should use to increase your average order value. Ecommerce customers who are near the “free shipping” threshold will try to add more products to the cart in order to qualify for free shipping. It’s pure psychology. Here’s how we show a simple message on the […]
  • WooCommerce: Cart and Checkout on the Same Page
    This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same (Checkout) page. But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell no more than […]
  • WooCommerce: Weight-Based Shipping Methods
    With WooCommerce you get 3 default shipping methods: Flat Rate, Free Shipping, Local Pickup. For each one you can define a cost, however there is no way to set up some “weight” restrictions. So, what if you want to display a rate for orders below 10 kg, and another shipping rate for orders above that […]
  • WooCommerce: Hide Shipping Method If Shipping Class Is In The Cart
    Our goal is to check if a Product with a specific Shipping Class is in the Cart, and consequently disabling a shipping rate such as Free Shipping if this is true. This is super useful when there are multiple items in the cart and you don’t want to give free shipping for certain orders for […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

30 thoughts on “WooCommerce: Change the “Remove this Item” Icon @ Cart

  1. Thank you so much for this! Sadly all these years later WooCommerce is still so hard to customize. After a year struggling with the circle (that is not a circle but a skewed weird shape around the X), this post helped me isolate it. Thank you, thank you! For me this is actually for my own site but now I can go back and fix countless client sites.

  2. Hi
    Thanks alot It works great.
    But can you give us an example for mini cart widget ?
    With best regards

    1. No I’m sorry

  3. Worked like a charm. I have modified to have my own text for our site purposes. However, the link to “Remove” and on mouse over, the red circle are still shown. Any work around please? Thank you..

    1. Cool. You’ll need custom CSS

  4. Applied the code in Storefront Theme Extra CSS section and worked perfect. Thanks a lot 🙂

    1. Great!

  5. I think I love you! Thaaaaaaaaaaaaaaaaaaaaanks!!! <3

    1. Lol thank you!

  6. Here is another solution.

     
     // Remove trash icon and then add a new. I have added an fontawesome icon.
     function kia_cart_item_remove_link( $link, $cart_item_key ) {
         return str_replace( '×', '<span class="cart-remove-icon"><i class="fa fa-trash" aria-hidden="true"></i></span>', $link );
     }
     add_filter( 'woocommerce_cart_item_remove_link', 'kia_cart_item_remove_link', 10, 2 );
    

    The CSS that I have been working on….

    .woocommerce a.remove,
    .woocommerce a.remove:before {
      font-family: 'dashicons';		 	 
      content: "\f182";
      font-size: 24px;
      color: #c72204;   
    }
    .woocommerce a.remove:hover {
    	text-shadow: 1px 1px 1px #000;
        color: blue !important;
        background-color: white !important;   /* Removes the default read background. */
    }
    

    Thanks to Helga the Viking – Kathy for the php code: https://www.kathyisawesome.com/

    1. Thanks Paal (and Kathy) 🙂

  7. Hi Rodolfo, thanks for the good work!

    But I have a problem with your solution. I’ve added the code you provided in my theme’s custom CSS field. Now at the left side of that ugly X, I have an empty block. The X is not disappeared.

    Do you have an additional solution for my case?

    Thanks a lot.

    PS: I’m using Avada Theme

    1. Alper, thanks for your comment! This could be because Avada is using different CSS, and your CSS might need tweaking. Unfortunately this is custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R

  8. Hi,

    I would like to add a remove product icon(x) on woommerce checkout page products because I’m going to send my users straight to checkout page and avoid the cart page. So what I want is that users can still have the option to remove any product they don’t want. Great work you doing here awesome website.

    Thanks.
    Pepe

    1. Thanks Pepe! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  9. Hi Rodolfo,
    thx a lot for your superb post.
    Im a php and wordpress newbie (but i’ve got other programming expereience 😉 ), so maybe that’s why it doesn’t work on my site. 🙂
    My problem is the following: im using the customizr-theme and have created my own child-theme.
    My idea was to add the css-snippet in my child-theme/style.css. But i am not able to override the cart-icon-css-class with my style.css because it’s loaded afterwards (i think). Any idea?

    The following:
    index.php:112
    .tc-wc-menu .nav > li > a:before {
    content: ‘\f07a’;
    position: absolute;
    font-size: 1.6em;
    left: 0;
    }

    overwrites my:
    style.css?ver=1.0.0
    a.cart-contents:before {
    content: ‘\f004’;
    }

    Thank you

    1. Hey Daniel, thanks for your comment! You should use the exact same call, “a.cart-contents:before”. If that does not work, prepend “html”: “html a.cart-contents:before”. Let me know

  10. It didn’t work for me. I’m trying to change the color of the remove buttons and I also want to change the colore of the inside border of the text field boxes when you go to check out because I don’t want them to be red and green. I want them to match my site. I tried the code in my style.css sheet and my additional css. Do you think there’s a way to do it or should I give up? This is what I used:

    /* Change WooCommerce “Remove this item” Icon Color */
    /* Original call was –> color: #e2401c; */
    /* Just replacing the color code…: */

    a.remove:before {
    color: #223a5c;
    }

    1. Amy, thanks for your message! Probably your theme is already customizing that icon, and you’d need to adjust the code above based on your theme’s custom code 🙂

  11. Hi Rodolfo,
    I have the same code as Rahim. I use Headway Theme. Still no luck.
    What is it I don't see?
    Jos

    1. Hey Jos! You don’t see the “::before” inside the “a href” 🙂 Once you see that, you can follow my steps to change it! Let me know

  12. You have no idea how long I have been waiting for this. It has been more than a year. I dropped woocommerce back then because I couldn’t find to solve this. I love it. You are amazing. Thanks you sooooo much!

    1. Ahah excellent Vicky, welcome back to Woo then!

  13. Hello Rodolfo,

    Excellent tips and tutorials. They helped me a lot!

    I tried your code but didn’t work on my theme. There’s no “::before” when I check the code on Chrome’s inspector.
    Also, I check and I have the FontAwesome icon pack. My theme is Envato’s MediaCenter with Woocommerce 2.6.9.

    I really like the idea of change the X icon for the trash icon, but I don’t know how to do it.

    Thanks in advanced

    Carlos

    1. Hey Carlos, thanks for your message! Probably your theme is already customizing that icon, and you’d need to adjust the code above based on your theme’s custom code – sorry but I can’t help you here on the blog 🙂

  14. hy!
    there isnt any ‘before’ in the tag ‘a’ only exist a cross symbol

    <a href="https://localhost/woo_theme/?page_id=6&amp;remove_item=26657d5ff9020d2abefe558796b99584&amp;_wpnonce=1ef20347be" class="remove" title="پاک کردن این آیتم" data-product_id="96" data-product_sku="">×</a>
    

    css code:

    .woocommerce a.remove {
        display: block;
        font-size: 1.5em;
        height: 1em;
        width: 1em;
        text-align: center;
        line-height: 1;
        border-radius: 100%;
        color: red !important;
        text-decoration: none;
        font-weight: 700;
        border: 0;
    }
    

    test your code but
    Nothing did not happen

    1. Hey Rahim, thanks for your comment! This might be different for different themes. Which one are you using?

      1. hy

        The problem was from not installed icon packs (font-awesome-4.7.0) That fixed with this code

        <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
        

        Of course! I downloaded the package icon

        1. Ah, excellent – good stuff Rahim!

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *