The WooCommerce Modern Cart plugin is an effective tool that can help you speed up the checkout procedure for your online shop. This plugin gives your WooCommerce store a sleek and contemporary shopping cart interface that makes it simpler for your customers to view and handle the items in their shopping carts before completing their purchases. In this document, we will explain how to set up this plugin on your website and take advantage of the unique and awesome features that come with this plugin.
Installation and Activation
To install the modern cart plugin for WooCommerce, follow these steps:
- Log in to your WordPress dashboard.
- Go to the “Plugins” section and click “Add New.”
- Search for “modern cart” in the search bar.
- Click the “Install Now” button next to the modern cart plugin.
- Once the plugin is installed, click the “Activate” button to activate it.
Please note that the Modern Cart plugin is currently in beta mode so you can download it from your dashboard at https://my.cartflows.com/api-downloads/.
Please note that the Modern Cart plugin is still in the Beta version which means as of now you won’t need to activate it.
Settings
Once the plugin is installed and activated, you will need to access the settings page from the WooCommerce dashboard. Click on the WooCoomerce from the WordPress dashboard and click on the Modern Cart option in order to access the settings page.
General Settings
You will be redirected to the General Settings page at first. Let’s look at the options that we have under the general settings of the Modern Cart plugin.
Display Floating Cart
This option will let you display a floating cart on your entire website or WooCommerce pages. You can also disable it if you do not like to display the floating cart on your website.
Here is how it appears on the front end of your website.
Styles
By default, you can choose from two different types of cart styles. You can also manually design the cart icon which we will cover later in this document.
Enable Free Shipping Bar
This option lets you enable a free shipping progress bar. This will let the customers know how far away the order is to get free shipping.
Product Recommendations
This option lets you recommend the linked products to your customers once they add the product to the cart. If you do not have any linked products, please navigate to the product page within WooCommerce and click on linked products. You will find upsells and cross-sells options. Add the products that you would like to recommend. Here is a screenshot below:
Once you have added upsells and cross-sells products to your product, you can then recommend them to your customer every time they add this product to their cart.
Here is how it looks on the front end.
Display Coupon Field
If your website has coupons for discounts to your customers, you can display an option to apply the coupon code within your cart by using this option. You can choose from minimize, traditional, and also disable it if you do not like it.
Minimize:
If you choose the minimize option, the coupon field will be minimized in the cart and the customer needs to click on the drop-down button to display the coupon field.
Traditional:
Choosing the traditional option will display the coupon code field as it is and the customer will be able to enter the coupon code directly into this field.
Show Sub Total and Show Total
Enabling this option will show the sub-total amount and the total amount of items that are added to the cart. To enable this option, simply click on the radio button to turn it on.
Here is what it looks like on the front end of your website.
Text Localizations
These options will help you customize the texts that you see within your cart. Here is a brief description of each of the options:
Main title: This lets you edit the main title of the cart. By default, it is set as “Review Your Cart”. You can change it to anything of your choice.
Recommendation Slider Title: Let you edit the title of your recommendation slider.
Coupon form Title: Let you edit the form title of your display coupon code form.
Coupon field Placeholder: Let you change the coupon code placeholder text.
Checkout Button Label: This lets you change the button text of the checkout button at the bottom of the cart.
Free Shipping Bar Text: Let you change the text on the free shipping bar.
Floating Cart Icon
Display Floating Cart Icon
This option lets you choose the position of the floating cart on your website. By default, the bottom right corner will be selected. You can change it to the bottom left or disable it completely.
Hide If the Cart Empty
This option lets you hide the floating cart button from your website if the cart is empty.
Styling
This option lets you modify the cart to your liking. Here are the following options that you can choose from:
Color
Under the color option, you will be able to change the primary and secondary button colors and you can also edit the text colors.
Width
You can choose the width of the sliding cart that appears when the users click on the floating cart icon. On desktop, the default width is selected as 460px, and on mobile it is selected as 80%. You can edit them simply by clicking on the boxes next to them.
Animation speed
This option lets you choose the speed of the animation by which the sliding cart appears on your screen. By default, it is selected as 300 ms. You can simply change it by clicking on the box next to it.
Display “Powered by CartFlows” text
By default, the modern cart for WooCommerce shows a text at the bottom of the sliding cart which says “ Powered By CartFlows”. If you would like to remove the text, please use this option under the settings. Simply click on the radio button next to it and it will be turned off.
Here is how it looks on the front end of your website:
Extensions
Display Express Checkout Buttons
This option displays the express checkout buttons on the sliding cart. To enable this, simply click on the radio button.
The Modern Cart plugin provides a sleek and user-friendly interface for customers to view and edit their shopping cart. With features such as the ability to easily add products to the cart, the option to update cart quantities, and the ability to view cart details without leaving the page, this plugin offers a seamless shopping experience for customers.
Additionally, the Modern Cart plugin offers customization options to ensure the plugin fits the design and layout of any online store. From adjusting the color scheme to modifying the layout, the plugin can be tailored to match the branding of any store.
