Mini Cart Feature

Do you want to improve the customer experience of your eCommerce store? With Woo Essential’s Woo Mini Cart feature, you can quickly increase your conversion rate. Have your customers add items to the mini cart that appears in the top right corner.

Note:  As of now, The Mini cart feature only supports the Divi Header. It is accessible with the Divi Theme Customizer settings.

For the custom header, the “Mini Cart” feature is unavailable at this moment. We have Good news for our customers that very soon “Mini Cart” will be released as a separate module in Woo Essential plugin, and you can add the “Mini Cart” as a module within your custom header.

Where can you find the Mini Cart Feature?

First, we’ll discuss where you can locate the Mini Cart Feature.

Here we presented a screenshot of the Dashboard. On the left side of the screen, scroll down to Divi and go to Theme Customizer.

Divi → Theme Customizer

Within the above image, the Divi Mini Cart Feature is present in the left column along with the other extensions. Once clicked, you will then head to the Mini Cart Settings. 

These are the FOUR versatile settings present in the Divi Mini Cart feature:

1. Mini Cart Settings 
2. Mini Cart design 
3. View Cart Design 
4. Checkout Button

Let’s go over the details for each of them.

Mini Cart Settings

1. Mini Cart Display – if the display is set on click, the visitor needs to click on the mini cart icon to view the mini cart.
2. Select Icon – select an icon for the mini cart from the collection.
3. Icon Size – resize the icon that you have selected using the slider.
4. Icon Color – select a color for the icon.
5. Icon Background Color – select a color for the background of the icon.
6. Icon Background Border Radius – select a background color for the border of the Icon’s background.
7. Count Background Color – when products are selected there will be a product count, you can select a background color for the count.
8. Count Color – select a color for the count

Mini Cart Display → Hover

What happens when you set the mini cart display to hover?

As you hover on the mini cart icon, the list of items will automatically show up in a dropdown. This simple feature is considered quite trendy and is proven eye-catching for visitors.

1. Mini Cart Display – visitors should hover on the mini cart icon to view the mini cart if the mini cart display is on hover.
2. Select Icon – select an icon for the mini cart from the collection.
3. Icon Size – resize the icon that you have selected using the slider.
4. Icon Color – select a color for the icon.
5. Icon Background Color – select a color for the background of the icon.
6. Icon Background Border Radius – select a background color for the border of the Icon’s background.
7. Count Background Color – when products are selected, there will be a product count, you can pick a background color for the count.
8. Count Color – select a color for the count.

Mini Cart Display → Fly Out (Left)

When clicking the mini cart, the cart will appear as a lightbox on the left side of the screen. 

1. Mini Cart Display – visitors should click on the mini cart icon to view it as a Fly Out format, the mini cart will then show up in a lightbox on the left side of the screen.
2. Select Icon – select an icon for the mini cart from the collection.
3. Icon Size – resize the icon that you have selected using the slider.
4. Icon Color – select a color for the icon.
5. Icon Background Color – select a color for the background of the icon.
6. Icon Background Border Radius – select a background color for the border of the Icon’s background.
7. Count Background Color – when products are selected, there will be a product count, you can pick a background color for the count.
8. Count Background Color – select a background color for the count.

Mini Cart Display → Fly Out (Right)

When clicking the mini cart, the cart will appear as a lightbox on the right of the screen. 

1. Mini Cart Display – visitors should click on the mini cart icon to view it as a Fly Out format, the mini cart will then show up in a lightbox on the right side of the screen.
2. Select Icon – select an icon for the mini cart from the collection.
3. Icon Size – resize the icon that you have selected using the slider.
4. Icon Color – select a color for the icon.
5. Icon Background Color – select a color for the background of the icon.
6. Icon Background Border Radius – select a background color for the border of the Icon’s background.
7. Count Background Color – when products are selected, there will be a product count, you can pick a background color for the count.

Count Color – select a color for the count.

Mini Cart Design

1. Mini Cart Window Background – select a color for the mini cart window/box that appears when the icon is clicked.
2. Mini Cart Window Width – adjust the width of the cart window using the slider
3. Cart Heading Font Size – resize the font for the Heading using the slider
4. Cart Heading Font Color – select a font color suitable for the heading
5. Image Size – resize the images of the products added using the slider 
6. Title Font – resize the title font of the products using the slider
7. Title Font Color – select a color for the font of the title
8. Title Font Size – resize the title font using the slider
9. Quantity Price Font Color – select a color for the quantity price
10. Quantity Price Font Size – resize the font size of the quantity price
11. Item remove button color – select a color for the remove item button
12. Subtotal font color – select a color for the subtotal font
13. Subtotal font Size – resize the subtotal font using the slider
14. Subtotal Price Font Color – select a color for the subtotal price font
15. Subtotal Price Font Size – adjust the size of the subtotal price font

View Cart Button

View Cart Button allows the visitors to view the cart on a separate page. Here, we will discuss the design options for View Cart Button:

1. View Button Background Color – select a background color for the view cart button
2. View Button Hover Background Color – choose a color for the hover feature of the view cart button 
3. View Button Text Color – choose a color for the view cart text
4. View Button Text Hover Color – pick a color for the hover feature available in the view 
5. View Button Border Radius – add a rounded corner by adjusting the border-radius
6. View Button Border Color – select a color for the border
7. View Button Font Style – pick a style of font for the view cart button to make it eye-catching and attractive
8. View Buttons Font – select a trendy font for the view cart button

Checkout Button

The checkout button allows visitors to place an order. This feature button leads to the page where they will need to give information on how they would like to make the payment.

1. Checkout Button Background Color – pick a background color for the checkout button.
2. Checkout Button Hover Background Color – select the hover background color. Your preferred color will appear when you hover over the checkout button.
3. Checkout Button Text Color – select a text color for the checkout button.
4. Checkout Button Text Hover Color – select the color of the checkout hover text. When the cursor hovers over the text, the color will change.
5. Checkout Button Border Radius – adjust the corners to form a rounded corner or square.
6. Checkout Button Border Hover Color – pick a color for the border that will show when hovering over the checkout button.
7. Checkout Button Font Style – choose a suitable font style for the checkout button.
8. Checkout Buttons Font – select a trendy font for the checkout button.