Change the WooCommerce cart icon?

Hi Chris, here’s one way to customize the shopping cart icon:

1. In WordPress admin select Appearance – Customize.
2. Click on “Additional CSS”.
3. Paste the following and click “Publish”:

.site-header-cart .cart-contents::after {
    content: "\f07a";
}

You might need to first install the Font Awesome plugin for this to work.

If you want a different icon you can browse the Font Awesome icon library, open the details of the icon you like and take note of the unicode code (folur hexadecimal digits in the upper right corner of the icon details window).

Konamiman,

Thanks so much for providing this css. Out of curiosity, do the light / thin / duotone icons have their own unicodes or are those out of the reach of a simple css update?

Appreciate your help,
Chris

Hello @chrisalton11 all icons has its own HTML code, you can check it by click on the icon, take a look at this screenshot: https://screencast-o-matic.com/i/c3lDlqVvADZ

I hope that helps!

Hi Amir,

Forgive my ignorance, but is it possible to use those HTML codes inside the Additional CSS file?

Adding the 4-digit unicode { content: “\f07a”; } was very easy but I haven’t figured out how to use the html codes in a similar manner.

Thanks for your response,

Chris

HI @chrisalton11

Forgive my ignorance, but is it possible to use those HTML codes inside the Additional CSS file?

haven’t figured out how to use the html codes in a similar manner.

Can you please provide further details about what you are referring to here?

If a screenshot would be helpful, I’d recommend using https://snipboard.io or https://skitch.com/. You can share the direct link to the image as a response to this topic.