How to add a custom shopping cart icon to divi with a product counter
What you will need for this divi shopping cart tutorial
- Hosting
- Divi Theme
- A Divi Child Theme -> https://elegantmarketplace.com/child-theme-maker
- Woocommerce Plugin
- I also highly recommend a text editor (I use sublime text) as the syntax highlighting will help you ensure that the code is formatted correctly.
- Make sure you have the Divi theme setup
- Make sure that you are using a Divi Child Theme
- Make sure you have installed and activated the Woocommerce plugin
- Make sure that you have made a backup of your website
Access to FTP in case you need to edit any files manually
A disclaimer before you start this tutorial
This is not a massively complex tutorial and is mostly a copy and paste exercise, but I just wanted to make you aware that it requires a basic knowledge of PHP (link to W3c Schools) and CSS, in order to make sure that your website is not broken. If you don’t understand the basics of PHP and how to fix basic syntax errors in the functions.php file, then you’re probably best not trying this tutorial. This also requires the installation of the Woocommerce plugin, so I’m assuming that you’re already familiar with this, before you start.
And as always MAKE A BACKUP of your website before you start. I just don’t want anyone following this tutorial to lose their website.
Stage One – find a shopping cart icon
I used noun project to find a custom shopping cart icon which was more fitting to my clients brand. I used this one here https://www.katieandmay.co.uk/wp-content/uploads/2020/11/Katie_and_may_shopping_basket.png and cropped it tight, to make positioning easier.
Stage Two – Adding PHP for the Divi custom shopping cart with custom product counter
We are now going to add the custom block below to the functions.php file.
Before we add this we need to take precautions in case we get a syntax error which could give us the wordpress whitescreen of death.
First of all make a copy of your functions.php file as a backup, preferably saved in a text editor. Then save a copy to edit. In your copy to edit add the code at the bottom inside the PHP end tag which looks like ?> . If you have syntax highlighting in your text editor it should be obvious if there are any errors in the codeblock before you move to the live site. If you update the functions.php file and save, your website should now still be working :-D.
//CUSTOM BASKET
add_shortcode (‘woo_cart_but’, ‘woo_cart_but’ );
/**
* Create Shortcode for WooCommerce Cart Menu Item
*/
function woo_cart_but() {
ob_start();
$cart_count = WC()->cart->cart_contents_count; // Set variable for cart item count
$cart_url = wc_get_cart_url(); // Set Cart URL
?>
<span class=”shopping-cart-li”><a class=”menu-item cart-contents” href=”<?php echo $cart_url; ?>” title=”My Basket”>
<?php
if ( $cart_count > 0 ) {
?>
<span class=”cart-contents-count”><?php echo $cart_count; ?></span>
<?php
}
?>
</a></span>
<?php
return ob_get_clean();
}
add_filter( ‘wp_nav_menu_top-menu_items’, ‘woo_cart_but_icon’, 10, 2 ); // Change menu to suit – example uses ‘top-menu’
/**
* Add WooCommerce Cart Menu Item Shortcode to particular menu
*/
function woo_cart_but_icon ( $items, $args ) {
$items .= ‘[woo_cart_but]’; // Adding the created Icon via the shortcode already created
return $items;
}
Stage Three – Adding the shortcode to Divi and preparing the Menus
Desktop Menu
Before you add the shortcode consider the structure of the menu you’re choosing and where you would like the shortcode to display across devices.
For example you can have the basket along with other secondary menu items on a top bar separate from the main navigation menu, as an aside. Or you might want to add it to the end of a menu with a left aligned logo?
For this example we will work with adding the custom shopping cart icon at the end of a right aligned desktop navigation with the logo aligned to the left main Navigation. I’ve chosen this example as it requires a plugin and is probably the more complicated variation due to having to utilise a shortcode plugin for the menu. You can find the link to the plugin here
Once the shortcode menu plugin is intalled, you can do the following steps to setup the desktop menu
- Go to Appearence Menus
- On your primary menu add a shortcode menu item
- Include the shortcode from our PHP snippet [woo_cart_but] and name it basket in the title section
- Save the menu
Mobile Menu
Now it’s time to configure the mobile menu.
- Create a new menu called mobile Menu
- Add the navigation items that you would like to display on mobile
- Make sure that you don’t add shortcode to this menu as we will add the cart icon with the divi header builder
Stage Four – Configuring the menu in the Divi builder and adding CSS for the Divi custom shopping cart with custom product counter
As mentioned above there are endless layouts that you can use for your shopping basket across all devices, but for this tutorial, I will be focusing on the standard right aligned menu with which we will need to use a plugin to insert our shortcode into the menu.
Desktop Menu
The next stage is to go into the Divi Builder and edit the main header.
Toggle off the default shopping cart in the menu settings
Go to advanced > CSS
Add the below CSS snippet into the CSS field, and you should see the icon appear.
/*SHOPPING CART ICON*/
.shopping-cart-li {
position:relative;
top:10px;
height:10px;
}
.shopping-cart-li a {
background: red;
}
.cart-contents {
position: relative;
}
.cart-contents:before {
background: url(‘https://add-your-image-path-here.png’) !important;
content: ”;
display: inline-block;
height: 35px !important;
width: 30px !important;
vertical-align: -10px;
background-size: 30px 30px!important;
background-repeat: no-repeat!important;
margin-top: 10px;
}
.cart-contents:hover {
text-decoration: none;
}
.cart-contents-count {
position: absolute;
top: 25px;
right: 0px;
transform: translateY(-105%) translateX(25%);
font-family: sofia-pro, sans-serif;
font-weight: normal;
font-size: 12px;
line-height: 22px;
height: 22px;
width: 22px;
vertical-align: middle;
text-align: center;
color: #fff;
background:black;
font-weight:bold;
border-radius: 50%;
padding: 0px;
}
Navigate to Divi Header Builder
Duplicate the header
Disable the top header on mobile and tablet
Section Settings >Advanced > Visibility > Disable on “Phone” and “Tablet”
In the Duplicate header
Section Settings >Advanced > Visibility > Disable on “Desktop”
Menu Settings > Content > “Mobile Menu”
Insert “Text Module” below the menu within the same section(mobile)
Within “Text settings” > Content > Text > add the shortcode [woo_cart_but]
Whilst you’re here can I ask a quick favour?
If you found this this post helped in any way , feel free to tap the like button on my accompanying youtube video. it’ll cost you nothing and really helps me get these tutorials out to more people like you.
I hope that this tutorial helps you create something awesome, subscribe or sign up to my newsletter to stay informed and have a great day!
How to create a floating call to action (CTA) bar on mobile using the WordPress Divi theme
Here’s a quick tutorial showing you how to make a floating call to action (CTA) bar on mobile using the Wordpress Divi theme.
Fixed CTA bars are commonly used on mobile viewports and can be used at the top or bottom of the viewport and use scroll or fade in animations in order to draw attention.
They can be effective tools for increasing user conversion on mobile devices where attention spans are shorter than your typical desktop user.

How to create cool custom buttons for the Divi wordpress theme
Are you bored by divi themes existing button modules? In this post I’m going to show you a quick and simple method on how to create custom divi buttons with incredible animated hover effects to engage your website visitors. Let’s ditch the boring default buttons and create something truly unique for your divi website … your website deserves it!

How to add custom Icons to Divi’s social media module
We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module

How to Add Custom Fonts to Divi
Adding custom fonts to websites can be a pain. Learn how easy it can be to install custom fonts to the Divi wordpress theme with my step by step tutorial.
Did you find this post valuable? If so, please consider sharing to help me, help more people
More Posts
How to create a floating call to action (CTA) bar on mobile using the WordPress Divi theme
Here’s a quick tutorial showing you how to make a floating call to action (CTA) bar on mobile using the Wordpress Divi theme.
Fixed CTA bars are commonly used on mobile viewports and can be used at the top or bottom of the viewport and use scroll or fade in animations in order to draw attention.
They can be effective tools for increasing user conversion on mobile devices where attention spans are shorter than your typical desktop user.
How to create cool custom buttons for the Divi wordpress theme
Are you bored by divi themes existing button modules? In this post I’m going to show you a quick and simple method on how to create custom divi buttons with incredible animated hover effects to engage your website visitors. Let’s ditch the boring default buttons and create something truly unique for your divi website … your website deserves it!
How to add custom Icons to Divi’s social media module
We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module
Hey, thanks for this tutorial it helped me alot. If anyone uses Ajax on cart quantity update, you can also make the cart icon counter update via ajax:
/*Update cart icon product counter number via Ajax*/
add_filter( ‘woocommerce_add_to_cart_fragments’, ‘iconic_cart_count_fragments’, 10, 1 );
function iconic_cart_count_fragments( $fragments ) {
$fragments[‘span.cart-contents-count’] = ” . WC()->cart->get_cart_contents_count() . ”;
return $fragments;
}
Thanks Erick!
Menu Cart For WooCommerce , this also good one and free plugin from wordpress.org
Thanks for the recommendation Dhruv