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.
Contents
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:
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:
This is a great way to access the cart on the go; irrespective of the current page you’re on.
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:
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.
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.
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.
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.
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’.
For more design customization options, check out our blog on “WooCommerce Mini Cart”.
Now, to add the cart icon to the menu, move to the Cart Menu tab.
Here, first, turn on the “Enable Cart Menu” option.
You get the following customization options to set how the cart icon will look like:
With FunnelKit, you can add icons to the menu in two ways:
You can use either step 4 or step 5.
For this option, on the “Add to Menu” option, select the menu (primary menu) you have created for your WooCommerce store.
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.
Now, if you check the front end, you should see a cart icon in the menu.
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.
🔔 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.
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.
Now if you check the front end, you will see the cart icon is added to the menu.
If you add items to your cart, you’ll see the cart icon with the product count and cart total.
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.
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.
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:
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.
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.
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.
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.
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.
These are the tips you can follow to boost the conversion rate of a mini cart.
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?
