How to Add WooCommerce Cart Icon to Menu

How to Add WooCommerce Cart Icon to Menu

Preface

As you know every WooCommerce store has a WooCommerce Cart page, to collect products or services to buy from the website. The WooCommoerce Cart page gives an overview of the shopping list to the customers. There are lots of ways to access the WooCommoerce Cart page on the WooCommoerce website. You can access the WooCommoerce Cart page from the menu or by typing the URL manually. But what if I tell you can see all the details of the WooCommoerce Cart Page from anywhere on the website. Our best WooCommerce Cart Menu plugin “Menu Cart For WooCommerce” can help you.

It is very important to maintain the WooCommerce website continuously to bring more visitors and sell your product on large scale. How quickly your website responds to a customer’s requirements will determine how many visitors it will receive. So to bring more customers you need to update your WooCommerce store with the trend. Menu Cart For WooCommerce plugin can help you to walk with the trend.

What is Menu Cart for WooCommerce

The Menu Cart For WooCommerce is a WordPress plugin to add a WooCommerce cart in menu to the WooCommerce website. This best WordPress plugin lets you add the flyout or modal or you can say popup in your WooCommerce menu for the Cart page. You can see all the details of the WooCommerce Cart page by hovering or clicking on the menu item instead of visiting the WooCommerce Cart page. You can also do much more using Menu Cart For WooCommerce plugin.

Why add a menu cart item in the WooCommerce menu

The Menu Cart For WooCommerce plugin not only adds the flyout in the WooCommerce menu but also gives you various features and design elements to improve your WooCommerce store. You can change the layout, text, color, background color, and WooCommerce Cart icon of the WooCommerce Cart menu item. Options to add view Cart and Checkout buttons, and also customize the button’s text, font color, background color, hover color, font hover color, and border. In addition, users can customize the details which are shown on the flyout. One brilliant feature is a bonus, users can add the Sticky Cart button to the WooCommerce website. The Menu Cart For WooCommerce has many more amazing features to improve your WooCommerce store, you can directly install it on your website or download it from here.

Now you’re thinking about how to add WooCommerce cart icon to menu, then let me show you.

How to Add Menu Cart to WooCommerce Menu

Here we are going to see how to install and use the Menu Cart For WooCommerce plugin on your WooCommerce website to improve the look of your WooCommerce store.

Menu Cart For WooCommerce

Here you can download Free Version or Get Pro Version

Step 1: Install Menu Cart For WooCommerce on your WooCommerce store.

Go to the WordPress admin dashboard > Appearance > Plugin > Add New and Search Geek Code Lab, here you can see our all plugins. Now, look here for the Menu Cart For WooCommerce and install it. This is the free version of the plugin.

Install Menu Cart For WooCommerce

Or the best option is you can download the Menu Cart For WooCommerce plugin from our official website Geek Code Lab. This is the pro version of the plugin. Go to the Geek Code Lab Home page > Plugins > WordPress Pro Plugins.

Download Menu Cart For WooCommerce

Step 2: Active the plugin and go to the settings page.

Now activate the plugin and click on the settings to redirect to the plugin’s settings page, to customize the WooCommerce cart in menu.

Active Menu Cart For WooCommerce

Note: This plugin needs a menu first to implement the WooCommerce Cart menu, so if your website doesn’t have any menu then create one.

Step 3: Select the targeted menu for the WooCommerce Cart menu item.

Here you can select the menu to add the WooCommerce Cart menu item, also users can select multiple menus.

Select the targeted menu

Step 4: Select the WooCommerce Cart menu item’s layout and WooCommerce Cart Icon.

Users can select these best three awesome WooCommerce Cart icons other icons are only available in Menu Cart For WooCommerce Pro plugin.

WooCommerce Cart icons

These three WooCommerce Cart menu item layouts make your menu item looks amazing, other layouts can be unlocked by purchasing Menu Cart For WooCommerce Pro plugin.

WooCommerce Cart menu item layouts

Step 5: Enable the flyout and customize the flyout details.

From the Flyout Settings tab, enable the flyout on the menu item.

Enable the flyout on the menu item

Users can fully control the details shown on the flyout, they can enable or disable any of the details on the flyout. Some of the options are only available in the pro version of the plugin.

Enable/Disable the details on the flyout

Step 6: Control the behavior of the flyout, customize the other details, and design the flyout.

Control the behavior of the flyout.

You can select how the flyout will display, by clicking or hovering on the WooCommerce Cart menu item.

Behavior of the flyout

Customize the other details of the layout.
In addition, users can change the displayed total amount on the flyout.


Change the displayed total amount

Set how many numbers of the product will display on the flyout.


How many numbers of the product will display

In the free version of the plugin, users can display up to 5 products. from 6 to 10 and the “All product” option is available in the pro version of the plugin.

Add the Cart and Checkout buttons on the flyout.


Add the Cart and Checkout buttons

Here in the Menu Cart For WooCommerce free plugin, you can add the “View Cart page” button on the flyout, options to add the Checkout button or add both buttons are available in the Menu Cart For WooCommerce pro plugin.

Customize the text of the flyout.


Customize the text of the flyout

Users can change the text of the WooCommerc Cart menu item, Cart button, Checkout button, a label of the total amount, and the empty Cart note.

Design the flyout.
Options to change the color of the WooCommerce Menu Cart icon and WooCommerce Menu Cart text.


