Painless Solution for WooCommerce Cart Icon with Item Count on the Divi Theme
Today I was trying to look for how to add an item count to the shopping cart on the Divi theme, I couldn't find exactly what I was looking for although I did manage to find a few examples on StackOverflow and other websites that work with woocommerce on other themes but on divi it did not work at all.
After searching the divi support forum and documentation I did manage to find a few articles that were exactly what I was looking for however the articles are for members only. Being a freelancer I may have to work with any themes or plugins my clients may have on their website as it was in this case.
So instead of contacting my client and going through email hell for my client and myself, I started taking a look into the header.php file in the Divi Theme - thankfully one of my first tasks when taking on the client was to create a child theme.
Searching for the Divi Item Count Solution
After looking for a minute I finally found what I was looking for and luckily it was a very simple change to display the item count on the shopping cart icon on the menu.
First, you'll need to copy the header.php file from the divi theme into your divi-child theme then on or around Line 285 you'll find an array with:
'no_text' => true,
You'll need to change the true to false
'no_text' => false,
Save the header.php file.
Making the change on the child theme is important so any future updates to the divi theme won't overwrite any changes previously made.
After this small change, you'll see the number of items next to the cart icon on the main navigation menu, you may have to style the icon and text a little bit, but for the most part its there.
Let me know if this worked out for you or you have another way around this in the comments below!
I tried this–it does show item count next to icon, but for some reason the correct count is only shown on woocommerce pages (cart, Checkout). When I switch to any other pages it shows '0 items' even when there are items in the cart. Any idea why this would happen?
Hi Jay,
I'm not too sure about what happened but from the sounds of it, it sounds like a conflict with something else. check your functions.php file and check the plugins. Changing the no_text to false works for me on all the pages for the site I was working on.
Sorry I couldn't have provided more help, good luck to you on finding the solution! If you do, please come back and share what the problem/solution was.
Cheers
Thank you very much, it was just what I was looking for. The only issue is that the font of the number does not match with the menu, would there be any way to change it?
Next to the cart it says "1 Item", is it possible to have only the number? Thank you very much!
Thanks very much Ricky that worked a treat.
Hi Ricky i just wanted to hear if i can change the text after the count number. So instead of saying items, it should say something else ?
Hi Emilie,
You can try the following:
add_filter('ngettext_with_context', 'dbc_change_woocommerce_item_text', 20, 6); function dbc_change_woocommerce_item_text($translation, $single, $plural, $number, $context, $domain ) { if ($domain == 'Divi') { if ($translation == '%1$s Item') { return '%1$s Article'; } if ($translation == '%1$s Items') { return '%1$s Articles'; } } return $translation; }via https://divibooster.com/changing-the-woocommerce-cart-item-count-text/
hope it helps, let me know if it works!