How to Add WooCommerce Cart Icon to Menu Bar?

Editorial Team
January 15, 2024
How to Add WooCommerce Cart Icon to Menu Bar?

Do you want to add the WooCommerce shopping cart icon to the menu bar or website header of your online store?

Having a cart icon on the menu bar lets users quickly access their cart anytime they want with a single click. By enabling customers to check their cart anytime, you can alleviate customers' anxiety about the order total.

Moreover, as customers know what's inside their cart all the time with a single click, a cart icon results in quicker checkout. 

In this blog, we’ll demonstrate how you can add a WooCommerce cart icon to the menu without any coding.

Plus, we’ll also look at some conversion-worthy elements you can add to elevate your user’s shopping experience.

Let’s start.

What is a Menu Shopping Cart Icon?

A menu shopping cart icon is like a tiny picture of a shopping cart that you see on a website located at the top of the menu. 

Usually, the cart icon also shows the number of items inside numbers available in the cart.

Here’s an example of the shopping cart icon on the menu header:

woocommerce add cart icon to menu

See the cart icon with the bubble numbered 1. This means the cart has one item present there.

When you click on it, you can either go to the cart page or access a mini shopping cart, depending on the plugin you use. 

In case you access a mini cart, you can:

  • View the cart items
  • Update the quantity or remove any content 
  • Check the cart total
  • Apply the coupon code
  • Directly go to the checkout page, skipping the default WooCommerce cart page
  • Buy with one-click express checkout payment methods
woocommerce add cart icon to menu sliding woocommerce cart

This is a great way to access the cart on the go; irrespective of the current page you’re on.

Why Add a Mini Cart Icon to the WooCommerce Menu bar?

Adding a Mini Cart Icon to the WooCommerce menu bar or website header is a strategic move with several benefits for your online store. Here's why:

  • Enhanced user experience: A mini cart icon provides a quick and convenient way for users to check the contents of their shopping cart. It streamlines the user experience, allowing customers to see what items they've added without navigating to a separate page.
  • Easy access to cart information: Placing the cart icon in the menu bar ensures that users can access their cart information from any page on your site. This accessibility is crucial for customers who want to review their selections before purchasing.
  • Encourages shopping convenience: The mini cart icon simplifies the shopping process. Customers can easily view and manage their cart items, making the overall experience more user-friendly and encouraging them to continue exploring your products.
  • Streamlined checkout process: Having the cart readily available in the menu bar reduces the number of steps customers need to take to review their selections. This streamlined process can contribute to higher conversion rates as it minimizes potential obstacles in the buyer's journey.

Adding a mini cart icon to the WooCommerce menu bar is a smart strategy to help improve the overall shopping experience, increase user convenience, and boost conversion rates.

How to Add WooCommerce Cart Icon to the Menu Bar using FunnelKit Cart?

Here, we will use FunnelKit Cart to add a cart icon to the WooCommerce menu bar.

FunnelKit Cart is a WooCommerce mini cart plugin that allows you to add a modern slide-in cart to your WooCommerce store. 

With this plugin, users can access the mini cart just by clicking on a cart icon from any page on the website and seeing order details with cart items. 

They can update the order items' quantity or remove them from the cart, add relevant product suggestions, and get rewards for their purchases.

This plugin has free and paid versions, but we will use the free version.

The free version of FunnelKit Cart is available on WordPress.org. Let’s install and activate the plugin on your WordPress site before moving to the main process.

Step 1: Enable the mini cart option on the WooCommerce store 

First, you need to enable the mini cart option. 

For that, go to FunnelKit ⇒ Cart, turn on the “Enable Cart’ toggle button, and click on Save Changes.

go to funnelkit cart

After enabling the cart option, you can choose the icon's visibility, deciding which pages you want the mini cart to be visible. 

You get three options: Entire Website, WooCommerce pages, and None. 

By default, FunnelKit Cart displays the mini cart icon on the bottom of the website, either on the left or right. 

icon position

However, since we will add the cart icon to the menu in the header, we don’t want to showcase it at the bottom of the website, as having two icons may confuse the customer. 

So, here we are going to choose ‘None’.

choose visiblity as none

For more design customization options, check out our blog on “WooCommerce Mini Cart”.

Step 2: Enable the cart menu 

Now, to add the cart icon to the menu, move to the Cart Menu tab.  

Here, first, turn on the “Enable Cart Menu” option. 

enable cart icon

Step 3: Customize the look and content of the cart icon 

You get the following customization options to set how the cart icon will look like:

  • Cart Icon: FunnelKit Cart offers six different cart icon options. Choose the one you like.
  • Show Product Count: If you want to show the product count, enable this option.
  • Show Cart Total: Enable this option to show the cart total along the cart icon.
  • Icon Size (in px): Specify the size of your WooCommerce sliding cart icon.
  • Text Size (in px):  Set the text size of the cart total here. 
Customize the look and content of the WooCommerce cart icon

With FunnelKit, you can add icons to the menu in two ways: 

  • By appending the cart icon to a menu
  • By adding the cart to the menu using a shortcode

You can use either step 4 or step 5.

Step 4: Add the cart icon to the primary menu using in-built method

For this option, on the “Add to Menu” option, select the menu (primary menu) you have created for your WooCommerce store.

