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)?
—– —– —– —– —– —– —– —–
Table of Contents
- Change the “Remove this item” Icon – Default WooCommerce
- Change the “Remove this item” Icon – Storefront Theme
- Change the “Remove this item” Icon – Other Themes
—– —– —– —– —– —– —– —–
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:
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-startedChange 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?
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.
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:
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:
Let’s pick one, for example the “trash” icon:
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 🙂
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 🙂
Hi
Thanks alot It works great.
But can you give us an example for mini cart widget ?
With best regards
No I’m sorry
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..
Cool. You’ll need custom CSS
Applied the code in Storefront Theme Extra CSS section and worked perfect. Thanks a lot 🙂
Great!
I think I love you! Thaaaaaaaaaaaaaaaaaaaaanks!!! <3
Lol thank you!
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/
Thanks Paal (and Kathy) 🙂
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
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
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
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
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
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
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;
}
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 🙂
Hi Rodolfo,
I have the same code as Rahim. I use Headway Theme. Still no luck.
What is it I don't see?
Jos
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
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!
Ahah excellent Vicky, welcome back to Woo then!
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
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 🙂
hy!
there isnt any ‘before’ in the tag ‘a’ only exist a cross symbol
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
Hey Rahim, thanks for your comment! This might be different for different themes. Which one are you using?
hy
The problem was from not installed icon packs (font-awesome-4.7.0) That fixed with this code
Of course! I downloaded the package icon
Ah, excellent – good stuff Rahim!