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.
The code snippets are prefixed with ‘prefix_’ and the 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.
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.
This header-icon-menu.php contains all the mark up around the cart icon
Finally some style for the cart icon, change it to suit your theme and design.
Ajax Adding Behaviour
To add items from a woocommerce archive page and update the cart items number circle immediately ensure the ajax option is unchecked in woocommerce settings.