1. Home
  2. Docs
  3. Happy Elementor Addons Pro
  4. Premium Widgets
  5. Mini Cart

Mini Cart

Want to display your cart option in the tidiest way and make it more helpful to customers with the new Happy Addons Pro Mini Cart widget.

Using this advanced cart widget, you can easily implement the cart feature in your online store and help your customer to add or remove their products in their cart whenever they want.

Let’s see how to set it up.

Pre-requisites

How To Use Mini Cart Widget of Happy Addons Pro

Step 1:

First, find the mini cart widget in the search bar and select the widget from the left side menu. Then drag and drop it onto the selected area.

Add Happy Addons Mini Cart Widget

Step 2:

In the “Content” section, you will find the “Mini Cart” and “Wrapper Link” edit options.

Mini Cart Content Section

By clicking on the “Mini Cart” drop-down menu, you will find various options to change your Cart Icon, select Cart Popup, show & hide Subtotal, set up Subtotal Position, and change Alignment.

Mini Cart widget layout option

Note: If you add more products to your cart, it will show the updated cart products with the price each time. Even you can easily remove your product from the cart and add more according to your need.

You can change your popup showing opting to click on the ”Cart Popup Show” drop-down menu. Here you find three options None, Click, and Hover to set your popup display.

Let’s change it and select the Hover.

Change Cart popup show

After setting the Hover Cart Popup, now you see the popup when you hover over the cart.

Display cart popup

Step 3:

In the “Style” section, you will find six style options to design your cart. Here are the lists.

  • Mini Cart
  • Popup:- Body
  • Popup:- Header
  • Popup:- Item
  • Popup:- Subtotal
  • Popup:- Button
Show mini cart style option

Click on the Style–>Mini Cart for redesigning your cart section. You can resize icon size, change text Color, Background Color, Border, Typography, and more. You also edit the count Height, Width, Position, Color, Font-size, and other necessary things.

Mini Cart Style

If you want to change the default style of the popup body, you can do it by going to Style–>Popup Body. Here, you can change the Margin, Padding, Width, Border Type, Box Shadow, and Background Color of the Popup Body.

Popup Body Style

Well, you can also give an impressive look to your popup header. Just visit Style–> Popup Header and you will find various style options to configure your layout. Again, you can change the color, font, add padding, margin, and border space to the Popup Header.

Popup Header

If you need to edit any design to your Popup Item, you can do it by clicking Style–>Popup Item. Here, we allow you to change the cart item’s Title, Quantity, Image, and Remove styles.

Popup Item

Popup Subtotal also will change here. Just go to Style–>Popup Subtotal. Then you can find all controls to change the Subtotal Title & Price Typography, Color, etc.

Finally, you also able to edit your cart Popup Button. Here, you can simply set your View Cart and Checkout Color, Typography, Background Type, and reset the margin and Padding.

Popup Button

Step 4:

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Give a read to this Document to know more about advanced features & functions.

Mini Cart Advanced option

Let’s see the final usage of the Happy Addons Mini Cart widget.

Final Preview of Happy Addons Mini Cart widget

That’s it.

Was this article helpful to you? Yes No

How can we help?