Your cart is currently empty!
Did you add the SayPro Woocommerce Icon
SayPro is a Global Solutions Provider working with Individuals, Governments, Corporate Businesses, Municipalities, International Institutions. SayPro works across various Industries, Sectors providing wide range of solutions.
Email: info@saypro.online Call/WhatsApp: + 27 84 313 7407
Written by
in

Copy this from SayPro Charity Kraal
To add a WooCommerce icon (typically a cart or user/account icon) to the top navigation menu or header, follow the method that best matches your theme setup. Here’s a complete guide to adding the WooCommerce cart or account icon to the top of your site:
🛒 Goal: Add a WooCommerce Icon (Cart or Account) to the Top Navigation
✅ Option 1: Use Your Theme’s Built-In WooCommerce Icon Support
Many popular WordPress themes (like Astra, OceanWP, GeneratePress, Storefront, or Hello Elementor) have native support for showing WooCommerce icons in the header.
Steps:
- Go to Appearance > Customize
- Look for options like:
- Header > Cart Icon
- WooCommerce > Store Notice / Header / Account
- Layout > Primary Menu / Header Elements
- Enable:
- 🛒 Cart Icon
- 👤 Account Icon (usually linked to “My Account”)
- Customize icon style and placement (some themes let you move it to the top bar or secondary menu).
🔔 If your theme supports a header builder, you can drag and drop the Cart or Account element into the header area.
✅ Option 2: Add WooCommerce Icons Manually via Menus
To add a Cart or Account link to the menu:
- Go to Appearance > Menus
- Under Pages, add:
- Cart (
/cart
) - Checkout (
/checkout
) - My Account (
/my-account
)
- Cart (
- Use Custom Links if needed.
Optional: Add Icons to Menu Text
If your theme allows Font Awesome or icon fonts, you can include them like:
<i class="fas fa-shopping-cart"></i> Cart
<i class="fas fa-user"></i> My Account
⚠️ Only works if your theme or plugins support HTML in menu items.
✅ Option 3: Use a Plugin to Add WooCommerce Header Icons
Use a plugin for more control or if your theme doesn’t support WooCommerce icons out of the box.
Recommended Plugins:
- WooCommerce Menu Cart (by WP Overnight)
- Adds a cart icon with item count and total in the menu.
- Highly customizable.
- Elementor Pro or Header Builder Plugins
- If using Elementor or similar, drag-and-drop a cart/account icon into your custom header.
🧩 Option 4: Use Shortcode or PHP (Advanced)
If you’re editing a custom theme or header:
WooCommerce Cart Icon (PHP):
<?php
echo '<li class="menu-cart">';
echo '<a href="' . wc_get_cart_url() . '"><i class="fas fa-shopping-cart"></i> (' . WC()->cart->get_cart_contents_count() . ')</a>';
echo '</li>';
?>
Place this code inside your header.php (or a custom nav walker), wrapped in appropriate HTML.
🔄 Make Sure WooCommerce Is Set Up Correctly
- Cart and My Account pages must be published and assigned under WooCommerce > Settings > Advanced.
- Icons won’t link correctly if these pages don’t exist or aren’t assigned.
🎯 Summary
Method | Best For |
---|---|
Theme Customizer | Easiest for supported themes |
Menus with Icons | Quick and flexible |
Plugin (Menu Cart) | Cart icon + item count |
Custom Code | Full control (developer option) |