Mini Cart
This component allows you to display an AJAX mini Woocommerce cart in a number of different ways. It works well with other component such as the OffCanvas, the Cart Counter & the Modal giving you lots of flexibility.
Option Controls
As expected, all the elements inside the mini cart can be styled individually such as the cart items themselves as well as all the buttons, the links and all the typography.
Using with the Cart Counter
If the cart counter has been set to be a dropdown, this means elements can now be placed inside to create a custom dropdown. Placing the mini cart inside the cart counter is how you create your cart dropdown. This allows you to build your drop down however you like, adding any elements inside for headings, instructions to customers etc.
If being used as a cart dropdown, the height of the mini cart can be restricted to allow customers to add lots of products into their cart without the cart being too large. This is especially useful for mobile where you may want customers to be able to scroll their products without scrolling too far down the page. Go to Primary > Cart Items > Max-Height of Item List (Scrollable).
Using with the OffCanvas
To create an offcanvas type cart, the mini cart can be placed inside the offcanvas component. Any other elements can also be placed inside the offcanvas.
To make the the mini cart take up the entire height of the offcanvas (shown in the video above) with the cart total and buttons at the bottom, the steps are;
- Add the mini cart inside the offcanvas.
- Go to Mini Cart > Advanced > Size & Spacing > set the height to 100%.
- Go to Mini Cart > Primary > Inner Layout > change the vertical item alignment to space-between.
- Go to Mini Cart > Cart total and set the top margin to auto.
Using with the Modal
Similar to the offcanvas, the mini cart can be placed inside the modal in the same way if you are looking for a fixed popup type cart. There isn’t anything specific you’d need to do apart from it is a good idea to give the cart items a max-height to make sure the products don’t go out of the viewport if customers have a lot of products in the cart.