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 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 “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 “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 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 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 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 “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 🙂

Share:

Leave a Reply