How to Hide Cart Subtotal In WooCommerce or Remove Subtotal

If you want to hide the subtotal row in the WooCommerce cart page, you can either use CSS or you can use a filter hook that unsets the cart_subtotal value. This is a straightforward process that you can implement in your WordPress theme.

Table of Contents

Remove Cart Subtotal in WooCommerce

You can add a code snippet in the functions.php to use the filter hook to remove subtotal. Alternatively, you can use the CSS display property to target the div element that has this row and you set it to hidden.

This CSS code can be added to the child theme or the WooCommerce theme customizer Additional CSS text field as I will illustrate in this tutorial.

Let us cut the chase and get to the details and the code to hide subtotal row in cart page in WooCommerce.

The subtotal is displayed before other charges are added like the shipping so that we have a total that is a combination of all the costs of the product as shown in the image below:

For products that do not have these additional costs or do not require shipping costs, you can opt to get rid of the subtotal to make the page clean or improve the general aesthetics of the WooCommerce cart page.

In this case, you need to hide the cart subtotals using either CSS or a filter hook.

WooCommerce Hide Subtotal Using CSS

To use CSS to hide the subtotal row, you should use the inspect element tool on your browser to get the div element that displays this text as shown on the image below:

When you select this div to apply the display property to none as shown below to hide subtotal row in the cart page.

The following is the code that you should add to the theme CSS or your Customizer Additional CSS area:

.cart-subtotal {

      display: none;

}

You can also use the visibility property as in the following code:

.cart-subtotal {

      visibility: hidden;

}

Add this code to the stylesheet of your child theme or you add the customizer and save the changes to hide the subtotal in the cart.

This hiding does not completely remove cart subtotal it just hides it to remove it completely you need to add a filter hook.

WooCommerce Remove Subtotal with Filter Hook

To remove subtotal from cart and order page using a filter, you should add this code to the functions.php

If you want to remove the subtotal from the cart page if the code snippet above is not effective, you should consider hooking on a different point 'woocommerce_cart_item_subtotal', the following is the code that should be added to the functions.php:

add_filter('woocommerce_cart_item_subtotal', ' remove_woocommerce_get_order_item_totals, 10, 2);

function remove_woocommerce_get_order_item_totals ( $total ) { 

       unset($totals['cart_subtotal']);

     return $totals;
}

Conclusion

In this post, we have looked at the two options you can use to remove subtotal in the WooCommerce cart page. If you simply want to hide subtotal, you just need to use the CSS since its less complicated and easy to add on any WordPress theme. This is also effective on the default WooCommerce theme –Storefront WooCommerce theme.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Hide Cart Subtotal In WooCommerce or Remove Subtotal Row

Remove Cart Subtotal in WooCommerce

WooCommerce Hide Subtotal Using CSS

WooCommerce Remove Subtotal with Filter Hook

Conclusion

Similar Articles

Related