You will agree with me that the objective of an online store is that your customer completes a purchase and doesn’t leave your e-commerce without buying anything.
Any step that is unclear or confusing for the customer will make it harder for them to end up buying anything, no matter how attractive your products are or how good your prices are.
One of the elements that can make or break a shopping experience is the action of adding products to the cart.
If it is not clear, the customer will not know what has been added to the cart for the purchase, or what to do after adding a product to the cart, or will think that the store is not working if nothing is “happening” when a product is added to a cart, such as the online store informing that a product has been added to the cart and what to do next.
Table of Contents
How adding products to cart normally works
Let’s see first what do we have by default.
In the default WordPress themes, and many others, it simply changes the name of the button and a message appears that the product has been added to the cart, accompanied by a button.
This, which might seem enough to you, is not always very clear to the customer, and may not notice it, especially if the products are added to the cart in the catalog or front page of the online store.
Something to keep in mind, before finishing, is that we can force the behavior of the cart in 2 ways through WooCommerce settings, regardless of the theme or plugins.
To do this you have to go to WooCommerce → Settings → Products → General → Add to cart behavior.
There you will find 2 very relevant settings:
- Redirect to the cart page after adding products successfully – If you enable this option, as soon as you add a product to the cart, the customer is automatically redirected to the cart page. This has the advantage that there is no hesitation and the customer already knows that the next step is to complete the purchase. What is not convenient is to use this setting in multi-product stores, but for single-product e-commerce, where the customer will normally not buy more than one product or service (e.g. consulting, hotel reservations, etc.), so he/she does not normally need to continue browsing the store and/or add more products to the cart. However, it should not be enabled for multi-product stores, because it is as if you were forcing the customer all the time to checkout, when in fact the customer may want to add more products to the cart.
- Enable AJAX add to cart buttons on archives – This simply displays the add to cart messages and buttons without reloading the page where the customer is.
You must be careful, but above all always test when changing any of these settings, viewing your store as a customer would see it, in an incognito window and not taking anything for granted, as if you didn’t know how it works. It is always advisable to ask a friend or family member to make a simulated purchase to see it from their eyes.
So it is best to improve this functionality, either with a tool that includes the theme or with plugins. And one of the most useful tools to improve the experience of adding products to the cart is the mini cart.
Mini cart in WooCommerce built into the themes
Before anything else, it is worth checking if your themes contain any utilities that enhance WooCommerce’s default functionality.
Storefront
For example, the free StoreFront theme, from the creators of WooCommerce, already incorporates a couple of features that greatly improve the experience of adding products to the cart.
One is the theme’s built-in mini cart, without having to add plugins.
As you can see in the previous screenshot, when the customer clicks on the add to cart button 2 things happen:
- A button appears just below to view the cart.
- Information is added (visible) to the cart icon in the top menu.
In addition. When hovering the cursor over the cart icon, the list of products added to the cart and a couple of links are displayed:
- View cart
- Checkout
With this theme and its functionality, you would have a very complete and functional mini cart, better than some plugins.
In addition to the mini cart, the Storefront theme includes another functionality by default also very useful, and that is the fixed add to cart bar, which is displayed when the customer scrolls down the page of a product(and stops seeing the products “add to cart” button), showing a reminder of the product being viewed and a quick button to add to cart.
This functionality used to be a plugin, and they incorporated it as standard in the theme.
And one more. It has a widget that you can add that shows all the items added to the cart.
Yith proteo
A free theme, and among its tons of features, it has the option to display a mini cart in the header.
Astra
Incorporates the tool to add a mini cart, even in the free version, in addition to everything that comes with the Pro version, which deserves a separate mention.
To start you should check if you have the Astra theme’s header and footer layout tool active, which you’ll find under Appearance → Astra Options.
If you haven’t activated it yet you can do so with a click on the button.
And once active, or if already active, you will be able to access directly from this screen or from the customizer.
Using them is VERY simple, more so than with the Gutenberg site editor, you will see that in each section of the header or footer(the ones to the right of the gear icons) there are + buttons, you simply click it where you want the new item to appear and select it.
The result is previewed instantly.
Mini cart in WooCommerce with plugins
If you prefer to resort to plugins to add the mini cart functionality to your WooCommerce online store, there are a few good options.
WooCommerce Menu Cart
I’ve been using this plugin for years in several websites, mainly as a substitute for the mini cart that comes with Divi, which is the worst thing about this theme, but otherwise, you know I love it.
It has few settings but enough.
Its functionality is very basic but more than enough. When you add products to the cart it shows you(if you want) the price as well as the items, as you configure it.
Side Cart WooCommerce
I found this plugin to be great, both in functionality and possibilities and I’m talking about the free version.
It has very complete settings, where you can configure both the functionality and the appearance and location.
Then, already in action the concept is great: cart icon that opens automatically when adding a product to the cart, displaying buttons for the fundamental sales funnel actions:
- Continue shopping
- View cart
- Checkout
XT Floating Cart
This plugin is very similar to the previous one although some things change, you will have to see what interests you more.
The basic functionality is very similar to the Side Cart WooCommerce we saw before, with a floating cart icon, with products and popup actions, but there are some differences…
- All the settings are made in the customizer, and you can preview the changes.
- The popup cart summary is not displayed automatically, you can set it to be displayed on click or hover, but in this case the automatic opening would be a paid functionality.
- The popup cart summary allows you to add or remove quantities, great for supermarkets, for example.
- The popup cart summary only has a checkout button, but it doesn’t really miss any others.
- It has tons of settings, which you can customize per device (desktop, tablet, mobile).
- It has dozens of customizations of the appearance and position of the cart, as well as its behavior, many of them free.
Something I don’t like because it’s useless is its settings page, when in fact any button takes you to the customizer.
And I found it odd that all the sections in the customizer are in red, something normally associated with closed, forbidden or pay-only sections, when in fact they are not. In any case it is confusing, and I would encourage them to change the color.
Of course, the amount of settings and customizations that the plugin allows, also by device type, is impressive, even in the free version.
It is an impressive plugin, which is worth trying, and will surely help to complete more purchases in your online store. The decision on one or the other will depend more on small details.
And that’s it for today, I hope you have at least seen the importance of the action of adding products to the cart and its relevance when it comes to your customers having a simple and guided shopping experience.
There are many other plugins but I think these are the best.
