The Divi theme can do just about anything for you, including e-commerce. It has built in support for WooCommerce so you can get a nice stylish web store up and running in no time.
If you install WooCommerce then a small shopping cart icon is automatically added to your main menu. I personally had a small bug with a fixed navigation bar at the top: when you scroll down on the page and the menu bar gets squeezed, then the cart icon is not properly aligned any more. (You can see the example in the header image of this post.) The fix is easy…
Fixing the WooCommerce shopping cart icon in the fixed navigation bar
When you scroll down the page then the fixed navigation bar at the top gets squeezed (unless you did some modifications already). Basically after scrolling the <header> takes up a new css class, .et-fixed-header, which makes the fix easy.
Just add the below lines to your themes style.css file or add it in the Appearance > Divi Theme options > General > Custom CSS box:
.et-fixed-header #et-top-navigation .et-cart-info {
margin-top: 5px;
}
That should fix the problem.
Did this help you? Then please like and share this post with others, it might help them too.
I’m trying to get rid of the icon altogether. I wanted the icon in the menu, but the WooCommerce plug in forces the icon into the header. I installed another plug in called WP Menu Cart that does exactly that – puts a shopping cart icon in the menu, and the icon/plug in is totally compatible with the WooCommerce plug in. Now I have two shopping cart icons: the one that WP Menu Cart gave me – which is in the proper location, and the second being the one that WooCommerce put into the header – which I don’t want.
Now, just to be difficult, the person who I’m building this site for may want the shopping cart icon in a separate container within the header called the top bar. That’s the very top of the header where you’ll see several social media icons sitting all nice and neat on the left side of the header. I added an additional menu to the top bar which I was able to get centered, but can’t quite figure out how to get the justification of the menu correct. I want the three words of the menu – Home, Cart, and Checkout to be on one line just as it’s typed here: Home Cart Checkout, rather than how it currently is:
Home
Cart
Checkout
And I want it aligned to the same row that the social media icons are aligned on (which should get rid of the extra space in the top bar, making it one nice, clean bar). That’s a whole other problem altogether, but it’s relevant to the shopping cart icon problem. The WP Menu Cart plug in allows me to assign the icon that comes with it to any menu of my choosing. I can easily put the icon in the menu that’s in the top bar, but I run into another justification issue. The icon is waaaaay over to either the hard left or hard right of the screen (my choice based on a menu feature within the plug in), but it’s not justified to the left or right of the content like the social media icons are.
So what I guess I’m asking is one: how do I get rid of the WooCommerce shopping cart icon, and two: how do I control the justification of the added menu to the top bar, and control the shopping cart icon from the WP Menu Cart’s justification within that added menu?
Hello Jay,
What is the website where you are doing this? Are you using the Divi theme from Elegant Themes for your site?
Hi , I want to show shopping cart icon in menu in divi and in mobile view also please help me.
Well, that fix doesn’t work for me at all, either way: css field or editing style.css. Any other ideas?
Hey Shaun,
It’s not working on your site because you are not using a fixed header.
This adding this to your style.css instead:
#et-top-navigation .et-cart-info {
margin-top: 10px;
}
Let me know if that helps.
Cheers
We have WordPress network and we use Woocommerce to show our products. Shopping cart icon is visible in our both sites, and we don’t want it there. We have tried previous instructions, but no help.
Hi Timo,
I’m sorry about the delay, your message flew below the radar.
In case you still need help, can you share a link to the websites you mentioned? I’ll if I can help.
Cheers,
Andras
Any update on this one?
Hi Andrew,
What update are you exactly looking for?
Hi, any way to move the position of the cart icon? If I choose the “centered inline logo” header style, the cart icon actually appears on the left of my logo… lol
I’m sure there is a way. 🙂 Can you share a link to the site and where you want to have the shopping cart? I might be able to help.
Hi Andras, thank you for the reply. my site is shopforvr.com…
I initially wanted a top bar menu but realised that once i created a top bar menu, the cart went up to top bar instead of remaining in the primary menu… (i prefer it remaining in the primary menu)
And if i choose the centered inline logo, it went to the left…
Andras:
Did you ever figure out the answer to Jay’s question from last July? How can I remove the shopping cart icon altogether? My site http://whatsnewmd.com/shop/, is just a catalog for now.
Hi Steve,
If you add this to you style.css file, the shopping cart icon in your top menu will become invisible.
#et-top-navigation .et-cart-info {display: none;
}
Does this help?
Thank you for that! That does help me 🙂
You’re welcome! 🙂
Hi I’m saw the comments above and my problem is similar. I’m using the Divi theme and I just want to move the shopping cart to the far right. When I do this in Appearance, customize, it moves my logo and I want to keep my logo centered. I just want to move the shopping cart image to the far right. Can someone help me please. my site: thesupersprockets.com
Hey Cheryl,
Thanks for reaching out! If you want to put it to the right, then add this to your theme’s style.css file:
#et-top-navigation .et-cart-info { float: right; }Let me know if this helps!
We have the problem that on mobiles you can’t see the cart icon so there’s no way for customers to click to view the basket or checkout once they have paid. Any ideas?
Hi Claire,
Can you share a link to your webpage? Then I can take a look at it and check.
By the way, why do they need to look at their (empty) basket after they paid? 🙂
I think what Claire meant was when the header format is set to centered, the cart icon is hidden when viewed on mobile devices. So if the customer will not be able to find the cart if they are shopping for more than 1 items. Hope there is a fix for this because I believe many are facing the same issue. Thank you.
Hey Ken,
Thanks for your input. Will try to look into this, but cannot promise any timing at the moment.
Cheers,
Andras
having the same issue with mobile only where the cart isn’t visible.
Hey I want to show number of items in cart icon too in divi how can I do that?
Hey Hassan,
Unfortunately I don’t yet know how to do that. You might want to check the Elegant Theme forums or other Divi resource sites.
Happy holidays!
hi team,
my problem is that my cart didn’t respond ,,when i click view my cart icon it loading in home page only ,, how to fix that ,,or is there any custom code to solve this issue
Hi,
I am having the same issue with mobile only where the cart isn’t visible.
News ?
Best Regard
This fixed the position for me:
#et-top-navigation .et-cart-info {
margin: 0px 0 20px 22px;
}
Szia Péter!
Köszi! Thanks!
András
Hi,
I’m trying to change the icon for the woocommerce cart in my header but can’t seem to get it right. I want top change to a custom .png file in my media library. Anyone got any ideas?
Thanks,
Andras, any idea how to make the cart icon at the top larger? Thank you so much for your help and input here.
Hello Deeva,
To make only the cart icon bigger, copy this css snippet into your theme’s style.css file or in the Custom CSS box at the bottom of the Divi > Theme Options > General page.
.et-cart-info span::before {
font-size: 1.5em;
}
And adjust the font size as needed, it can be in px, %, em, or whatever you like. 🙂 I would reco “em” or “%” so it scales properly on mobile as well.
Hope this helps, let me know.
Cheers,
Andras
Looks like the issue with the invisible cart info on mobile has yet to be resolved… I have the same issue with 100% brand new and fresh installations, all up-to-date.
i want to display woocommerce add to cart button for all the products in home and shop page in divi theme.Can someone please help me with this
Hi, nothing works for me I put the css code and the cart stil doesn’t show the count. I would like it to show the count and the price of all items in it. Any ideas?
Thanks
I still have the problem with the cart not displaying the number of items neither prices.
I just installed DIVI theme with woocommerce…
I tried all the CSS codes I found on forums and none is working…
Any ideas?
Hi Julita,
I haven’t tried adding the numbers yet. If you can share some resources you used then I can check.
I fixed the issue of the shopping cart icon on mobile devices. On the site I was working on, the shopping cart icon was on the far right on desktop screens, but on mobile it was not visible.
Using the Divi theme.
I installed Divi Booster. Third-party plugin.
In the settings under HEADER > TOP HEADER > check the box ON for ” Show secondary nav bar social icons on mobiles”.
Fixed.
Hi Tim, thanks for sharing this with us. This is great!
Woocommerce Slide Out Cart allow you to make add to cart on open popup on side bar it make much attractive part of woocommerce to setup
Woocommerce Floating Cart is good plugin for woocommerce floating cart in free plugin on wordpress.org
Hi, we are having an issue with the shopping cart appearing twice in our nav bar. Anyone kniws why this happens and what could be done to remove one of them?
hi guys
Does anyone know how i change or add a class go my existing cart icon? i am using divi and want to add a class so that clicking my cart icon sends to xootix cart.
Thanks in advance