Cart Counter

This component allows you to display an AJAX Woocommerce cart count for use mainly in site headers to allow users to keep track of how many items in their shopping cart.

Option Controls

This components can be used as a simple link to your cart page, to create a dropdown cart or as a trigger to reveal your cart either in an offcanvas or a modal.

Link to Cart

This option will turn the entire cart counter element into a link that will automatically send users to the cart page as set in the Woocommerce settings. The link text can be changed from the default ‘Go to Cart’.

Dropdown

By selecting dropdown, the cart counter can be used as a click trigger for revealing any elements nested inside of it. This is ideal for being able to build custom dropdown carts that include a mini cart as well as other elements.

The drop down itself has it’s own style settings for positioning, borders, shadows, width and controlling the fade in duration that takes place when the element is clicked. Clicking anywhere outside of this dropdown will close it, as will clicking the cart itself once it is open.

Note: the dropdown is an absolute positioned element (positioned relative to the cart counter itself). This is why the max-width is set in vw, not 100%. For mobiles, setting the max-width to around 90vw (this is the default) is ideal as it guarantees the content won’t overflow the viewport. Setting to a percentage won’t work here, as it would mean a percentage of the small cart counter itself, not the viewport.

None

Selecting none is ideal if you are intending to use this component to be a trigger for opening up an offcanvas element or a modal. In which case, you would just need to give this element a class, say ‘offcanvas-cart-trigger’ then use that class as the selector when you add your offcanvas element.