This is a guide to add a WooCommerce Add to Cart button icon to a main menu with a toggle effect that displays added shop items in a mini-cart in an overlay.

This is offscreen content displayed and closed on click, this is how the new Outfitter Pro theme uses it, in this guide it is applied to Genesis Sample Theme.

Toggle Cart Items

The code snippets are prefixed with ‘prefix_’ andthe language text domain set to ‘your-theme’ which you’ll need to replace with your own.

The code in functions.php calls in additional files header-icon-menu.php and woocommerce-functions.php which will need to filed appropriately to the include path. You could lump all the code in functions.php but better practice to modularise the code into relevant directories.

The woocommerce-functions.php also calls a javascript file in your-theme-woocommerce.js

So in the above the 2 external files are being referenced, then the menu is repositioned and finally the icon file is called in – if you have your own icon then don’t bother using the last function just style it in the CSS.