We have had a few requests on how to move the WooCommerce cart icon from the secondary menu to the primary menu – so here it is 😀
By default Divi will add the cart icon to the primary menu, if you have one of the elements in the secondary menu, it will move the icon there. This might work for some sites, but if like me you want it in the primary menu it can be quite challenging.
This tutorial will show you how to move this, you will need to have a child theme and the ability to edit the header.php file either using FTP or your Cpanel.
Step 1: Creating the child theme
You will need to edit the header.php file of the Divi theme. To do this we need to create a child theme so that when Divi updates, it does not revert back. We have created a tutorial on how to create a child theme – or you can scroll to the bottom and download either our dynamic or normal child theme.
Once you have installed the child theme, the next thing to do is to is to copy the header.php file from the Divi theme to your child theme. You can do this in many ways. If you are using Cpanel you can copy files using the file manager, if you are using FTP you can download the header.php file from the Divi theme location and then upload it to your child theme. The image here is what you will want your child theme to look like after this
Step 2: Editing the header.php file
The next step is a bit more tricky, but don’t worry as nothing serious can happen. If you are working on a development site and you mess up this file, simply delete it and try again. This is the beauty of working with a child theme as if you make mistakes, removing the file will revert back.
Open up the header.php file in your code editor (we love atom for this) and search for the code below
[php]et_show_cart_total[/php]
You will see this 3 times in the file. Divi 3.19.1 is the latest release when writing this tutorial.
The first one (on line 105) is responsible for showing it in the secondary menu
The second one (on line 145) is responsible for showing it in the slide in menu
The third one (on line 284) is responsible for showing it in the primary menu
So what we need to do is to remove the one from the secondary menu and make it show on the primary menu.
To do this comment out the code on line 105 (you will see it is enclosed in the ID et-secondary-menu). To comment out the code either delete it or add two // before like we have done on per figure 1
The next step slightly harder. Divi uses an if statement to check if the secondary menu is used. If it is – it hides the one on the primary menu. So to get around this, we remove the if statement as per figure 2 & 3. Figure 2 is what it was before the change and figure 3 is what it needs to be.
Figure 1
Figure 2
Figure 3
Final thoughts
And that’s it! The menu icon will now be moved to the new location.
We have also created a blank child theme with this edit on for you so you can download it with the header.php file changes below. I recommend trying it yourself as it is great to get your hands dirty and mess around with code, but if not here is the child theme.
Any questions please let us know.
Hi there! thanks so much for the hard work. I have tried your solution but it is not working on our site. I see the last post was December 21, could you please let me know if anything has changed since then that’s stopping this from working? Thank you in advance
I have been looking for some time now and I would like to know the best way to simply have my Cart icon link directly to checkout and not to cart. Anybody can help?
Hello,
The cart icon on my divi is positioned to the left, how do I please change the position to right?
Haven’t looked at this to be honest. Have you contacted ET about this?
We would love to have a solution to move the Cart to the right of the Search icon as it is more intuitive to Search first (on the left) and then Buy (on the right). Who is ET?
We will look to do this – but I am sure you can use the theme builder now to do this?
ET = Elegant Themes 😀
Another way without creating a new file is to overwrite the divi et_show_cart_total function in the divi theme functions.php with your modified function in your child theme’s functions.php (I added an additional css class, removed the word items and made sure that no_text is always false to show the count):
// Overwrite Divi cart icon display for primary menu to include cart count
if ( ! function_exists( ‘et_show_cart_total’ ) ) {
function et_show_cart_total( $args = array() ) {
if ( ! class_exists( ‘woocommerce’ ) || ! WC()->cart ) {
return;
}
$defaults = array(
‘no_text’ => false,
);
$args = wp_parse_args( $args, $defaults );
$items_number = WC()->cart->get_cart_contents_count();
$url = function_exists( ‘wc_get_cart_url’ ) ? wc_get_cart_url() : WC()->cart->get_cart_url();
//Modification
$class = ( $items_number > 0 ) ? ‘ not-empty’ : ‘ empty’;
$args[‘no_text’] = false;
//
printf(
‘
%2$s
‘,
esc_url( $url ),
( ! $args[‘no_text’]
? esc_html( sprintf(
_nx( ‘%1$s’, ‘%1$s’, $items_number, ‘WooCommerce items number’, ‘Divi’ ),
number_format_i18n( $items_number )
) )
: ”
),
$class
);
}
}
Thanks for this – It is 100% a great way to do it!
Is there a way of having the cart only show the icon and number but not the text “items”?
The extra space taken up by the word “items” causes layout issues on mobile.
Thank you, Bryan
You can do this using our plugin Divi BodyCommerce: https://diviengine.com/product/divi-bodycommerce/
Worked Perfectly. Thanks
Perfect, thanks for letting us know!
Worked for me, thanks.
Brilliant – thanks for the feedback!
Hi,
Thanks for this! One little problem though, I am using the child theme you added and the cart icon is showing on the further left of the menu after adding the child theme and activating it, I am using the “Centered Inline Menu” settings.
Any ideas?
Not sure, please send me a URL so I can see?
Hello, it doesn’t work, and yes i made all the steps, i have a child theme and yes i have the header.php, something is wrong with the code because it works fine in the shop page, but when i go to other pages it just goes back to the secondary menu. It will be nice if you found the problem. Also mention that for the new version of divi and woocommerce there is more lines in the header.
thanks
Yeah sorry we have not updated the tutorial for the new header.php file but it would be the same.
Not sure why it would not work on the other pages, are you using the theme builder on these?
Why not use the Theme Builder to create the header for all pages and then you can use the menu module and enable the cart icon where you want it?
Thanks, worked! Using Divi 3 builder.
Glad it helped you. Have a great week!
didn’t work for me either . Did all the steps and cart is still in the secondary menu
Sounds silly, but do you have the child theme active? Did you edit the header.php file in your child theme?
Hi Pete
It seems it doesn’t work anymore with Divi 4 Theme Builder
Cart Icon goes back to the secondary menu 🙁
Did you notice that?
It shouldn’t change unless you are using the theme builder to design your header. If you are using this, Divi ignore the header.php file so it wont work.
If you are using the default Divi header, it should be fine.
Thanks for tuhe tutorial. I´ve done it but it only shows the icon but no quantity of elements like when it is in secondary menu. Do you know why? Thanks in advantage.
Change the code to be: et_show_cart_total(); – this should show the totals
Hi,
Thanks for the solution but it didn’t work on my side. I’ve used the header.php from the provided child theme but no cart icon on main menu.
Any clue?
Thanks,
Thanks for the comment. Is the code for the cart added to your header.php file?
Hey,
When i do this, the mobile menu completely disappears. I think it has something to do with lines 289-291 but as soon as i remove the if statement around 284 it doesn’t inject the mobile menu in the html.
Any idea why?
Not sure – I just checked and it is working for me. Can you try download this child theme to check (https://diviengine.com/wp-content/uploads/2019/01/divi-child-theme-cart.zip)?
If you have issues after this try shooting an email to su*****@di********.com with your URL and I will take a look
Hi,
This seemed to be working prior to updating Divi. Are you able to let me know what the issue might be for my theme please?
So was it working and then you updated Divi and now it does not? Are you using a custom header?
Hi,
That is correct. I had this functioning well until recent upgrades. Using standard Divi Header.
Maybe re-do it by copying the header.php file of the new Divi – maybe there is something there making it not work (I have not had time to replicate this, sorry)