WooCommerce Tip 1: Add a shopping cart to the menu

What we’re doing

 

A shopping cart that updates as you add items is a common sight on eCommerce websites. I believe that it is a necessity for good user experience. I like to be able to see my cart with the amount of items and cart total, so I can keep track when I am shopping online. Many WooCommerce-ready themes already have this function included. If yours does not, this tutorial is for you.

 

Plugin or Code?

 

WooCommerce Menu Cart is an absolutely brilliant plugin that makes this very simple to do BUT: at the time of writing this it has not been updated in over two years, which is a very long time, so I won’t be using it.

 

Besides, using PHP to create a menu cart requires that you add two quick pieces of code to your theme files. I am going to be explaining this in such a basic way that any user may have the confidence to do this themselves. Using the code also has the added benefit of not slowing down your site with another bulky plugin.

 

Let’s get started

 

For demonstration purposes, I am going to be using the default Twenty Sixteen theme. It should be a similar process for most themes. To start, I set up a mock shop with three menu items. This cart will obviously not appear if WooCommerce is not active. So, I am assuming that you already have your shop set up(else, why would you need this tutorial?)

 

The screenshot below shows our shop with the Twenty Sixteen theme activated. I am aiming to add the shopping cart below the menu items, since there is a nice space for it. You may require it to be inside your menu, but for that you will need some further CSS styling that is beyond the scope of this tut.
woo1-1

Step 1: Add code to header.php

 

If you have a single site install, go to Appearance->Editor. If you have a multisite, go to My Sites->Themes and amongst your themes, look for your active theme and click on the Edit link. Either way, your screen will look similar to mine in the screenshot below:
woo1-2
Click on the header.php file. In most cases its name is Theme Header or something similar. If you’re not sure, look for the file that says (header.php) underneath the name.

 

Go down and look for the line </nav><!-- .main-navigation --> (see the screenshot below). You are going to exactly copy and paste the code I provide ABOVE this line.
woo1-4
Below is the code you need to copy paste above </nav><!-- .main-navigation -->

 

<?php global $woocommerce; ?>

    <a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'twentysixteen'); ?>">
    <?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'twentysixteen'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?>

</a>

 

It can be used as-is if you are using the Twenty Sixteen theme. However, if your theme name is different, you need to replace "twentysixteen" with your theme’s slug/text domain. (You can find this by going to your style.css and looking for the line Text Domain: your theme's text domain will be here in the block at the top.). Save the file. When you go back to your site, you should now have the cart in the header that looks something like this:
woo1-3

Step 2: Add code to functions.php

 

The second bit of code will go in your functions.php file. This code is needed to make sure the cart updates every time an item is added. In your Editor look for the file functions.php. I like to instruct users to add functions just before the stylesheets and scripts are enqueued. That way there is no risk of you creating the dreaded WHITE SCREEN OF DEATH by adding spaces to the bottom of functions.php. So, go down and look for this code:

/**
 * Enqueues scripts and styles.
 *
 * @since Twenty Sixteen 1.0
 */

 

See the screenshot below:
woo1-5
You are going to copy and paste the following code ABOVE these lines as indicated in the screenshot (remember to change "twentysixteen" again if you’re using a different theme:

add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');

function woocommerce_header_add_to_cart_fragment( $fragments ) {

                global $woocommerce; 

                ob_start(); 

                ?>

                <a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'twentysixteen'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'twentysixteen'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>

                <?php 

                $fragments['a.cart-contents'] = ob_get_clean();

                return $fragments; 

}

 

Now, when you go back to your shop, you should be able to add items to your cart and it will update with the number of items and the price. That is all there is to it. Simple, right?
woo1-6
Have fun with WordPress!

Leave a Reply

Your email address will not be published. Required fields are marked *