add shopping cart to wordpress

How to display a WooCommerce Сart in the Header 🛒

Our readers are asking us how to display a WooCommerce cart in the header? The shopping cart will be shown in the WordPress menu if you configure it. We will tell you how to place a cart item WooCommerce, because WooCommerce add cart to header, and a counter on your website. Automatic updates occur with AJAX. The users will see how the cart is updating and will be able to find out what price they will have to pay. Update occurs after adding a new product.

woocommerce add cart to header

The code below performs several tasks. It shows the cart and its contents. WooCommerce must be active. There will be no mistakes in this case.

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

 

The code works equally well in different parts of the webpage. You can choose, where it will be shown. For example, it can be placed in the header.php. This location is placed below the navigation bar.

<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php _e('Skip to content', 'twentyseventeen'); ?></a>
    <header id="masthead" class="site-header" role="banner">
        <?php get_template_part('template-parts/header/header', 'image'); ?>
        <?php if (has_nav_menu('top')) : ?>
        <div class="navigation-top">
            <div class="wrap">
                <?php get_template_part('template-parts/navigation/navigation', 'top'); ?>
                <!--Custom cart start-->
                <?php global $woocommerce; ?>
                <a class="your-class-name" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"
                   title="<?php _e('Cart View', 'woothemes'); ?>">
                    <?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'),
                    $woocommerce->cart->cart_contents_count);?>  -
                    <?php echo $woocommerce->cart->get_cart_total(); ?>
                </a>
                <!--Custom cart end-->
            </div>
            <!-- .wrap -->
        </div><!-- .navigation-top -->
        <?php endif; ?>
    </header>
    <!-- #masthead -->
    <?php
    // If a regular post or page, and not the front page, show the featured image.
    if (has_post_thumbnail() && (is_single() || (is_page() && !twentyseventeen_is_frontpage()))) :
        echo '<div class="single-featured-image-header">';
        the_post_thumbnail('twentyseventeen-featured-image');
        echo '</div><!-- .single-featured-image-header -->';
    endif;
    ?>
    <div class="site-content-contain">
        <div id="content" class="site-content">

 

The webpage needs to be updated after the code will be added. The counter cart and the total amount will be shown in the header of your website. Try to add one or more items to your cart. You will see that the amount will change. The cart will look as you will want. And item added to cart is displayed.

Perhaps you will also be interested in our article on How to a Custom WordPress Widget.

What to do if the counter does not work

One outstanding problem remains. It is related with the code. Products are added, but the cart is not updated. AJAX should work. But nothing happens. You can look at the shopping cart before adding products and after using this feature.

The solution is shown below:

  1. Copy this code in the theme file functions.php:
add_filter('add_to_cart_custom_fragments', 'woocommerce_header_add_to_cart_custom_fragment');
function woocommerce_header_add_to_cart_custom_fragment( $cart_fragments ) {
                global $woocommerce;
                ob_start();
                ?>
                <a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View   cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
                <?php
                $cart_fragments['a.cart-contents'] = ob_get_clean();
                return $cart_fragments;
}

 

  1. The file must be saved.
  2. Try to add items to your cart again.

This function should work. All information must be shown.

add to cart woocommerce

Result

Above we have discussed how to set up a WooCommerce and how to add shopping cart to WordPress. The purchase amount is displayed correctly. You need to use a special code, if you want to get this feature. You may have seen a problem with the code. If this is true, write a comment. We look forward to your help.

1 Star2 Stars3 Stars4 Stars5 Stars (5.00 / 5, votes: 1)
Loading...

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>