Header Cart Icon
📝 Note: Make sure you have WooCommerce installed and activated in order to have access to the Cart Icon.
The header builder ( found in Appearance > Customize > Header ) has three rows in which you can easily select and arrange the available components you can find while hovering over each division of the rows.
Add a Header Cart Icon
Just click on the ➕ symbol and a list of components will appear. From there you can add the Cart Icon component.
To open the customizing options, just click on the ⚙️ icon inside the Search Icon component. This will open the Search Icon panel on the left side, from where you can customize the component.
| Layout Tab
|| Style Tab
- Appearance > Customize > Header > Cart Icon > Layout
Custom padding and margin
In the Layout tab, you also have access to advanced positioning options like:
- Padding - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions ( Desktop | Tablet | Mobile ).
- Margin - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions ( Desktop | Tablet | Mobile ).
- Alignment - left / center / right
- Desktop | Tablet | Mobile
- Appearance > Customize > Header > Cart Icon > Style
Basic styling the Header Cart Icon
Styling for the Cart Icon component includes:
- Icon Size - modify the size of the icon or undo the changes with the reset button.
- Color - add a color to the cart icon.
- Hover color - add a different color when you hover with the mouse.
[PRO only] Change the Label Size.
[PRO] Change the Header Cart Icon and style
📝 Note: These options are part of Neve Pro's WooCommerce Booster module.
- Select Icon: Choose to use a different cart icon, from the provided list
- Cart label: A piece of text that will display just before the cart icon. If you want to display a dynamic value like the total amount from the cart, for e.g., you can use Dynamic Tags.
- To get access to the Dynamic Tags click on the three dots shaped like a triangle from the Cart label input.
- Mini Cart Style: By default, on hover over the cart icon, a mini cart is displayed as a dropdown, letting users see what's in their cart at that moment. From here, you can change this behavior.
- By selecting Off Canvas, clicking on the cart icon, the mini cart will slide in from the right side as a sidebar(this behavior doesn't apply on Mobile devices). By selecting Link, clicking on the cart icon, the user will be redirected to the Cart page.
When the Mini Cart Style is set to Dropdown or Off Canvas, it's automatically displayed when a product is added to the cart, from the shop, or a products archive page, for example below.
- Custom HTML After Cart: An area that allows HTML code and shortcodes, and will display at the end of the mini cart.