Total is hands down my favourite WordPress theme – I’ve tried dozens of different themes but keep on coming back to Total because it’s so simple, powerful and feature-rich. If you haven’t tried Total yet, you really, really should.
However there’s one thing I’ve never been able to figure out how to do and it’s bugged me for a while. So when a client asked me why there was no shopping cart on the mobile version of his WooCommerce website I went to work figuring out how to add a cart icon to the header. And in typical Total fashion it was super easy to do.
Initially I found a completely different set of instructions the WP Explorer documentation website that involved adding some custom CSS. The technique technically worked – placing a cart icon directly under the logo between two divider lines – but it was not at all what I was wanting to do.
Some more research sent me to the WP Explorer documentation website and I found a perfect solution to my problem.
All it took was creating a brand new menu, adding your Cart page to the menu, and replacing the Navigation Label with either shopping-cart, shopping-basket or shopping-bag.
You can use any FontAwesome icon you want, but these three options will automatically add a cart items counter, which is a super nice feature for a WooCommerce website.
The final step is to select the Mobile Icons option under Menu Settings > Display location. I always wondered what that option was for but never bothered to investigate further. Now I know!
The final result is shown in the two screenshots below. The cart icon takes on the styling of the hamburger menu so you won’t have to do any customizing to make them match.
Special thanks to Lowen’s for permission to use their website as an example. If you’re looking for amazing skincare and body products, look no further!
