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)?

 

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

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-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?

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 🙂