Adding Woocommerce checkout/cart links to the nav bar

Are you using WooCommerce on your wordpress site? Want to add checkout, cart  or even price to your navigation? 

Here is a quick code snippet on how to get it done. Open your nav template file and paste it after your nav menu links.  If you are using roots wordpress theme it will be header-top-navbar.php and you can add it at the bottom of the file before the nav closing tag. If you are not using roots you can edit your header.php file and look for a place right after menu stopped printing usually you can paste this right before the </nav> closing tag

The code below will create a wordpress login/logout button, as well as cart link (with quantity and total price) + checkout button

woocommerce-cart

The picture above doesn’t show a checkout link, however the code below will create it as well. If you don’t need it just comment it out

<?php  
 //=== CHECK IF WOOCOMMERCE IS TURNED ON BY CHECKING FOR A WC FUNCTION ====
    if ( function_exists('woocommerce_product_add_to_cart_text') ):?>

        <div class="cart-links">
        <?php 
            global $woocommerce;
            $qty = $woocommerce->cart->get_cart_contents_count(); 
            $total = $woocommerce->cart->get_cart_total();
            $cart_url = $woocommerce->cart->get_cart_url();

            echo $loginout = wp_loginout($_SERVER['REQUEST_URI'], false ); // show wp dynamic login / logout link

            if ( sizeof( $woocommerce->cart->cart_contents) > 0 ): // only show cart if we have items in it ?>

               <a href="<?php echo $woocommerce->cart->get_checkout_url() ?>" title="<?php _e( 'Checkout' ) ?>">
                   <?php _e( 'Checkout' ) ?>
                </a> |
               <a href="<?php echo $cart_url ?>" title="<?php _e( 'Cart' ) ?>">
                   <?php _e( 'Cart ( '. $qty .' ) -'. $total ) ?>
               </a>

            <?php endif ?>
        </div>

     <?php endif ?>

Hope this helps!

While we are on WooCommerce subject check out our WooCommerce optimization guide

Leave a Reply