Posted on

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: http://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 http://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 this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

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

  1. 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) 🙂

  2. 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

  3. 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

  4. 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

  5. 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 🙂

  6. 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

  7. 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!

  8. 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 🙂

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

    <a href="http://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?

    2. 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

    3. Ah, excellent – good stuff Rahim!

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.