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.
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)
3. Custom CSS
Next add some custom CSS to make the whole cart icon clickable and remove from header
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