Header Cart Icon

Note: Make sure you have WooCommerce installed and activated in order to have access to the Cart Icon.

Add a Header 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. Just click on the "+" (Add) sign and a list of components will appear. From there you can add the Cart Icon component.

Open customizations for the Header Cart Icon

To open the customizing options, just click on the newly added Cart Icon component. This will open the Cart Icon panel on the left side, from where you can customize the component.

Basic styling the Header Cart Icon

Styling for the Cart Icon component. You can change icon size, normal and hover color.

[PRO only] Change the Label Size.

[PRO] Change the Header Cart Icon and style

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.

Custom padding and margin

Click on the Layout tab to have access to advanced positioning options like Alignment ( inside the header builder available space for the Cart Icon component ), Padding and Margin.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.