How to create a floating cart icon with Divi

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?

17 Comments

  1. ich bin einfach unfähig. bei mir ist nur ein graues quatrat ohne Inhalt und ohne Funktion sichbar.

  2. 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;
        }

  3. 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 [email protected] and we can help you. All the code you need is above

  4. Hello, How do you remove this from the mobile versions?

    • Nevermind, figured it out.

      • Perfect thanks!

  5. Thank you for the nice tutorial. Worked like a charm.

    • Thanks for the feedback! Glad we could help

  6. 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;
      }

  7. 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;
      }

  8. 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;
      }

Submit a Comment

Explore more from Divi Engine

SPIN TO WIN

UPGRADE YOUR DISCOUNT!

  • Get ready to spin and win as we celebrate the Easter Holiday!
  • 1 spin per email
  • No cheating
Try Your Luck
Never
Remind later
No thanks