How To Add Floating Cart On Your WooCommerce Retailer

Voiced by Amazon Polly

Buying cart is an entity from which the shop conversion begins. It comprises the merchandise that consumers are honest about buying, and due to this fact as a vendor, you too have to be cautious sufficient to make your procuring cart distinguished and simply accessible.

In these circumstances when prospects buy a number of merchandise, accessibility of the cart turns into a significant issue. Prospects have to go away the procuring web page or product web page a number of instances to verify the so-far added product and complete pricing within the cart web page, and return once more for procuring. That breaks the procuring circulation and builds frustration. 

Right here’s an answer — WooCommerce Floating Cart Popup.

This can be a highly effective device or plugin that may make your procuring cart simply accessible straight on any desired web page of your WooCommerce retailer, with out actually making your consumers bounce to the cart web page. We’ll look intimately on what it’s, and tips on how to arrange a WooCommerce floating cart in your retailer. However, one factor cool, that with floating carts, loads of pointless clicks and page-jump is decreased.

On this article, I’ll information you thru the step-by-step course of so as to add a WooCommerce floating cart to your retailer and cut back the pain-point of the consumers that we mentioned above.

Leap To Part

  1. What’s a Floating Cart?
  2. Easy methods to add a Floating Cart in your WooCommerce Retailer?
  3. Advantages of Including Floating Cart

What’s a Floating Cart?

Floating cart popup is a fast panel that seems when a purchaser clicks on the cart icon. It’s known as a floating cart, as a result of the icon stays on the identical place with the scroll of the web page, and when clicked, it exhibits the varied particulars of the cart. 

Additional, the popup means that you can take away added cart gadgets, change the amount, verify the full value and transport costs, and different issues. Right here is WooCommerce Floating cart popup in motion:

working of floating cart

This easy popup can enhance buyer expertise, improve conversion charge, keep away from cart abandonment prospects, and different advantages that we’ll be discussing in the advantages part beneath. 

Get WooCommerce Floating Cart Popup Plugin

Activate and arrange this plugin in your WooCommerce retailer and convert your buyers extra and higher.

Allow us to now be taught the step-by-step course of so as to add a floating cart in your WooCommerce retailer.  

Easy methods to Add a Floating Cart in Your WooCommerce Retailer?

Including a floating cart on the specified pages of your WooCommerce Retailer is straightforward. After you get the plugin, it won’t take greater than 5 minutes to fully set the plugin and see the floating cart in motion. The steps are as follows:

Step 1. Buy the Plugin From CodeCanyon

You will get the plugin “WooCommerce Floating Cart Popup” from the CodeCanyon retailer. All you need to do is go to the product web page, click on on the “Purchase Now” button, and observe the safe checkout course of. 

In case you are new to CodeCanyon, join and create an account to get all thrilling merchandise on CodeCanyon. 

floating cart plugin

After profitable checkout, the plugin .zip file can be despatched to the verified e mail deal with, with the set of different particulars for license verification. 

Now, you’ve got the plugin. It’s time to put in and activate it. 

Step 2. Set up and Activate the Plugin on WordPress

Listed here are the steps:

  • Add and Set up the Plugin

    From the WordPress Admin panel, click on on Plugin → Add New

    add new

    After you click on on “Add New“, you’re going to get an possibility of “Add Plugin“. Add the .zip file of the plugin that you simply acquired after buying it from CodeCanyon. And, click on on the “Set up Now” button. 

    upload new plugin

    As you put in and activate the plugin. A brand new menu for floating carts can be added within the vertical menu bar underneath the “MakeWebBetter” as proven beneath.

    makewebbetter menu in wp

  • Validate the License

    Validate the plugin by getting into the acquisition code within the “License Activation” part that you simply acquired after buying the plugin. Examine the License Verification course of for extra. 

    verify license

    When you validate the plugin, you’ll be able to proceed to make use of the plugin with none interruption. Additional, after the profitable validation, the “License Activation” part will mechanically disappear. 

    After set up and activation, it’s time to set the plugin and see the floating cart popup options in your WooCommerce retailer. 

    These settings are executed underneath two setting menu:

    1. Normal setting
    2. Floating cart

Step 3. Normal Setting 

Click on on the “Normal Setting” menu to see all of the setting choices. It comprises 4 setting choices, that are:

  • Allow Plugin

    Set the Toggle button to ON to allow the floating cart plugin. It instantly provides a floating cart to your retailer, nonetheless all with the default setting.


  • Add Cart Picture

    Add a cart picture of your selection on this setting. Nevertheless, there’s a default icon, however that’s one thing that will not signify your model. So one of the best is, add your individual icon. It may be even a Gif, as that makes the cart icon extra partaking (instance might be seen in product documentation).

    change cart icon

  • Fly to Cart Impact

    That is a tremendous impact that makes the general floating cart characteristic visually enticing to the consumers. It shows how the product will get into the cart when the guests click on on the “Add to cart” button.

    fly to cart effect

    There are a number of results that the shop house owners can get for his or her retailer.

    1. Drag (proven above)
    2. Zoom Out
    3. Rotate Clockwise
    4. Rotate Anti-Clockwise
    5. Vertical Flip
    6. Horizontal Flip

    Merely select the one you want from the drop-down menu. And, that’s set into motion. 

    fly to cart options

  • Cart Templates

    The popup that comprises the small print of the added merchandise of the cart might be set to a unique design by deciding on a unique template from this feature. 

    There are three totally different templates accessible that are: 

    floating cart templates

