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.
• 1. Make sure you have the Divi theme setup
  2. Make sure that you are using a Divi Child Theme
  3. Make sure you have installed and activated the Woocommerce plugin
  4. 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

1. Go to Appearence Menus
2. On your primary menu add a shortcode menu item 
3. Include the shortcode from our PHP snippet [woo_cart_but] and name it basket in the title section
4. Save the menu

Mobile Menu

Now it’s time to configure the mobile menu.

1. Create a new menu called mobile Menu
2. Add the navigation items that you would like to display on mobile
3. 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!