Color of the Menu Cart icon and text

Can change the Currency position in the WooCommerce Menu Cart item.


Change the Currency position

Users can change the color of flyout text and background, button text and background, and hover color of button text and background. Also, button border width, color, and style.


Change the flyout appearance

Additional features of the Menu Cart For WooCommerce plugin.

Sticky Cart button

The Sticky Cart button is popular nowadays, it gives a little different look to the Cart.

Settings for Sticky Cart button
  • Users can enable and disable the product counter in the Sticky Cart.


    Enable/Disable the product counter

  • Select the position of the Sticky Cart button.


    Position of the Sticky Cart button

  • Set redirect link when user clicks on the Sticky Cart button.


    Set redirect link

Customize the appearance of the Sticky Cart button
  • Users can change the color of the product counter text and background.


    Change color of product counter text/background

  • Options to change the color and shape of the Sticky Cart button.


    Change the color and shape of Sticky Cart

Shortcode for the flyout

If you want to add the flyout anywhere on the website instead of the menu, you can use the shortcode.

Enable or disable flyout on the shortcode.


Enable/Disable flyout on Shortcode

Control when the display flyout, on click or hover over the button(button added using the shortcode).


Control when the display flyout

After the plugin setup is done this is how the frontend of the website looks.


Frontend look of your website

Pros of the plugin

  • Set User-selected WooCommerce menu for WooCommerce Cart menu item.
  • The price on the flyout can be specified as a currency name or a currency symbol.
  • Choose the WooCommerce Cart menu icon from 10 awesome icons.
  • The WooCommerce Cart menu item’s layout also can be customized, here 7 good-looking layouts are available.
  • Customize the flyout details like WooCommerce product image, name, price, quantity, product link, a total amount, and remove the product from the Cart button.
  • Set WooCommerce products limit in the flyout product list up to 10 or all WooCommerce products.
  • Add buttons in flyout for the Cart page, Checkout page, both buttons, or no buttons.
  • Change the text of the some of flyout parts.
  • Options for changing the color of the flyout background, text, button, button text, button hover, button hover text, and in addition, button border can be customized.
  • Enable and disable the Sticky Cart button.
  • Settings for modifying the background color and shape of the Sticky Cart button.
  • To add the Cart menu flyout, users can paste the shortcode anywhere on the website.
  • Menu Cart For WooCommerce provides Timely support 24/7, regular updates, and is well documented.

Cons of the plugin

  • We’re happy to tell you that our Menu Cart For WooCommerce plugin has no cons.

At Geek Code Lab we’re serving you the best quality WordPress and WooCommerce plugins, HTML templates, XD Graphics templates, and creative logos to enhance your website to the next level. So for these types of fantastic kinds of stuff please stay tuned with us.

Testimonial

Very usefool plugin!
Also very good support knowledge.
Response email time, less than an hour.
Happy to buy this product!
Thanks!

ioanniskava

Woocommerce Single Product Page Customizer - Plugin

Great Support

This plugin is easy to use and does exactly what it says it will. I had one small issue and the support was terrific!

allegraportage

Woo Donations - Plugin

It works perfectly. Very useful!!!

Thanks Geek Code, the plugin works perfectly, and they were very kind to customize something for us in seconds !! Amazing!

atlasinternational

Woocommerce Single Product Page Customizer - Plugin

This a great tool for any business that needs to control their stock output. For most businesses the plugin is perfect as it is, I required a slight customisation and the team were imminent in their response time and production of the adaptation. Would recommend to anybody and will not hesitate to do business with the team again.

joseph

WooCommerce Schedule Stock Manager - Plugin

Great Functionality and Support

This plugin does not have any analogs and works great for stores that want to automate restock function in specific internals automatically

Maximus Kuzminas

WooCommerce Schedule Stock Manager - Plugin

The support was absolutely awesome – thanks a lot for the help!
The plugin works the way I expected!

sarielg

Woo Donation - Plugin

Great plugin for simple donations, works well out of the box.

It had a couple of small issues with my custom shop setup but the developer fixed them very quickly when I contacted him. It’s nice to see good support from a developer.

Happy to support this guy. Buy the license.

g-man-jones

Woo Donations - Plugin

Had an issues where the field was not properly rendering on our site. The support team already rolled out an update solving this before I even had a chance to ask.

hedgie9

Woo Donations - Plugin

Fantastic plugin!

I tried the free version of the plugin and could see that the premium version was much better. So I went and upgraded to the pro version as soon as possible.

mortenz

Woo Donations - Plugin

I needed the ability to inject OG tags into the header of individual pages. Other plugins have a lot of other functionality that I do not need.

This plugin is light and sleek and that is all it does. One thing, and it does it well.

I did have to install Classic editor alongside my existing GoodLayers setup. So far it has worked perfectly. I recommend it. I am using version 5.8.2

Tech support was very responsive, and solved my initial issue with the installation I mentioned. Thank you!

johnbroberts

Insert Script In Headers And Footers - Plugin

wanted some image under add to cart button. Done.

I wanted some image under add to cart button. Done. Nice.

wp-newyman

Woocommerce Single Product Page Customizer - Plugin

Easy and effective.

It does what it claims. I could easily added some html (text and images) before add to cart button.

lents3d

Woocommerce Single Product Page Customizer - Plugin