WooCommerce Floating Cart Popup plugin adds an easily accessible floating cart on the selected pages of your WooCommerce store, making it much easier for the shoppers to view added products on cart, remove and edit the quantity of the product, check total and shipping amount, and proceed to purchase without actually visiting the cart page. This on-page, anytime-accessibility of the cart improves the user’s experience, eases the purchase process and hence improves the conversion. The plugin is well customizable and has a set of features that fulfil the ultimate goal of your business.


  • Display cart content on hover or click
  • Add Fly to Cart effect
  • Allow buyers to check the cart details on click or hover
  • Allow buyers to increase or decrease the quantity of products.
  • Display total amount and shipping charges to buyers
  • Buyers can remove the added products from the cart.
  • Allow buyers to proceed to checkout directly from the floating cart popup


You need to install and activate the plugin after you have purchased it.

  • Manual Installation Process

The manual installation method involves uploading the WooCommerce Floating Cart Popup to your WordPress plugin section.

The steps are as follows :

1) Upload the WooCommerce Floating Cart Popup file to the /wp-content/plugins/ directory.
2) Activate the plugin through the ‘Plugins’ menu in WordPress.

3.Plugin's Panel Options:

3.1. Backend Options and Overview Panel

After activating the “WooCommerce Floating Cart Popup” plugin, you will have an added menu with the name “MakeWebBetter” in your WordPress Dashboard. 

Click on the MakeWebBetter menu, and then click on “WooCommerce Floating Cart Popup“.

The “Overview” panel of the plugin appears as shown below:
div class=”mwb-docs-product-imag<es” >

WooCommerce Floating Cart Popup

The Overview panel of the plugin contains a brief description of the plugin, how is this plugin helpful and what are the top features of the plugin. Altogether, the overview section gives a quick idea of what this plugin is capable of.

3.2.General Setting Panel

In this panel, you get to set the general setting of the plugin as shown below:

WooCommerce Floating Cart Popup

2.1. Enable: To add the floating cart icon on your WooCommerce store and to enjoy all the features of this plugin, start by enabling the plugin using this enable button.

WooCommerce Floating Cart Popup

2.2. Upload Cart Image: The admin gets this option to add an icon for the floating cart based on their choice. However, there is a cart icon that appears by default.

WooCommerce Floating Cart Popup

Here’s how it appears to the shoppers in your store.

WooCommerce Floating Cart Popup

To change the icon of the floating cart:


  1. Click on “Change Cart Icon” button
  2. Select the icon from the Media Library and inset
  3. Done

Example: With the above steps, when you upload an icon in Gif format. The floating cart of store appears as:

WooCommerce Floating Cart Popup

2.3. Fly to cart Effect: This is the visual effect of how the product flies to the floating cart, after a buyer clicks on the “add to cart” button. The available options are as follows :

Available options are:

WooCommerce Floating Cart Popup

Let’s see Drag effect in action:

WooCommerce Floating Cart Popup

2.4. Cart Template: In this setting option, you can choose a template for your floating cart popup panel from the three available options.

  • Template 1

WooCommerce Floating Cart Popup

  • Template 2
WooCommerce Floating Cart Popup
  • Template 3
WooCommerce Floating Cart Popup

After doing all the settings, SAVE the settings to see the action

3.3.Floating Cart Panel

In this setting panel of WooCommerce Floating Cart Popup plugin, you can set the various aspects of how your popup will look like. Overall, there are seven major aspects that we need to set. 

The overall floating cart setting panel looks like this:

WooCommerce Floating Cart Popup

3.1. Cart Total Container: In this setting option you can set three things about the cart total containers. These are:

  •   Background Color: Select the color that you want to give to the background of cart total containers.
WooCommerce Floating Cart Popup
  • Text Color: Select the color for the text in the cart total containers.
WooCommerce Floating Cart Popup
  • Position: Select the position of the cart container. It can be left or right.
WooCommerce Floating Cart Popup

For example: Let suppose I set orange as background color, white as text color and position as right. Then the cart containers look like.

WooCommerce Floating Cart Popup

3.2. Cart Display on: In this setting menu, you can set the behavior of the floating cart, when it will display the cart details. The two options are:

  • On Hover
  • On Click 
WooCommerce Floating Cart Popup

