Similar to my guide on how to change order status icons in WooCommerce, I frequently get asked how to change the WooCommerce Cart Icon (and icons all around the site itself). It’s not as bad as you’d think – here’s a quick walkthrough on how you can change the cart message icons in your WooCommerce shop.

First, you would want to make these edits to the CSS using a child theme or something like Simple Custom CSS.

Here is the framework we’ll start with:

.woocommerce .woocommerce-error:before, .woocommerce .woocommerce-info:before, .woocommerce .woocommerce-message:before {
font-family: WooCommerce;
content: "\[INSERT UNICODE HERE]";
color: [YOUR-COLOR];
}

To find the appropriate Unicode icon you want to use, you can check out this page I’ve set up that displays all of the options included in the WooCommerce symbol font library. Instead of [INSERT UNICODE HERE] you would enter the four-character unicode for the icon you wanted to display. So, let’s say you wanted the full star to display with a red tint to match your theme. You would find the four letter code for the full star:

Which in this case was e020, and insert it in the content rule:

.woocommerce .woocommerce-error:before, .woocommerce .woocommerce-info:before, .woocommerce .woocommerce-message:before {
font-family: WooCommerce;
content: "\e020";
}

To add color to fit your branding (let’s say your main color is #CA1818, then you could modify it further like so:

.woocommerce .woocommerce-error:before, .woocommerce .woocommerce-info:before, .woocommerce .woocommerce-message:before {
font-family: WooCommerce;
content: "\e020";
color: #CA1818;
}

This will result in a red star displaying in your cart messages. Alternatively, you could simply hide the icons entirely by using the following code:

.woocommerce .woocommerce-error:before, .woocommerce .woocommerce-info:before, .woocommerce .woocommerce-message:before {
display: none;
}

I hope this helps, let me know if you have any questions!