If you are creating an online store, one of the standard requirements is quick access to the Cart contents. Navigating between the Cart and Shop pages leads to poor user experience. The Mini-Cart is used as an extension of the Menu Cart Icon to access the Cart contents easily. With the Mini-Cart, you can display Cart contents easily, and allows user to check what they are purchasing without having to go to the Cart page. The Mini-Cart also enables users to be notified when they insert a product in the Cart.

How to activate the Mini-Cart

To activate the Mini-Cart feature just follow these simple steps:

1. Activate the Theme Options → Navbar → Additional → Cart-Icon to display the WooCommerce Cart Icon in the main Menu bar, screenshot ;
2. Optionally choose whether you want to display the icon outside the menu on mobile by using the Theme Options → Navbar → Additional → Extra Icons Mobile Menu option, screenshot ;
3. In the Theme Options → WooCommerce → Mini-Cart select your preferred Mini-Cart style between Dropdown or Side-Cart, screenshot ;
4. Choose whether you want to use the Default or the Mini-Cart notification with the Theme Options → WooCommerce → Add To Cart Notification option, screenshot .

Mini-Cart styles

Uncode offers two different styles of Mini-Cart that you can choose according to your needs:

• Dropdown: the Dropdown style is the classic Mini-Cart that is presented in a dropdown submenu below the main menu Cart Icon. Note that this type of Mini-Cart works if you have selected one of the horizontal Menu layouts, and it does not work on mobile, screenshot ;
• Side-Cart: the Side-Cart style is presented by an elegant off-canvas/side sliding panel that display the Cart contents on your site. Unlike the Dropdown the Side-Cart works on mobile too. The Side-Cart can be closed from the 'Close' button or by pressing anywhere on its overlay, screenshot .

Added to Cart notifications

Please note that if you want to avoid a page refresh and you want to use the Ajax method when adding a product to your cart you must have enabled the native WooCommerce → Settings → Products → Add to cart behavior → Enable AJAX add to cart buttons on archives.

When a product is added to the shopping Cart, you can choose between different two types of notifications. You can use WooCommerce's Default notification or activate the Mini-Cart behaviour, screenshot :

• Default: this type of notification updates the Cart Icon badge with the number of products inserted in the Cart, and in addition, and when you are in the single product page the default WooCommerce notice is shown at the top of the page content, screenshot ;
• Mini-Cart: this type of notification updates the Cart Icon badge with the number of products inserted in the Cart, and shows the Mini-Cart (Dropdown or Side-Cart), screenshot .