Hey there! Great observation—adding a cart icon to the right of your WooCommerce navigation bar is a standard e-commerce practice, and it’s totally straightforward to set up. Here are a few methods to get it done, depending on your technical comfort and theme setup:

Method 1: Custom Code (Most Flexible for Full Control) #

If you’re comfortable with a little code (or want to avoid extra plugins), this method lets you add a cart icon with item count directly to your menu.

1. Add the PHP snippet
   Either open your child theme’s functions.php file (Appearance > Theme File Editor > Child Theme > functions.php) or use a plugin like Code Snippets to safely add custom code without editing theme files directly. Paste this code:

   function add_woocommerce_cart_icon_to_menu($items, $args) {
       // Target only your primary navigation menu (adjust 'primary' if your theme uses a different location)
       if ($args->theme_location == 'primary') {
           $cart_count = WC()->cart->get_cart_contents_count();
           $cart_url = wc_get_cart_url();
           
           // Build the cart icon element
           $cart_icon = '<li class="menu-item menu-item-cart">';
           $cart_icon .= '<a href="' . esc_url($cart_url) . '" title="' . __('View your shopping cart', 'woocommerce') . '">';
           // Use Font Awesome (if your theme supports it) or replace with Dashicons/another icon
           $cart_icon .= '<i class="fas fa-shopping-cart"></i>';
           // Show item count only if there are products in the cart
           if ($cart_count > 0) {
               $cart_icon .= '<span class="cart-count-badge">' . $cart_count . '</span>';
           }
           $cart_icon .= '</a>';
           $cart_icon .= '</li>';
           
           // Append the cart icon to the end of the menu
           $items .= $cart_icon;
       }
       return $items;
   }
   add_filter('wp_nav_menu_items', 'add_woocommerce_cart_icon_to_menu', 10, 2);
   

   • Note: If your theme uses Dashicons instead of Font Awesome, replace the <i> tag with <span class="dashicons dashicons-cart"></span>.

2. Style it to align right
   Go to Appearance > Customize > Additional CSS and paste this to make sure the cart icon sits on the right side of your navigation:

   /* Align cart icon to the right of the navigation menu */
   .menu-item-cart {
       margin-left: auto;
       display: flex;
       align-items: center;
       padding-left: 15px;
   }
   
   /* Style the item count badge */
   .cart-count-badge {
       background-color: #e74c3c;
       color: white;
       font-size: 0.7rem;
       padding: 2px 5px;
       border-radius: 50%;
       margin-left: 4px;
       min-width: 16px;
       text-align: center;
   }
   

   Tweak the colors, padding, and sizing to match your theme’s design.

Method 2: No-Code Option with a Page Builder #

If you use a page builder like Elementor, Beaver Builder, or Divi, adding the cart icon is even easier:

• Open your header/navigation template in the builder
• Look for the WooCommerce Cart widget/module (usually under WooCommerce-specific elements)
• Drag it to the rightmost spot in your navigation bar
• Adjust settings like "Show Icon", "Show Item Count", and styling directly in the builder, then save your changes.

Method 3: Use Your Theme’s Built-In Settings #

Many popular WooCommerce-compatible themes (like Storefront, Astra, Flatsome) have built-in options for this:

• Head to Appearance > Customize
• Look for sections like WooCommerce, Header, or Navigation
• Search for options labeled "Show Cart Icon", "Cart Position", or "Navigation Cart"
• Select the option to place the cart icon on the right side of your menu, then save.

Quick Notes #

• Always use a child theme or code snippet plugin for custom PHP—this prevents your code from being lost when you update your parent theme.
• Test the icon on mobile devices to ensure it looks good in responsive mode (you might need to adjust CSS for smaller screens).

内容的提问来源于stack exchange，提问作者user8978302