How to Add WooCommerce Cart icon shortcode in the menu

How to Add WooCommerce Cart icon shortcode in the menu

As you know every WooCommerce store has a Woo Commerce Cart icon page, to collect products or services to buy from the website. The WooCommerce Cart page gives an overview of the shopping list to the customers. There are lots of ways to access the WooCommerce Cart page on the website. You can access the WooCommerce Cart page from the menu or by typing the URL manually. But what if I tell you can see all the details of the Cart Page from anywhere on the website? Our best WooCommerce cart icon shortcode 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. WooCommerce cart icon short code Plugin can help you to walk with the trend.

What is WooCommerce Cart icon short code?

The Menu Cart For WooCommerce is a WordPress plugin to add a WooCommerce cart in the menu to the website. This best WordPress plugin lets you add the fly out 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 icon short code plugin.

Why add a WooCommerce cart icon shortcode in the menu

The Menu Cart For WooCommerce plugin not only adds the fly out in the menu bar but also gives you various features and design elements to improve your online store. You can change the layout, text, color, background color, and 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 fly out. 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 the WooCommerce Cart icon short code to the menu, then let me show you.

How to Add WooCommerce Menu Cart

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 Plugin

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 Cart icon 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 the 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 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 fly out and customize the fly out details.

From the Fly out Settings tab, enable the fly out on the menu item.

Enable the flyout on the menu item

Users can fully control the details shown on the fly out, they can enable or disable any of the details on the fly out. Some 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 fly out, customize the other details

Control the behavior of the fly out.

You can select how the fly out 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 fly out.

Change the displayed total amount

Set how many numbers of the product will display on the fly out.

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 fly out.

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 fly out, 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 fly out.

Customize the text of the flyout

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

Design the fly out.

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 fly out 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 WooCommerce Cart icon 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

WooCommerce cart icon short code for the flyout

If you want to add the flyout anywhere on the website instead of the menu, you can use the woocommerce cart icon short code.

Enable or disable flyout on the WooCommerce cart icon short code.

Enable/Disable flyout on Shortcode

Control when the display flyout, on click or hover over the button(button added using the woocommerce cart icon 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 WooCommerce Cart icon plugin

  • Set User-selected menu for WooCommerce Cart menu item.
  • The price on the fly out 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 fly out details like product image, name, price, quantity, product link, a total amount, and remove the product from the Cart button.
  • Set WooCommerce products limit in the fly out product list up to 10 or all products.
  • Add buttons in fly out for the Cart page, Checkout page, both buttons, or no buttons.
  • Change the text of the same of fly out parts.
  • Options for changing the color of the fly out 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 fly out, users can paste the WooCommerce cart icon short code anywhere on the website.
  • Menu Cart For WooCommerce provides Timely support 24/7, regular updates, and is well documented.

Cons of the WooCommerce Cart icon Short code 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