add cart icon to menu

You can also embed the cart shortcode to any page of their woocommerce website from the embed shortcode option.

Finally, click on the ‘Save’ button to update the changes. 

Save WooCommerce cart icon settings

Now, if you check the front end, you should see a cart icon in the menu. 

preview header cart

Step 5: Using a shortcode to add the cart icon to the menu (optional)

For this option, you need to install make sure to select the option “Select menu” for “Add to Menu.” This means no menu is selected. 

After that, copy the Embed Shortcode value “[fk_cart_menu]” and click on “Save” to update the new settings.

copy shortcode to add WOoCommerce cart icon to menu

🔔 Note: To use the shortcode method, you need to install and activate the Shortcode plugin in Menus

After activating the plugin, go to Appearance ⇒ Menu and choose the menu where you want to add the cart icon using shortcode. 

If you have the suggested Shortcode plugin activated on your site, then you should see a new option to add a shortcode to the menu.

To add a shortcode, click on the Shortcode option. 

click on shortcode funnelkit cart

Then, provide a title, and for the value, paste the FunnelKit Cart shortcode you had copied earlier. 

After that, click on “Add to Menu” to add the shortcode to the menu, and then click on Save Menu to update the menu. 

add shortcode to add cart item to menu

Now if you check the front end, you will see the cart icon is added to the menu. 

preview cart using shortcode

If you add items to your cart, you’ll see the cart icon with the product count and cart total. 

woocommerce add shopping cart icon to menu preview add cart icon to wordpress menu woocommerce

Now, if you click on the cart icon, a side cart will appear with the product details. Here, you can update product quantity or remove any item if you want. 

Note: With the free version, you can allow express checkout on the mini cart as well. Read our blog on “WooCommerce One-Click Checkout” for more details.

WooCOmmerce mini cart with in-cart recommendations

FunnelKit Cart comes with two AOV boosting features: in-cart product recommendations and a milestone-based rewards system. 

With in-cart product recommendations, you can offer product recommendations such as upsell and cross-sell products on the cart itself, and users can add them to their cart with a single click. To learn more, read our blog on "in-cart product recommendations".

The milestone-based reward system enables you to offer rewards such as free shipping, discounts, and free gifts when users add a certain amount of products to their cart.

As rewards incentivize users to buy more, this feature effectively boosts your average order value. To learn more about mile-stone-based reward system by FunnelKit Cart.

5 Mini Cart Elements You Can Add to Increase Conversions 

Adding a mini cart to the WooCommerce store might not be enough to get the amount of conversion you are looking for. 

Here are 5 tips you can follow to increase the conversion rate of your mini cart:

  • Offer one-click express checkout. 

Customers can checkout with a single click if you offer one-click express checkout, such as Apple Pay, Google Pay, etc, in your mini cart. 

Since placing orders becomes easier with this option, customers are less likely to abandon their cart without making a purchase. 

It helps you streamline the traditional checkout process to make it quick and convenient for the user.

👉 For more details, read our blog on how to set up WooCommerce one-click checkout.

  • In-cart product recommendations 

With in-cart product recommendations, you can offer product recommendations such as upsell and cross-sell products on the cart itself. 

It allows users to add related and complementary items to their cart with a single click without having to explore them on your website. 

This helps you to sell more products and boost average order value. To learn more, read our blog in-cart product recommendations.

  • Add mile-stone-based rewards to boost average order value 

Offering milestone-based reward systems such as free shipping, discounts, and free gifts based on the cart amount highly motivates users to shop more. 

As rewards incentivize users to buy more, this feature effectively boosts your average order value. 

👉 To learn more, read our blog about a mile-stone-based reward system

reward system WooCommerce mini cart
  • Add a direct checkout option.

This WooCommerce side cart allows you to save time and checkout faster by skipping the cart page and going directly to the checkout page. 

This saves users time and removes an additional step, making the WooCommerce checkout process a lot quicker. 

👉 Learn how to offer direct checkout in a WooCommerce mini cart. 

  • Add apply coupon field 

When you add a coupon field on the mini cart, users can apply and see the amount they will save without going to the cart or checkout page. 

This facilitates quicker decision-making and ultimately contributes to increased sales.

coupon field

These are the tips you can follow to boost the conversion rate of a mini cart.

Ready to Add a Cart Icon to the Menu in WooCommerce? 

Adding a WooCommerce cart icon to the menu bar makes shopping more convenient for the users.

On top of that, if the icon provides the features of a side cart, users can have an even better experience as they update their cart items without going to the cart page.

With FunnelKit Cart, you can add a WooCommerce cart icon to the menu bar for free. 

Plus, if you go for the pro version, you can add product recommendations in the mini cart and offer mile-stone-based rewards to encourage users to buy more stuff and increase the average order value of your store.

Are you ready to offer an offer cart icon in the WooCommerce bar?

Author: Editorial Team
The Editorial Team at FunnelKit (formerly WooFunnels) is a passionate group of writers and copy editors. We create well-researched posts on topics such as WordPress automation, sales funnels, online course creation, and more. We aim to deliver content that is interesting and actionable.

Increase your sales, starting today.

Grab Our Exclusive Bundle
chevron-down