Magento 2: Adding Quantity Increment Button in Mini Cart

The mini cart is one of the most crucial elements of every online store, and the Magento 2 site is not an exception. Adding the quantity increment button, which allows shoppers to change the number of items in the mini cart quickly and conveniently, will obviously improve customer experience and boost conversion rate.

In this article, we would like to introduce you to a solution to enhance Magento 2 mini cart by taking advantage of the Magento 2 Quick Cart extension.

What is Magento 2 Mini Cart?

The Magento 2 mini cart is a widget that appears in the upper-right corner of every page, such as home page, category pages, product detail pages. The mini cart is often displayed as a bag or cart icon that contains a summary of the shopping cart details. When a customer adds a new item to the cart, the number on the right of the mini cart icon will be updated automatically.

You may expect that consumers will follow a linear process of finding your online store, looking for their desired products, adding those items to a cart, and finally checking out.

In fact, many shoppers do not follow this model. They may pick some items, review them, then walk around the store more. They may put some things back because they change their minds, or they are aware of their budgets.

Without the mini cart, shoppers are typically moved to the shopping cart page if they want to review their products. Then, if they wish to continue shopping, they have to navigate back to the category or product pages. It is problematic to customer experience as it interrupts and makes the buying process more inconvenient.

Thanks to the mini cart, customers can examine items in detail, edit the number of products, delete items without having to leave the shopping page they’re on.

The mini cart allows visitors to see when items are added to the cart without interrupting their shopping process. Shoppers can continue seamlessly, and go to the checkout page only when they are ready to proceed, which ultimately improves their shopping experience.

Magento 2 Default mini cart provides customers with the following information:

• Cart Subtotal

• Proceed to the Checkout button. Shoppers click on this button to begin the checkout process. Picked items with name, price, quantity. Customers can click on the item name to visit the product detail page. They can also press the See Details button to see more information about an item such as size, color, etc.

• Edit and Delete icons. If customers click on the Edit icon, they will be redirected to the product page to change and update the variations of the product. If they click on the Delete icon, then confirm, the item will be removed from the shopping cart.

• View and Edit Cart link, which redirects customers to the shopping cart page.

The mini cart in Magento 2 is a useful feature, but it is not functional enough to impress your website visitors. You can even make it more outstanding by leveraging an advanced mini cart module.

Why Add a Quantity Increment Button in a Mini Cart?

There is no doubt that having an excellent mini cart is valuable to your customers and critical for optimizing conversion rates. The design of the mini cart must be persuasive. It has to make the consumer shopping process smoother.

By default, Magento allows customers to change the quantity of the items by editing the text box and submitting the Update button. That is a lot of effort for the user. You should research the best practice to make this process as smooth as possible.

Adding the quantity increment button is a must-have feature. It enables your customers to edit the number of products in the mini cart with ease. The customers can increase or decrease the number by pressing a single button.

If a customer has a smartphone or a computer with an error-prone keyboard, they cannot easily change the number of items in the Magento default mini cart. However, the increment and decrement buttons can support them in this case.

A user-friendly quantity increment button must have clear, explicit signifiers. The plus button is often placed to the right of the value. And the minus button is positioned to the left.

For adjusting small values, the quantity increment button requires fewer interactions than the default input method. For example, to increase the number of the jacket from 1 to 2 in the above mini cart, the shopper only needs one tap on the plus button. This action obviously requires less effort than clicking on the input field, tapping the digit two on the keyboard, and hitting the Update button.

This minor change, compared to the Magento default mini cart, can significantly enhance user experience and boost conversion rates. A tiny improvement in your conversion rate can contribute a significant revenue over time.

Why Need an Advanced Mini Cart?

The Limitations of Magento 2 Default Mini Cart

First of all, the design of the mini cart in Magento default is quite simple, and its effect is not appealing. Also, as we have discussed above, it does not include a quantity increment button, then it causes inconvenience for the user when editing the number of items.

Secondly, the details shown in the default mini cart are limited. The mini cart only shows the subtotal, not counting for the discount, the shipping fee, and tax. Customers have to go to the shopping cart page to see the final amount they have to pay.

Finally, the default mini cart does not allow customers to apply coupon code. They have to go to the shopping cart or checkout page to use it.

All of these things cause customer frustration, then consequently decrease your conversion rates.

The Improvements of Quick Cart Extension

Magento 2 Quick Cart enhances the default mini cart in both layout and effect.

The layout becomes more user-friendly. The subtotal section is placed in the right position, below the item section. The Go to Cart and Checkout button are positioned and highlighted at the end of the mini cart. The increment and decrement buttons allow shoppers to add up or subtract the number of products quickly.

The new mini cart is customizable with the hover-over popup or slide-in popup effects, which makes the mini cart more appealing to customers and brings a fresh image to your shopping site.

Thanks to Quick Cart, the mini cart becomes more informative. All the details, including subtotal, shipping and handling fee, tax, grand total, reward points are listed clearly. Customers can grab all the needed information and control their current shopping cart better.

The upgrade of the mini cart also allows customers to apply or cancel the coupon codes directly. Shoppers no longer have to go to the shopping cart page. It motivates customers to finish their checkout process quickly.

In general, an advanced mini cart has full functionality and is even more optimal than the shopping cart. Therefore, the customers can check out from the mini cart without difficulty. The checkout process becomes more straightforward and easier for customers. The more user experience is improved, the more revenue you can generate.

Related post: How to Customize Mini Cart using Magento 2 Minicart extension

How to Add the Quantity Increment Button in Mini Cart

To add the quantity increment button in the Magento default mini cart, you have to override the template of default Magento. If you are not a developer and have excellent technical skills, you will probably struggle here.

This blog aims to introduce you to a simple solution to add the quantity increment button by integrating Quick Cart extension.

Step 1: Enable the extension

From the Admin Panel, go to Stores > Configuration > Mageplaza Extensions > Quick Cart, select General.

• Enable: Select Yes to turn on the extension.
• Popup Effect: Choose popup effect as Slide Popup or Hover
• Auto-Open Minicart: Choose Yes to open a mini cart automatically when adding a new item.
• Show Coupon: If Yes, the coupon box is displayed on the mini cart.
• Show Information: There are two options, showing full total information or only displaying subtotal information.
• Fixed position mini cart: Select Yes always to show the mini cart icon when the page is scrolled.

Step 2: Configure the design

From the Admin Panel, go to Stores > Configuration > Mageplaza Extensions > Quick Cart, select Design.

You can freely set the colors for:

• Header Background
• Header Text
• Subtotal Background
• Select Subtotal

You can also use the custom CSS function to write CSS code, and customize the design as you want.

The result on the frontend

After finishing the configuration in the backend, refresh the storefront, you will get a mini cart with the quantity increment button.

Related posts:

• How to Customize Minicart in Magento 2
• Magento 2 Change Qty extension

Conclusion

It is vital to reduce customer effort and optimize user experience at any step on their purchasing journey. Integrating an advanced mini cart module to cut down checkout steps and minimize friction will definitely improve your site conversion rates.

We hope that this blog has brought you a better view of the solution to provide your customers with a convenient shopping experience.

Explore Magento 2 Quick Cart