How Do I Add a Side Cart in WooCommerce?
WooCommerce is a popular plugin for WordPress. Even though it comes with its own cart page, a WooCommerce side cart is a better and more feasible option. The shopping cart pop-up you see on most e-stores? Yes, that’s what we are talking about.
If you are wondering what a side cart is and how to add it to your web store, then we are here to help. With the help of this guide, you will not only understand what this plugin is, but also learn how to install it.
Installing WooCommerce floating cart is not a hard task. With just a few steps, you can add this plugin to your website. Keep on reading to find out how you can upgrade your e-store with the addition of this plugin!
What is a Side Cart?
A side cart or a floating cart is a pop-up window on the corner of your webpage when you add something to your cart. When the cart is empty or not in use, it appears as a small icon on the top right or bottom of the webpage. The plugin appears on all the pages of your website, making it easier for the customer to track their cart.
How to Install a WooCommerce Side Cart on your website?
You can purchase and download the plugin from our site. We also offer a 14-day trial!
These are some main features of this plugin:
- Enable Fly To Cart animation
- Enable Coupons
- Enable Cart Totals and Total Savings
- Enable Express Checkout Form
- Enable Cart Menu Item
- Enable Suggested Products
- Enable Free Shipping Bar
- Support variations, bundles & composites
- Clear / Restore the entire cart in 1 click.
- Display product attributes within the cart
- Custom Colors / Backgrounds
- Select between Checkout Or View Cart button
- Option to trigger the cart on Mouse Over
- Display Subtotal or Total
How to Customize the plugin?
XT Floating Cart WooCommerce plugin is highly customizable. You can change the appearance and features of the plugin to match your web store.
Here is the tour of all the features that you can explore:
Live Preview Customizer
The basic look of this WooCommerce side cart is a plain white square with a shopping basket icon. You can customize it according to your branding color palette, fonts, and size.
The control panel on the left provides different customization options.
When you click on the floating cart option in the side menu, there will be another menu to advance customization.
The menu offers a plethora of options to customize your WooCommerce side cart.
Default Side Cart Settings
When your customer adds a product to the cart, it will show up in the WooCommerce cart instantly.
General Settings
If you go to the general settings, you will be able to change the initialization, scrolling options, cart loading options, product fly time, movement of the icon, etc.
Cart Settings
Moving on to the cart settings, you can change the background color settings and change the position of the icon from the bottom right to any other corner of the window, change the modal mode, animation type, cart auto height, cart dimension unit, and change the radius of cart’s border.
Trigger Settings
With the trigger settings, you can add multiple CSS selectors. You can also hide the main trigger if you want to create custom triggers instead. You can customize which page you want your floating cart icon to appear and which page should not have it.
So, you can adjust the cart trigger size, position, colors, clicking options, Product counter appearance, or even choose your own icon for the cart. If you don’t like the given icons, you can upload your own svg icon to further customize your WooCommerce cart.
Header Customization
Next, with the header customization option, you can change the icons used in the header, like the close icon, trash icon, clear all/trash can icon color, header message, shipping bar, header bar color, header title color, header bottom border, header link color, and error message color.
This option allows you to fully customize your header, choosing the colors of your brand. You can also add more options in the header to make the cart’s features even more advanced.
Body Customization
The body of the cart is also fully customizable. You can change the color of the body to match your brand’s color palette.
Cart Product Customization
When it comes to the products, you can show / hide product skus, attributes, bundled items or showing composite product items. You can also hide the product thumbnail or change its shape and size.
Footer Customization
The cart footer options are rather simple. The control panel allows you to change the color of the footer to match your theme. For the checkout button, you can select between redirecting to the checkout page or to the cart page.
You can make your checkout button clear and visible, so your customer can easily head over to the billing process to complete the order. This will result in increased sales as everyone loves to shop with ease.
Coupon Settings
Next comes the coupon settings which will allow you to enable or disable the coupon form and the coupons list with many options. Your customers can find all the available discounts directly within the cart. It keeps the customer hooked, and they keep coming back to check for more coupons. How cool is that!
Product Suggestions
The suggested products option can directly boost your sales. You have several options to choose from.
You can select the query type, Cross-Sell, Up-Sell, Related Products or custom selection.
You can also change the position of the suggested items and the number of suggested products to display.
Main Cart Menu Settings
The Cart Menu Item option will add a cart icon trigger within your menu. Many options available! Along the cart icon, you can display the product count and totals. Whenever the cart menu item is clicked, the floating cart will open.
Cart Trigger Shortcode
This is pretty much the same as the Menu Cart Item option, however, the trigger can be displayed anywhere via shortcode.
Visibility Options
Moving on to the visibility settings. By default, the floating cart is shown on all pages, except the native cart and checkout pages. You can also select custom pages where you would like to disable the floating cart.
Typography Settings
Next is the Typography settings. With this option, you can change the size and font of the footer, product counter, product attributes, product quantity, remove the link, and footer.
Since it is very important for brands to have similar fonts across the website, this plugin features hundreds of fonts to match the requirements.
Cart Extras
The cart extras allow you to make sure your cart has everything to make your customer’s shopping experience easier. From checkout form and cart totals to express payment options, it has everything.
To activate the express PayPal express checkout option, you will have to install and activate the PayPal plugin first. The easier your cart will be, the more sales you will generate, as they will not have to leave the product page each time they need to have a look at the checkout.
JS API
Lastly, you have the JS API, which allows you to programmatically change the look and features of your cart. This option is for experts who have the knowledge about programming; beginners can stick to the automated customizer and change their WooCommerce side cart to suit the needs of their online store.
The JS API option features toggle cart, open cart, close cart, refresh cart, and various other options.
With a WooCommerce side cart plugin, you can make the shopping experience of your customers completely hassle-free.
How Does a WooCommerce Floating Cart Help You Grow Your Business?
Have you ever been in a situation when you are on the main product page, but you need to check your cart out to make a few changes? Most people find themselves in this situation and end up not purchasing more products once they are directed to the cart page.
With a WooCommerce Side Cart, your customers will be able to make changes to their carts no matter what page they are on. It allows the customers to shop at the momentum that they have built, resulting in increased average order value.
WooCommerce is already a strong plugin to support e-stores that make navigation and shopping so much easier. With an efficient side cart, your web store can become properly customized for new and old customers.
Conclusion
A WooCommerce side cart makes your website more user-friendly. It allows your customers to keep track of their cart, change the quantity of the items, apply discount codes, find and add related products to the cart and proceed to checkout without changing the page.
With an easier interface, your customers will more likely return to your page, resulting in more sales and business growth.
