WooCommerce shopping cart product quantity and content of the real-time update display method

In an e-commerce website, the shopping cart page is one of the core parts where customers can view order information. By default, theWooCommerce The shopping cart doesn't appear in the menu bar, and that may not be intuitive enough for most merchants. Therefore, optimizing and customizing the shopping cart functionality is an important tool to improve conversion rates.

Check if WooCommerce is active

Before implementing a dynamic update of the shopping cart, first make sure that the WooCommerce Whether WooCommerce has been activated correctly. If WooCommerce is not installed or enabled, calling the shopping cart function may report an error. The following code is used to detect if WooCommerce is available and displays the current item quantity and total amount on the shopping cart button:

<?php global $woocommerce; ?>
<a class="your-class-name" href="/en/</?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('Cart View', 'woothemes'); ?>">
cart-&gt;cart_contents_count, 'woothemes'),?
 $woocommerce-&gt;cart-&gt;cart_contents_count);? &gt; -
cart-&gt;get_cart_total(); ? &gt;
</a>

This code can be placed in any of the theme's template files and is recommended to be placed in an appropriate location, such as the navigation bar area, so that customers can view the cart contents at any time.

Add the shopping cart code to the header.php file

In order for the shopping cart information to appear in the navigation bar, you need to modify the header.php file that inserts the shopping cart button code into the menu structure, for example:

<header id="masthead" class="site-header" role="banner">
    
    <div class="navigation-top">
        <div class="wrap">
            <?php get_template_part('template-parts/navigation/navigation', 'top'); ?>
            <!-- 购物车开始 -->
            <?php global $woocommerce; ?>
            <a class="your-class-name" href="/en/</?php echo $woocommerce->cart->get_cart_url(); ?>"
               title="<?php _e('Cart View', 'woothemes'); ?>">
                cart-&gt;cart_contents_count, 'woothemes'),?
                $woocommerce-&gt;cart-&gt;cart_contents_count);? &gt; -
                cart-&gt;get_cart_total(); ? &gt;
            </a>
            <!-- 购物车结束 -->
        </div>
    </div>
    <?php endif; ?>
</header>

After saving the file, refresh the front page to see the WooCommerce The shopping cart information has been successfully added to the navigation bar.

Test shopping cart quantity and total amount display

After the code has been added, update the page and observe if the cart displays the quantity and amount correctly. If everything is correct, the shopping cart will display the following message.

Add products to cart

Try adding a few items on the front-end page and watch the cart update. By default, this cart information does not update automatically and only changes after refreshing the page.

tackle AJAX Shopping cart update issues

default (setting) WooCommerce The shopping cart does not update automatically and you need to manually refresh the page to see the changes. To fix this, add the following code to the functions.php file to allow the shopping cart to dynamically update as items are added:

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; function
    ob_start(); ?
    ? >
    <a class="cart-contents" href="/en/</?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View cart', 'woothemes'); ?>">
        cart-&gt;cart_contents_count, 'woothemes'), $woocommerce-&gt;cart-&gt;cart _contents_count);? &gt; - cart-&gt;get_cart_total(); ? &gt;
    </a>
    <?php
    $cart_fragments['a.cart-contents'] = ob_get_clean();
    return $cart_fragments;
}

After saving the file, test the shopping cart again, when adding items, the cart quantity and total amount will be updated automatically, no need to refresh the page manually.

summarize

This article describes the WooCommerce Basic shopping cart optimization methods, including displaying cart information in the navigation bar, dynamically updating cart contents, and using the AJAX Let the shopping cart change in real time. This approach does not require additional plugins and can be accomplished by adding code directly to the theme files. If you want to further optimize the shopping cart functionality, such as adding countdown offers, recommended products, etc., you can also combine with the JavaScript Perform more interaction design.