In this tutorial, we will show you how to create a floating cart icon with Divi and then take it a little further and use Divi BodyCommerce to customise the cart icon and integrate the slide in mini cart. See below a video of what you will create at the end of this

1. Create a custom footer

Go to Divi > Theme Builder and create a footer template. In this template, add a code module and if using BodyCommerce you can add the shortcode: bodycommerce_cart_icon (put it in [] like the image)

If not using BodyCommerce you can add the following code to your child theme and then add [floating_cart_icon] into the code module.

Floating Cart Shortcode

2. Add CSS to Section/Row

The next thing to do is to sort out the section and row so it becomes a small square at the bottom of the screen.

On the Section – add the CSS below (see image). Remove paddings and margins from the row too and make it 100% width (using the Divi Builder Settings)

Floating Cart CSS

3. Custom CSS

Next add some custom CSS to make the whole cart icon clickable and remove from header

Now you should have this at this point – this is how it will look with the default icon. This looks good but we can take it further with Divi BodyCommerce
Floating Cart default

Next level with BodyCommerce

4. Enable custom cart icon

Go to BodyCommerce > Cart Icon Settings and change the settings to what you want. Below is what we are using:

– Use Custom Cart Icon?: Enable
– Icon Width: 46
– Icon Colour: #000000
– Enable Numbers: YES
– Remove “items”
– Icon Position From The Right: 0
– Icon Position From The Top: 0
– Number Count Position From The Right: 21
– Number Count Position From The Top: -61

4. Modify Section

Go back to your theme footer and your section. Make the background colour transparent.

Add the ID “float-cart” to the section.

5. Slide In Mini Cart

Go to BodyCommerce > Mini Cart/Pop Up Settings and enable the mini cart.

Choose the cart style as “Slide in” and Mini Cart Activate as “click”.

On final setting is to make the mini cart auto update with ajax add to cart – enable “Ajax Mini Cart/Pop Up”.

5. Final CSS

Finally we will add some custom CSS. We want to copy the CSS from the section to the .cart-icon. You can do this by inspecting or if you know CSS, add it yourself. You want the same background colour, border or box shadow if you added this. Below is the full CSS we added and also the rest needed such as z-index

After this you will have the site looking like this
Floating Cart Final

Would you like to try BodyCommerce for Free?