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
ich bin einfach unfähig. bei mir ist nur ein graues quatrat ohne Inhalt und ohne Funktion sichbar.
Hi,
For some reason the cart placement is on the left and not the right as per the css provided by this great tutorial. I have tried to force it with the section’s position option under the advanced tab, but then the floating cart disappears.
I have tried to add a left position of 95vw, to push it left, in the builder shows that it is then on the right hand side of the screen, but once I go on the live site then it still is on the left hand side.
Please help!
Can you send a link to the site so I can see?
Hi,
Got the answer via email:
Please add this CSS to Divi > Theme Options > Custom CSS
#page-container .bc_minicart_section#float-cart {
left: auto !important;
}
thank you very much
The size of the basket does not change despite manipulations in the basket icon settings.
In addition, the basket icon does not move when the mini slide basket is active.
Do you have a solution? Thank you
Are you using Divi BodyCommerce? If so, please email su*****@di********.com and we can help you. All the code you need is above
Hello, How do you remove this from the mobile versions?
Nevermind, figured it out.
Perfect thanks!
Thank you for the nice tutorial. Worked like a charm.
Thanks for the feedback! Glad we could help
Sorry i follow your guide with css but have this problem with floating cart icon, and also if is possibile i have round border on icon background.
Tks
Yes sure, please add this CSS to get the rounded border
.cart-icon {
border-radius: 100%;
}
#float-cart {
background-color: transparent;
}
i need to erase cart icon inside slide-in menu pls
Add this to remove it from the slide in menu
.et_slide_in_menu_container .shop-cart {
display: none !important;
}
my footer cover floating icon why?
Because your section has a lower z-index. Change this in your section settings or add this CSS
#float-cart {
z-index: 9999999999;
}