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