Are you looking to add a handy WooCommerce shopping cart icon to your menu bar or header of your online store?
Having a cart icon on the menu bar allows users to access their cart anytime they want with a single click. This feature helps reduce anxiety about the order total by letting customers check their cart items anytime.
Plus, keeping an eye on their cart can speed up the checkout process, making shopping on your site a breeze.
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 show how you can add a WooCommerce cart icon to the menu without any coding.
Plus, we'll also share some conversion-boosting tips to make your customers' shopping experience even better.
Let’s start.
Contents
A WooCommerce shopping cart icon is a visual element typically displayed on your e-commerce website using the WooCommerce platform.
The shopping cart icon usually appears in the website’s header menu or main navigation area and serves key functions:
The WooCommerce shopping cart icon can be customized based on the design, size, and placement to fit the aesthetics of your brand.
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 or website header.
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 quantity of order items or remove them from the cart, add relevant product suggestions, and earn 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 WooCommerce sliding cart option.
For that, navigate to FunnelKit ⇨ Cart, turn the toggle to the ‘Enable Cart’ button, and click on Save.
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 cart 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 the WooCommerce cart icon to the menu in two ways:
You can use either of the steps 4 or 5 to accomplish your use case.
For this option, on the “Add to Menu” option, select the menu (primary menu) you have created for your WooCommerce store.
Make sure you’ve already added a primary menu on your website.
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.
This is how you can add the WooCommerce cart icon to the menu using the built-in append method.
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 WooCommerce cart icon 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 has been 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:
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.
Adding a mini shopping cart icon 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., from the shopping cart.
Since placing orders becomes easier with this option, users are less likely to abandon their carts 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 milestone-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.
It can be accessed by clicking on the WooCommerce cart icon and has a buy now button which takes you to straight 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 inside the WooCommerce mini cart.
When you add a coupon field on the mini cart, users can apply and see the final 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 WooCommerce mini shopping cart.
Join our Facebook group and subscribe to our YouTube channel for more profiting tips to grow your business.
Here are some effective best practices to follow when adding cart icon to WooCommerce menu or website header.
1. Strategic placement
Place the cart icon in the top-right corner of the menu for maximum visibility and accessibility.
This conventional location ensures users can easily find the shopping cart.
Position the cart icon close to the search bar, as users frequently use the search function and are likely to notice the cart nearby.
2. Size and clarity
Ensure the size of the cart icon is perfectly balanced—not too small, which might get overlooked or too large, which can be visually overwhelming.
Use contrasting colors for the cart icon to enhance visibility, making it stand out against the background and other items.
FunnelKit Cart gives you all the design options you need to customize the size of your cart icon as per your requirements.
3. Design consistency
Match the cart icon’s design with the overall site branding. Use consistent colors and styles to maintain a professional look and reinforce the brand identity.
Make sure to customize the WooCommerce cart menu icon that fits your brand’s aesthetics, whether it’s minimalist, playful, or modern.
Consistency in design elements enhances the user experience and FunnelKit Cart has all the styles you need.
4. Mobile responsiveness
Ensure the cart icon adapts well to different screen sizes. FunnelKit Cart lets you adjust the width, animation speed, border radius, and more for a seamless mobile experience.
In addition, this icon can be easily tapped on mobile devices, maintaining usability across all devices.
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?
