Displaying Cart Total in Storefront Theme Header Cart
The Storefront theme on WooCommerce is a popular choice amongst eCommerce businesses due to its flexibility and robustness. However, one common issue that users come across is the display of the cart subtotal in the header cart. This subtotal doesn’t include applied coupons or taxes, which can sometimes lead to confusion for customers who expect to see their actual total costs.
This article will guide you through the process of overwriting the relevant function in the Storefront theme to display the actual cart total, including coupons, taxes, additional fees, etc… in the header cart.
The current MiniCart in the Storefront theme only shows the cart’s subtotal, which excludes any applied coupons or taxes. This can potentially mislead customers about the final total they would need to pay.
For example: If the customer will pay $52.92 which is the Cart Total.
The cart header will show only the Cart subtotal which is $72.
Overwriting the Storefront Function
The function we need to overwrite is storefront_cart_link(). This function is responsible for creating a link to the cart contents and displaying the cart subtotal. We will modify this function to display the cart total.
function storefront_cart_link() {
if ( ! storefront_woo_cart_available() ) {
return;
}
?>
<a class="cart-contents" href="<?php echo esc_url( wc_get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart', 'storefront' ); ?>">
<?php /* translators: %d: number of items in cart */ ?>
<?php wc_cart_totals_order_total_html(); ?> <span class="count"><?php echo wp_kses_data( sprintf( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count(), 'storefront' ), WC()->cart->get_cart_contents_count() ) ); ?></span>
</a>
<?php
}After adding the code snippet, The header cart will show the final cart total to pay.
This function should be added to your Storefront child theme’s functions.php file. This is a crucial step, as adding the function directly to the parent theme will result in the changes being lost when the theme is updated.
By following these steps, you can successfully display the actual cart total in the cart header or MiniCart of the Storefront theme, enhancing your website’s user experience and minimizing potential confusion for your customers.