Step 4. Floating Cart Setting

Lastly, this setting helps you to change the way in which your popup panel will look and the place. The template that you simply select within the Normal setting, can have some side comparable to title, background colour, textual content colour, and so on. All these formatting might be modified as per your model and selection. 

Other than these design points, you’ll be able to set the place of the cart, choose the web page for the floating cart, set horizontal and vertical offset, and different issues. Let’s be taught to set all of them. 

  • Cart Container Setting

    Right here you’ll be able to set the way in which your cart container will look. Principally, a cart container is a badge on the cart that shows the full variety of gadgets current in your cart. Thus, consumers get to know in regards to the variety of added gadgets even with out clicking on it.

    setting cart container badge

    Once you set these within the backend, your consumers will see these within the frontend as:

    floating cart badge

  • Cart Show Setting

    The floating cart will present popup particulars both on click on or on hover. You possibly can select from this setting possibility. 

    floating cart display

  • Floating Cart Place Setting

    Completely different retailer house owners like to put the floating cart at totally different locations, and therefore the WooCommerce floating cart popup plugin gives you the choice to decide on that place.

    You possibly can shift your cart both on:

    1. Prime proper of the web page
    2. Prime left of the web page
    3. Backside proper of the web page
    4. Backside left of the web page

    position of floating cart

  • Cart X and Y Offset

    X offset helps you to shift the floating cart left and proper in pixels to search out essentially the most appropriate place. Whereas the Y offset helps you to shift the floating cart up and down in pixels. General, it’s all about discovering the proper place for the floating cart in order that no different side of the shop is disturbed. 

  • Choose Pages for Floating Cart

    It’s not handy to show a floating cart on all of the pages of your WooCommerce retailer. Why would somebody need to see a floating cart on the privateness web page, refund coverage web page, and even checkout web page? 

    So, the plugin means that you can choose these pages on this setting. You possibly can select product pages, procuring pages, provide pages, and different appropriate pages the place the floating cart is match to be used.

    select page for floating cart

  • Header & Checkout Textual content and Background Shade Setting

    Admin can set the textual content, background colour and the textual content colour of the header and the checkout button to make it look uniform with the opposite design side of their retailer.

    floating cart color setting

    Right here is the frontend:

    floating cart buttons

    In spite of everything these settings are executed. Save the modifications. And it’s DONE.

    Your WooCommerce retailer with floating cart options is able to interact extra guests with a fast and simply accessible floating cart. 

Advantages of Including Floating Cart

The floating cart popup that we simply discovered to arrange on the WooCommerce retailer, provides some undoubtful advantages. Let’s see what are these further advantages for retailer house owners or prospects. 

Listed here are the advantages:

  • Enhance the procuring expertise of the consumers.

    As we already mentioned, including floating cart popup reduces plenty of further pointless clicks that consumers need to make when planning buy of a number of merchandise. It eases procuring, saves time and further shopping. General, the procuring expertise of the consumers improves. Patrons can instantly verify all of the added merchandise. 

  • Helps in lowering cart abandonment.

    Deserted cart circumstances majorly come up both when the shopper provides unsure merchandise or once they face problem in checkout. With WooCommerce floating carts, each of those main causes are resolved, permitting consumers to simply take away gadgets from the cart, and proceed to checkout. Therefore, the circumstances of cart abandonment reduces. 

  • Examine cart particulars anytime

    Floating cart popup shows all important particulars of the cart straight within the popup that opens up after click on or hover. Therefore, consumers needn’t go to the cart web page to see what they’ve added, its transport costs or to take away any cart. They’ll do all that from the floating cart popup. 

  • Enhance the conversion charge

    Floating cart popup comprises the checkout button, which is much extra accessible than in regular circumstances. This will increase the possibilities of conversion. The better you make the checkout course of the higher is the conversion charge.


Wasn’t the setup course of simple? I discover that too simple.

I’ve tried my greatest to take you with the whole setup course of in essentially the most simple and environment friendly manner attainable. The general setup actually takes not more than 5 minutes if all the pieces goes nicely. 

Nevertheless, you might come throughout any random issues. For that, we’re at all times right here to assist. You possibly can undergo documentation (hyperlink is already supplied above). When you have any doubt concerning the working of the plugin, verify the demo (hyperlink shared above) and even when there may be nonetheless any downside, merely remark beneath. Or contact the help workforce, prepared to assist 24/7.

Thanks for studying. Good luck.


News and digital media editor, writer, and communications specialist. Passionate about social justice, equity, and wellness. Covering the news, viewing it differently.

Related Articles

Back to top button

Adblock Detected

Please turn off the Adblocker