WooCommerce shows the cart total on the cart page, but headers, menus and page-builder layouts often need it somewhere else: “Cart: $30.00” next to the logo, or the number of items on a custom icon. This WordPress snippet gives you a shortcode for each, and both update without a page reload when a customer adds a product.
[dpc_cart_total]prints the cart total, for example$30.00[dpc_cart_total show="count"]prints the number of items, for example3
Want a complete cart icon with a badge instead? Use the WooCommerce cart icon with item count snippet.
The snippet
<?php
/**
* [dpc_cart_total] - cart total, e.g. "$30.00"
* [dpc_cart_total show="count"] - number of items in the cart, e.g. "3"
* Both update without a page reload when a product is added to the cart.
*/
add_shortcode( 'dpc_cart_total', 'dpc_cart_total_shortcode' );
function dpc_cart_total_shortcode( $atts ): string {
if ( ! function_exists( 'WC' ) ) {
return '';
}
$atts = shortcode_atts( array( 'show' => 'total' ), $atts, 'dpc_cart_total' );
// WooCommerce 7.8+ no longer loads the script that applies cart fragments on every page.
wp_enqueue_script( 'wc-cart-fragments' );
return 'count' === $atts['show'] ? dpc_cart_count_html() : dpc_cart_total_html();
}
function dpc_cart_total_html(): string {
// WC()->cart is null in wp-admin, the block editor preview and REST requests.
$total = WC()->cart ? WC()->cart->get_cart_total() : wc_price( 0 );
return '<span class="dpc-cart-total">' . wp_kses_post( $total ) . '</span>';
}
function dpc_cart_count_html(): string {
$count = WC()->cart ? (int) WC()->cart->get_cart_contents_count() : 0;
return '<span class="dpc-cart-count">' . esc_html( number_format_i18n( $count ) ) . '</span>';
}
// WooCommerce sends these fresh copies with every cart update and swaps them into the page.
add_filter( 'woocommerce_add_to_cart_fragments', 'dpc_cart_total_fragments' );
function dpc_cart_total_fragments( $fragments ) {
$fragments['span.dpc-cart-total'] = dpc_cart_total_html();
$fragments['span.dpc-cart-count'] = dpc_cart_count_html();
return $fragments;
}
Add it with Scripts Organizer
In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Everywhere, tick PHP under Script location, paste the code into the PHP editor and publish. Leave Action/Hook empty. Then put the shortcodes in a Shortcode block, a header template part or your page builder’s shortcode element.
This needs the Everywhere trigger, not a block with the Shortcode script location. WooCommerce builds the updated values in an AJAX request when a product is added, and the woocommerce_add_to_cart_fragments filter has to be registered in that request too, which only happens when the code runs on every request. A normal add_shortcode() also lets one shortcode do both jobs through the show attribute. The same code works unchanged in a small plugin or an mu-plugin.
How it works
WC()->cart->get_cart_total()returns the formatted total with your currency settings, andget_cart_contents_count()the number of items. The total is HTML from WooCommerce, so it is printed throughwp_kses_post(); the count is escaped.- In wp-admin, the block editor preview and REST requests WooCommerce has no cart and
WC()->cartisnull. The older version called methods on it there, which is a fatal error; the snippet now shows a zero total and a 0 count. woocommerce_add_to_cart_fragmentsreturns fresh copies of both<span>elements after every add to cart. WooCommerce’s cart fragments script findsspan.dpc-cart-totalandspan.dpc-cart-countin the page and replaces them.- Since WooCommerce 7.8 that script (
wc-cart-fragments) is no longer loaded on every page, so the shortcode enqueues it where a total or count is shown. - The older version needed a raw PHP template line and a separate filter without its
<?phptag. Now one block does both.
Customise it
- Grand total with shipping and fees: use
WC()->cart->get_total()instead ofget_cart_total()indpc_cart_total_html(). - Add a label: put the text around the shortcode in your content, for example
Cart: [dpc_cart_total]. - Hide the count when the cart is empty: return an empty
<span class="dpc-cart-count"></span>for0and style.dpc-cart-count:empty{display:none}. Keep the span so the fragment can replace it.
Gotchas
- Classes changed from
webbox-cart-counttodpc-cart-totalanddpc-cart-count, and the element is now a<span>. Update your custom CSS. - On fully cached pages the HTML can show an old total. The fragments script corrects it right after the page loads, so the number may change once.
- The cart and checkout blocks, and other add-to-cart buttons that use the Store API, may not trigger the fragment refresh. The values are then correct on the next page load.
In the Scripts Organizer library Import it with one click from Scripts Organizer.