How to Use the WooCommerce Mini Cart widget in Elementor with Enter Addons

Best WordPress Halloween Deals from ThemeLooks Ltd.

Get Up To 70% OFF!

When building a WooCommerce store, having a smooth shopping experience is essential and that’s where the Mini Cart for WooCommerce comes in. The Mini Cart widget in Enter Addons lets you display a compact cart summary anywhere on your website. It’s perfect for showing your customers the total items and costs at a glance, without leaving the current page. You can even customize the mini cart icon to match your store’s design, making it both functional and visually appealing.

How to Use the WooCommerce Mini Cart widget in Elementor with Enter Addons: Step By Step Guide

Step 1: Add the Mini Cart Widget

Firstly, select the Mini Cart Widget from the menu bar on the left-hand side of your screen and drag and drop it in the selected area.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Secondly, from ‘Content‘ Tab you will get Cart Button Content and Mini Cart Off Canvas Content section respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

After that, from Cart Button Content section, you can add icon and alignment respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Then, from Mini Cart Off Canvas Content section, you can add off-canvas-title-logo and close-button-icon respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Step 2: Style Your Mini Cart

From Style tab you can find Icon Style, Count Style, Mini Cart Off Canvas Style, Mini Cart Item Style, Off Canvas Logo Style, Off Canvas Close Button, Image Style, Item Remove Button Style, Mini Cart Item Title, Mini Cart Quantity Style, View Cart Button Style and Checkout Button Style section respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Then From ‘Icon Style‘ section you can add or edit width, height, icon-size, icon-color, icon-background-color, icon-margin, icon-padding, border-type, border-radius and box-shadow respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

After that From ‘Count Style‘ section you can add or edit count-width, count-height, count-font-size, count-color, count-background-color, count-left-position and count-right-position respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Then From ‘Mini Cart Off Canvas Style‘ section you can add or edit off-canvas-width, margin, padding, border-type, border-radius and box-shadow respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

After that From ‘Mini Cart Item Style‘ section you can add or edit min-width, margin, padding, border-type and box-shadow respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Then From ‘Mini Cart Off Canvas Title‘ section you can add or edit color, hover-color, background-type, margin, padding, border-type and box-shadow respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

After that From ‘Mini Cart Off Canvas Logo‘ section you can add or edit icon-color, hover-color, background-type, margin, padding, border-type and box-shadow respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Moreover, from this section, you can find HOVER effect also.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Then From ‘Off Canvas Close Button’ section you can add or edit icon-color, icon-size, icon-container-width, icon-container-height, opacity, margin and padding respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

After that From ‘Image Style’ section you can add or edit image-width, image-height, margin and padding respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Then From ‘Item Remove Button Style’ section you can add or edit width, height, icon-size, icon-color, icon-background-color, icon-margin, icon-padding, border-type and border-radius respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

After that From ‘Mini Cart Item Title’ section you can add or edit color, hover-color, typography, margin and padding respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Then From ‘Mini Cart Quantity Style’ section you can add or edit color, hover-color, typography, margin and padding respectively.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

After that From ‘View Cart Button Style’ section you can add or edit button-width, button-height, typography, text-color, margin, padding and border-radius respectively in NORMAL view.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Moreover, from this section, you can find HOVER view also.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Then From ‘Checkout Button Style’ section you can add or edit button-width, button-height, typography, text-color, margin, padding and border-radius respectively in ‘NORMAL’ view.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Moreover, from this section, you can find HOVER view also.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

Final Step: Preview and Save

Finally, after finishing all the editing, click update, and then click on ‘Preview > Preview in new tab’ to see your work live.

How to Use the WooCommerce Mini Cart Widget for Elementor in EnterAddons: Step By Step Guide

That’s all.

Final Thought

Using the WooCommerce Mini Cart widget from Enter Addons is a simple yet powerful way to improve user experience. Whether you’re adding a floating mini cart icon or designing a fully styled mini cart for WooCommerce, this widget gives you full control over design and functionality. With just a few clicks, you can create a seamless, modern shopping experience that keeps your customers engaged and informed throughout their purchase journey.

If need any expert help feel free to Contact Us or Book a Meeting.