{"id":11810,"date":"2016-02-16T09:47:56","date_gmt":"2016-02-16T09:47:56","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/pro-features\/menu-logo-3\/"},"modified":"2020-05-06T15:13:24","modified_gmt":"2020-05-06T14:13:24","slug":"woocommerce","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/woocommerce\/","title":{"rendered":"WooCommerce"},"content":{"rendered":"

In this guide we’ll bring together many of the options available within Max Mega Menu to display a WooCommerce cart icon with “ajax enabled” cart totals.<\/p>\n

How to add a WooCommerce Cart Total to your Menu<\/h3>\n

Create a new menu item for the cart total<\/h4>\n

To add a WooCommerce Cart total\u00a0to your menu, first add the Cart menu item to your menu:<\/p>\n

\"woocommerce-add-menu-item\"<\/a><\/p>\n

Open the mega menu settings<\/h4>\n

Position the menu item where you’d like the Cart item\u00a0to appear and click the Save Menu button, then\u00a0open the Mega Menu settings for the item:<\/p>\n

\"woocommerce-open-settings\"<\/a><\/p>\n

Set a ‘Cart’ Icon for the menu item<\/h4>\n

Select a suitable icon for the menu item. In this case we’re using the Cart icon from Dashicons, but you can select one from Font Awesome if you prefer, or upload your own icon.<\/p>\n

\"woocommerce-icon\"<\/a><\/p>\n

You can adjust the styling of the icon (size, colour etc) within the Styling tab<\/em><\/p>\n

In the Settings tab, enable the “Hide Text” option so we only see the Cart icon in the menu.<\/p>\n

\"\"<\/a><\/p>\n

Output the Cart Total as a Menu Item Badge<\/h4>\n

Click the Badge<\/a> tab and paste one or both of the following shortcodes into the “Badge Text” field to display your cart count\/total:<\/p>\n

<\/span><\/p>\n

<\/span><\/p>\n

 <\/p>\n

\"\"<\/a><\/p>\n

There are 4 built in styles for menu item badges, which can be edited under Mega Menu > Menu Themes > Badge.<\/em><\/p>\n

Final Result<\/h3>\n

\"woocommerce-cart-total\"<\/a><\/p>\n

Displaying a Cart Widget below the cart total<\/h2>\n

\u200bYou can add a WooCommerce cart widget to the sub menu of your cart total menu item (see “Displaying Widgets in a mega menu: https:\/\/www.megamenu.com\/documentation\/mega-menus\/<\/a>).<\/p>\n

\"\"<\/a>
\n\u200b
\nIf you wish to make the\u00a0sub menu containing the cart narrower, see:\u00a0https:\/\/www.megamenu.com\/documentation\/change-width-individual-sub-menu\/<\/a><\/p>\n

\"\"<\/a><\/p>\n

Adding a cart count to the Mobile Toggle Bar<\/h2>\n

To show the WooCommerce cart count in the mobile toggle bar, add 2 mobile toggle blocks:<\/p>\n

    \n
  1. An icon block set to the Cart icon<\/li>\n
  2. An HTML block showing the WooCommerce shortcode <\/span><\/li>\n<\/ol>\n

    \"\"<\/a><\/p>\n

    The HTML block displaying the cart count will not have any specific styling attached to it. If you wish to adjust the styling, go to Mega Menu > Menu Themes > Custom Styling<\/em> and add the following:<\/p>\n

    #{$wrap} .mega-toggle-block .mega-menu-woo-cart-count {\r\n   color: white;\r\n   font-size: 12px;\r\n}<\/pre>\n
     <\/p>\n","protected":false},"excerpt":{"rendered":"
    In this guide we’ll bring together many of the options available within Max Mega Menu to display a WooCommerce cart icon with “ajax enabled” cart totals. How to add a WooCommerce Cart Total to your Menu Create a new menu item for the cart total To add a WooCommerce Cart…<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[16],"ht-kb-tag":[],"class_list":["post-11810","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-pro-features"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"In this guide we’ll bring together many of the options available within Max Mega Menu to display a WooCommerce cart icon with “ajax enabled” cart totals. How to add a WooCommerce Cart Total to your Menu Create a new menu item for the cart total To add a WooCommerce Cart...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/11810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=11810"}],"version-history":[{"count":18,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/11810\/revisions"}],"predecessor-version":[{"id":242706,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/11810\/revisions\/242706"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=11810"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=11810"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=11810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}