Detailed Guide to Displaying Cart Item Totals in WooCommerce with Elementor

How can I display the total number of current items in my WooCommerce cart using the Elementor editor in Wordpress? We will be using the Elementor Icon List element, and this method will work for most other elements as well.

Here is the effect we are trying to achieve:

With this tutorial, you will learn how to display the total number of items in your cart and the quantity will be updated automatically when items are added or removed.

First, add the WooCommerce Shopping Cart Totals short code snippet.

To get started, the following code needs to be added to the new PHP code snippet. Either use the Code Snippets plugin, or add it directly to the child theme's functions.php Documentation.

To locate and edit the functions.php file, you can follow the steps below:

1. Login to WordPress DashboardThe
2. Navigate to "Appearance" > "Theme File Editor".The
   • In the left menu, click "Appearance" and then select "Theme File Editor".

3. Select SubtopicThe
   • Select your child theme from the "Select a theme to edit" drop-down menu in the upper right corner.

4. locate functions.php fileThe
   • In the list of files on the right, find and click on the functions.php Documentation.

exist functions.php Add the code at the end of the file and click "Updated documents" button to save the changes.

// Display the number of items in the cart
function display_cart_count() {
    $cart_count = WC()->cart->get_cart_contents_count();
    $cart_url = wc_get_cart_url(); ?
    ? >
    <a class="menu-item cart-contents" href="/en/</?php echo $cart_url; ?>" title="View your shopping cart">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
}

// 使用短代码
add_shortcode('cart_count', 'display_cart_count');

// Ajax 刷新购物车商品数量
function refresh_cart_count($fragments) {
    ob_start();
    $cart_count = WC()->cart->get_cart_contents_count();
    ?>
    <a class="menu-item cart-contents" href="/en/</?php echo wc_get_cart_url(); ?>" title="View your shopping cart">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
    $fragments['a.cart-contents'] = ob_get_clean();
    return $fragments;
}
add_filter('woocommerce_add_to_cart_fragments', 'refresh_cart_count');

Next, go to Elementor's title template.

Open the Elementor header template (or any other location) where you wish to display the total number of items in your WooCommerce cart and add an icon list element. Follow the steps below:

1. Navigate to template::
   • In the left menu, click on "Templates".
   • Then select "Theme Builder" (or "Theme Builder").

2. Select the template to edit::
   • On the Theme Builder page, you will see all the templates such as header, footer, single post, archive page, etc.
   • To edit the header template, find and click on the "Header" template (or "Header").

3. Edit Template::
   • Find the title template you want to edit and click the "Edit with Elementor" button (or "Edit with Elementor").
4. Adding an icon list element::
   • In the Elementor editor, locate the "Icon List" element (or "Icon List") in the left panel.
   • Drag the Icon List element to the location where you want to display the total number of items in your WooCommerce cart.

5. Configure the icon list::

In the icon list, select one of the icon items, click on the icon, and select the shopping cart icon.

In the text field for this item, enter the following:

[cart_item_count]

6. Saving and updating::
   • Once the configuration is complete, click on the bottom of the page "update" button to save the changes.

styling

Let's make it look a little nicer, otherwise it'll look like this:

Adding custom CSS::

• Select the icon list element.
• In the left panel, click on "high level"Tab.
• Find and click on the "Customize CSS" section.
• Add the following CSS code to the custom CSS input box:

.elementor-icon-list-item .cart-contents {
    position: relative;
    display: inline-block;
}
.elementor-icon-list-item .cart-contents-count {
    position: absolute; top: -10px; }
    top: -10px; right: -10px;
    right: -10px; }
    background: red; color: white; cart-contents-count { position: absolute; top: -10px; right: -10px; background: red; color: white; cart-contents-count
    color: white;
    background: red; color: white; border-radius: 50%; padding: 2px 6px;
    padding: 2px 6px; font-size: 12px; font-size: 6px
    font-size: 12px; }
}

You will see this section twice in CSS:

:nth-child(3)

Adjust both to match your own icons.

For example, if your shopping cart icon is the first in the list of icons, change to:nth-child(1)rather than:nth-child(3)The

The rest of the CSS, adjusted as needed to position and style the count.

Summary.

By adding custom PHP code snippets and integrating them into the child theme's functions.php file to create a short code to display the number of cart items. It also demonstrates how to add an icon list element to the Elementor header template and use that shortcode to display the total number of cart items on the page. Finally, use the Elementor icon to see the number of items in your WooCommerce cart in real-time! A better shopping experience for users.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off