DigiFusion includes a built-in WooCommerce cart icon that can be displayed in your header navigation. This feature provides customers with quick access to their cart contents without leaving the current page.
Enabling the Cart Icon
Navigate to Appearance > Customize > WooCommerce > Cart Icon in your WordPress dashboard.
Toggle the Enable Cart Icon option to display the cart icon in your header navigation. Once enabled, the cart icon will appear alongside your navigation menu items.
Configuring Cart Icon Display Options
Item Counter
Enable the Enable Counter setting to show the number of items in the cart as a badge on the cart icon. This counter updates automatically when items are added or removed from the cart.
Price Display
Activate Enable Price to show the total cart value next to the cart icon. The price updates in real-time as customers modify their cart contents.
Mini Cart Dropdown
Turn on Enable Mini Cart to display a dropdown when customers hover over or click the cart icon. The mini cart shows:
- Cart item thumbnails
- Product names and prices
- Quantity controls for each item
- Remove item buttons
- Total cart value
- View Cart and Checkout buttons
Customizing Cart Icon Colors
Access the Cart Icon Colors section to modify the visual appearance:
Cart Icon Color: Changes the main cart icon color to match your site’s design.
Counter Background: Sets the background color for the item count badge.
Counter Text: Adjusts the text color inside the counter badge.
Price Text: Controls the color of the cart total price text.
Click on each color field to open the color picker. You can select colors using the visual picker, enter hex codes directly, or use the eyedropper tool to match existing colors from your site.
Cart Icon Placement
The cart icon automatically appears in your header navigation area. It positions itself after your existing menu items and adapts to your current header layout and styling.
When customers add items to their cart using WooCommerce’s add to cart functionality, the cart icon updates immediately without requiring a page refresh.
Mobile Responsiveness
The cart icon automatically adjusts for mobile devices, maintaining functionality while fitting appropriately within mobile navigation layouts. The mini cart dropdown adapts to smaller screens for optimal usability.