What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Add A Floating Shopping Cart in WordPress Online Stores

How to Add A Floating Shopping Cart in WordPress Online Stores

A user-friendly and intuitive shopping cart is the important component for any e-commerce site or online store. It collects the items for your customers to better finish the shopping practice. Here, when people click the Add to Cart button or the Buy Now button, the shopping cart can store the selected items for the safe keeping. And then, people can continue choosing what they want to buy before redirecting to the checkout process directly. Here, for the more effective buying procedure, we’d like to tell you how to add a floating shopping cart in WordPress online stores built using WooCommerce.

With the floating cart displayed on your website, your customers can always get the clear information of what they have purchased. In this case, they can easily know the total items added into the cart and the total price they have to pay.

Make Use of the Floating Cart for WooCommerce Plugin

To achieve the display of the floating shopping cart, we highly recommend you to leverage the Floating Cart for WooCommerce plugin. This plugin works for WooCommerce based online store, with which you can guide your customers while shopping.

In addition, this plugin allows the full customization option for the showcase of the shopping cart. In this case, you can decide how and where it will display for your customers.

Now, you can install this plugin and check the following to learn how to use it properly for your e-commerce sites.

Finish All the General Settings

To begin with, you should click the BravoWP Cart button from the WordPress admin panel. Here, you firstly need to focus on the General setting part.

Floating Cart for WooCommerce General Settings

To ensure the great experience for people to add the items into the shopping cart, this plugin only allows the cart to be displayed in the bottom section of each page. However, you have the right to decide the cart position between the options of bottom right or bottom left. Personally speaking, the bottom right position is more convenient for most online users.

In addition, you can decide the rendering mode between the Extended mode and the Collapsed mode.

Choose the Pages Settings

From this part, you can choose when to display the floating shopping cart. By default, this cart will appear all the times on all your pages. However, you can hide the cart occasionally. For instance, you can choose not to show the cart for the purchase confirmation, on the Contact Us page, when the transaction fails and many more.

Floating Cart for WooCommerce Pages Settings

In addition, it is possible that you only want to display the floating cart on some explicit pages. If so, you can move to the bottom section to enter the URLs for showing or hiding this special cart.

Explicit Pages

Select the Color Settings for the Floating Cart

Next, you can choose the color schemes for your floating shopping cart based on your preference and the whole page design.

In general, you should determine the text color and the background color for the header, body, subtotal, view cart button, checkout button and footer of the shopping cart.

Floating Cart for WooCommerce Color Settings

Enter the Textual Label for the Buttons and the Shopping Cart

After choosing the proper color scheme, you also need to enter the exact textual content or the label for the shopping cart button. For instance, you should determine the main header text, the subtotal header text, the subtotal body content, the view button label, the checkout button label and the exact text when the shopping cart is empty.

Floating Cart for WooCommerce Text Settings

Determine the Buttons to Be Displayed

In general, there are two buttons that will appear in the floating shopping cart. One is the View Cart button. By clicking it, your customers can get the detailed information of what they have purchased. These include the item name, quantity, price and some other specifications, such as size and color.

Another button is the Checkout button. If people click on it, they will be redirected to the checkout page directly so as to finish the order easily.

Here, we highly recommend you to display these two buttons at the same time. However, if you have your own requirements or preference, you can hide one of them as you like.

Floating Cart for WooCommerce Button Settings

Showcase the Floating Shopping Cart

As you have finished all the settings for this plugin, now, you simply need to save the changes. This way, a special floating shopping cart will appear automatically on the exact pages and location you have decided.

Floating Shopping Cart Sample

The shopping cart will stick to that location no matter people scroll up or scroll down the webpage. In this case, they can add the items into the cart effortlessly while browsing your offered products. And in the meanwhile, they can easily know how much they need to pay to finish the order.

In addition, the showcase of the View Cart button and the Checkout button in the shopping cart also gives people the utmost convenience.


Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.