Activate Your Mini Cart

Written by the Divi Engine Documentation Team

Introduction

Follow this information to activate your mini cart.

What Is A Mini Cart?

A mini cart allows you to show the contents of the cart without clicking through to another page. Click HERE to view a minicart.

Step 1: Add Cart Icon

Your first step is to add the cart icon to your menu. By default, WooCommerce adds a cart icon to your default WordPress menu. If you are using the Them Builder for your main menu then add the Menu module, select Cart and show the shopping cart icon. Now you will have a cart icon in your menu. Note that you can customize this icon using the "Cart Icon Settings" in BodyCommerce. Click HERE for more on styling your cart icon.

Step 2: Enable The Mini Cart

Head over to Divi Engine > BodyCommerce > Mini Cart/Pop Up Settings tab. On there enable the "use mini cart" setting. This will now add the mini cart on your website when you hover over the cart icon. 

Customize Your Mini Cart

• Mini Cart Style: Select if you would like it to drop down or slide in.
• Mini Cart Activate: Choose if you want the icon to appear when you hover or click on the icon.
• Mini Cart Style: We have two styles to choose from. The default one is a drop-down from the cart icon or the slide in the mini cart. Choose the style you want here. If you are using ajax add to cart, you might need to add a product to the cart after changing this so that the HTML fragments get refreshed. If not you might see the HTML structure of the other mini cart style. We have settings specifically for the slide in mini cart further down the page. If using the slide in, you have to have it as click to activate (below).
• Remove text "item" on default cart icon: If using the default cart icon and not our custom one, you can remove the words "item" or "items" that appears after the cart count.
• Mini Cart Width: Change the width of the mini cart.
• Horizontal Distance: Set how far left or right you want to the mini cart to be from its original position. (horizontal)
• Vertical Distance: Set how far up or down you want to the mini cart to be from its original position. (vertically)
• Remove link - text or icon: Here you can choose if you want the remove link to be an icon "x" or the words "Remove".

Ajax Add To Cart Settings

If you are using or want to use ajax add to cart, you can utilise the settings below. Ajax add to cart is when you add a product to the cart and the page does not reload but adds it to the cart. This improves user experience and reduces the time they have to wait for the page to reload. 

First, you need to head over to Divi Engine > BodyCommerce Mods > General Mods tab and enable "Enable Ajax Add to Cart?" - this will add this feature across the site. Then you can use the following settings.

1. Ajax Mini Cart/Pop Up: Enable this so that when they add the product to the cart it will auto-update the cart. If this is disabled, the cart will still show the old value in the cart until the page is reloaded. 
2. Auto show mini cart after update: This is a cool feature to use. It allows you to auto show the mini cart when a product is added. It is a nice way to show confirmation that the cart has been successfully updated.
3. Enable ajax add to cart Pop Up: This is an alternative to the auto show above. If you want to show a modal popup with the cart contents and buttons saying "keep on shopping, cart, checkout) - this is for you. Some like to have this and gives the user more information and a clear path to checkout.
4. Successfully added to cart Text for Pop Up: If using the cart pop up, this will change the text "successfully added to the cart".
5. Continue Shopping Button Text for Pop Up: If using the cart pop up, this will change the text "continue shopping".
6. Auto show delay: If you have the auto show above, you can choose the delay before it shows.
7. Time to close: If you have the auto show above, you can choose the time it takes before the mini cart will auto go away.

Style Your Mini Cart

We have a number of settings under the heading "Style Your Mini Cart / Add to cart pop up" - you can use these to change the colours, buttons and general appearance.