The WooCommerce Cart Icon Block displays a shopping cart icon with customizable count, total, and text elements for WooCommerce stores. This Pro block provides comprehensive styling options and mini cart functionality, making it perfect for custom headers that you can easily create with our DigiFusion theme and its Pro version.
Adding the WooCommerce Cart Icon Block
Navigate to the post or page where you want to display the cart icon. Click the block inserter (+) and search for “Cart Icon” in the DigiBlocks WooCommerce category. The block will be added with default settings showing a placeholder cart with sample count and total values.
Icon Configuration
Icon Type Selection
Choose from four different cart icon styles in the General settings:
Shopping Cart – Traditional shopping cart icon with handle and wheels
Shopping Bag – Modern shopping bag silhouette
Shopping Basket – Retail basket design
Custom Icon – Upload your own SVG icon code
When Custom Icon is selected, a text area appears where you can paste your SVG code. The custom icon will replace the default cart icon while maintaining all styling and functionality options.
Display Options
Control which elements appear alongside the cart icon using the toggle switches:
Show Count – Displays the number of items in the cart as a badge
Show Text – Shows customizable text next to the icon
Show Total – Displays the cart total amount
Show Mini Cart – Enables a dropdown mini cart on hover
Hide When Cart is Empty – Hides the entire cart icon when no items are present
Layout and Alignment
Layout – Choose between horizontal (icon and text side-by-side) or vertical (icon above text) arrangements using the responsive controls
Alignment – Position the cart icon left, center, or right within its container
Text Customization
Configure the text elements in the Text Settings panel:
Cart Text – The label that appears next to the cart icon (default: “Cart”)
Empty Cart Text – Alternative text displayed when the cart is empty
These text strings support translation and can be customized to match your store’s language and branding.
Mini Cart Configuration
When Show Mini Cart is enabled, additional options become available:
Mini Cart Width – Set the width of the dropdown mini cart with responsive controls (250px to 500px)
Position – Choose whether the mini cart appears to the left or right of the cart icon
The mini cart displays cart contents, product thumbnails, quantities, prices, and action buttons in a dropdown that appears when users hover over the cart icon.
Color Styling
The Colors panel provides extensive color customization with Normal and Hover state tabs.
Normal State Colors
Icon Color – Set the color of the cart icon
Background Color – Background color for the entire cart icon container
Count Text Color – Color for the item count number
Count Background – Background color for the count badge
Text Color – Color for the cart text label
Total Color – Color for the cart total amount
Border Color – Border color when border styling is applied
Hover State Colors
Configure color changes when users hover over the cart icon:
Icon Color – Icon color during hover
Background Color – Background color on hover
Count Text Color – Count number color on hover
Count Background – Count badge background on hover
Text Color – Text label color on hover
Total Color – Total amount color on hover
Border Color – Border color during hover state
Mini Cart Colors
When mini cart is enabled, additional color options become available:
Background Color – Mini cart dropdown background
Border Color – Mini cart border color
Text Color – General text color within mini cart
Heading Color – Color for mini cart headings
Price Color – Product price text color
Total Color – Cart total text color
Button Background – Background color for action buttons
Button Text – Text color for action buttons
Button Hover Background – Button background on hover
Button Hover Text – Button text color on hover
Remove Color – Color for remove item links
Remove Hover Color – Remove link color on hover
Sizing and Spacing
Icon and Element Sizing
Icon Size – Adjust the cart icon dimensions with responsive controls (16px to 80px)
Spacing – Set the gap between icon and text elements (0px to 50px)
Container Spacing
Padding – Internal spacing around the cart icon container with responsive dimension controls
Margin – External spacing around the entire cart icon block with responsive dimension controls
Typography Settings
Text Typography
Font Family – Select from Google Fonts collection
Font Size – Responsive controls with pixel, em, or rem units
Font Weight – Select from available font weights
Font Style – Normal or italic styling
Text Transform – None, uppercase, lowercase, or capitalize
Text Decoration – Add underline, overline, or line-through effects
Line Height – Control line spacing with em or pixel units
Letter Spacing – Adjust character spacing with responsive controls
Count Typography
Font Family – Independent font selection for count badge
Font Size – Responsive size controls for count number
Font Weight – Font weight specific to count display
Font Style – Normal or italic for count text
Text Transform – Text transformation for count
Text Decoration – Decoration effects for count
Line Height – Line spacing for count text
Letter Spacing – Character spacing for count
Mini Cart Typography
When mini cart is enabled, additional typography controls become available:
Mini Cart Typography – General text styling for mini cart content
Mini Cart Heading Typography – Specific styling for mini cart headings
Mini Cart Button Typography – Typography controls for action buttons
Border Styling
Border Style – Choose from none, solid, dotted, dashed, or double border styles
Border Width – Set border thickness for each side with responsive dimension controls
Border Radius – Round corners with responsive controls supporting pixels and percentage units
Animation and Effects
Animation Effects
Animation Effect – Choose from fade, slide, zoom, bounce, and other entrance animations
Preview Animation – Test the selected animation effect in the editor
Hover Effects
Hover Effect – Select from scale, bounce, pulse, or no hover animation
Advanced Settings
Visibility Controls
Hide on Desktop – Hide the cart icon on desktop devices
Hide on Tablet – Hide the cart icon on tablet devices
Hide on Mobile – Hide the cart icon on mobile devices
Additional Options
HTML Anchor – Add a unique anchor ID for direct linking
Additional CSS Classes – Add custom CSS classes for advanced styling
Frontend Functionality
The cart icon automatically connects to WooCommerce cart data on the frontend, displaying real-time cart count and total values. The mini cart dropdown shows actual cart contents with product thumbnails, quantities, and checkout options. All interactive elements function properly with WooCommerce’s AJAX cart system.