3.3. Cart Position: With this setting, you can set the position of the floating cart at different places on the screen of your WooCommerce store.

     The available options are:

WooCommerce Floating Cart Popup

3.4. Cart X and Y Offset: With these setting options you can displace the position of the cart from the edge of the screens. Cart X offset shifts the floating icon horizontally (left and right) while the Y offset shifts the cart vertically, (up and down).

WooCommerce Floating Cart Popup

3.5. Enable and Select Pages: Here in this setting, first check the checkbox. An option is added to select the pages where you want to display the floating cart icon. 

By default, all pages are selected.

WooCommerce Floating Cart Popup
  • Cart Heading Background Color: Set the background color for the heading section of the floating cart popup
WooCommerce Floating Cart Popup
  • Cart Heading Text Color: Set the color of the heading text.
WooCommerce Floating Cart Popup

Note: Make sure that the heading text color and background color have enough contrast. 

Example: With all the above setting, the heading appears as:

WooCommerce Floating Cart Popup


3.7. Checkout Button Settings: Here you can set the checkout button that appears at the bottom of the floating cart popup. The following setting can be done:

  • Checkout Button Text: You can write the text that you want to be written on the button. By default it is set to “Checkout”.
WooCommerce Floating Cart Popup
  • Checkout Button Background: Set the background color of the checkout button.
WooCommerce Floating Cart Popup
  • Checkout Button Text Color: Here you can set the color of the text that you want.

WooCommerce Floating Cart Popup

Note: Keep the text and background color in enough contrast to keep both distinct and clear. 

Example: With all the above setting, the checkout button appears as:

WooCommerce Floating Cart Popup

3.4.License Activation

The plugin is protected through license code and therefore to use this plugin you need to verify by entering the license key and activate it.

  1. Copy the Purchase Code that you got after purchasing this plugin. 
  2. Paste it in the section
  3. And click on “Validate”


WooCommerce Floating Cart Popup

Note: You have 30 days to verify your license after activating the plugin. If you do not complete the license activation, the plugin will stop functioning. After successful validation, this section get removed. 

You can check the license activation process in detail on: License Activation steps


The WooCommerce Floating Cart Popup plugin offers multisite compatibility. This means you can run the same plugin for your entire network of individual WooCommerce stores.

4.WPML Compatibility

The WooCommerce Floating Cart Popup is made compatible with the WordPress Multilingual (WPML) plugin for localization of the plugin’s strings.

To translate the plugin the first step is to extract all the strings of the plugin and it can be done with the help of the following steps

  1. From your, WordPress Admin Panel visit WPML → Themes and Plugins Localization.
  2. Now scroll down to the Strings in the plugins section.
  3. Lastly, select the Events Ticket Manager For the WooCommerce plugin from the list of plugins.

floating cart panel

Translate the plugin strings by pressing the
Translate Strings button next to the plugin. Next, you’ll be redirected to a page from where you can manually select a string for translation. On this page, click on the “+” button next to each string in a row.

A popup will occur in which you’ve to write the translation of the string:

Floating cart translation

Once you’ve written the translated it’ll be automatically saved. When the customer chooses a different language WPML will translate the plugin’s string for the user.

Floating cart strings


By using this you can view added products on cart, edit products quantity, remove, check total amount, and also proceed to purchase without visiting the cart page.

WooCommerce Floating Cart Popup helps to increase conversions and reduce cart abandonment, so it will affect your sales directly or indirectly.

Yes, buyers can directly click the purchase button from the floating cart popup panel

This means that the buyers can perform actions on floating carts; they can remove products, increase and decrease product quantity and proceed to checkout as per their needs

It is the visual effect that makes this plugin attractive to use. As the buyer adds anything to the cart, the product image visually flies into the floating cart.

Yes we have this feature which allows admin to change the text and color of the " Checkout" button on the floating cart popup.

The admin of the store can select the position of the floating icon that will be displayed on the pages. Some of the available options are:

  • Right bottom corner
  • Left Bottom corner
  • Upper right corner
  • Upper left corner

We have a feature that allows users to increase and decrease the quantity of the product and it can be done directly from the popup.

We have a support team with a technical team that also helps with all your queries and support you need. We work 24*7 to help our clients.

Suggest Edit