Tuesday 23 June 2015

How to increase the size of the shopping cart icon in WooCommerce

I found the default size of the WooCommerce shopping cart icon (in the Storefront theme) was a bit on the small size.

The icon is textual and comes from Font Awesome. Normally, this would be an easy change by adding fa-2x or something similar to the style declaration. Inspecting the CSS in Chrome didn’t offer me such an option (I’m new to Font Awesome) so I added this CSS to the custom CSS in my Storefront child theme:

/* Increase size of shopping cart icon */
    .site-header-cart .cart-contents:after
        font-size: 1.25em !important;
The 1.25em increased the size of the cart icon to better reflect the size of the menu text and stand out better.

Woocommerce Shopping Cart Icon


  1. Hi Michael. Thanks for the code ;)
    It increase the size downwards left. Is it possible to make it increase upwards rift so to say? Right now it moves into the nr of items text if its made 2.25em for example. I would like the button of the icon to be aligned with the bottom of the text (items X)


  2. Hi Mads, I think I can see what you mean. In my case, the positioning is set using a right: 1.618em; and top: .3em; and I found by modifying these in Chrome I could move the icon around. Once you're happy with the result, drop your changes into the class above (below the font-size line) and add the !important declaration. Hope that makes sense.


Spam comments will be deleted

Note: only a member of this blog may post a comment.