Divi BodyCommerce allows you to enable and customise the mini cart on the Divi theme.
Below is a video that demonstrates how to use the mini cart in BodyCommerce.
What is a mini cart?
A mini cart allows you to show the contents of the cart without clicking through to another page. This aids the User Experience of the website.
Enabling 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. Now you are faced with some options to choose from.
- 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 of mini cart to choose from. The default one which is a drop-down from the cart icon or the slide in 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.
- Ajax Mini Cart/Pop Up: Enable this so that when they add the product to 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.
- 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.
- 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.
- Successfully added to cart Text for Pop Up: If using the cart pop up, this will change the text "successfully added to the cart".
- Continue Shopping Button Text for Pop Up: If using the cart pop up, this will change the text "continue shopping".
- Auto show delay: If you have the auto show above, you can choose the delay before it shows.
- 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 colors, buttons and general appearance.
Slide in Mini Cart Settings
We have a number of settings under the heading "Slide in Mini Cart Settings" - you can use these to change the appearance of the slide in mini cart. They are all self-explanatory so should not be a problem.