Website Building » WooCommerce » How Do I Hide the Cart Icon in WooCommerce?

How Do I Hide the Cart Icon in WooCommerce?

Last updated on January 23, 2023 @ 1:09 pm

If you’re using WooCommerce to sell products on your WordPress site, you may have noticed that the default installation comes with a “Cart” icon in the header. This can be handy for reminding customers that they have items in their cart, but it may not be something you want to display on your site.

There are a few ways to hide the Cart icon in WooCommerce. One is to simply remove it from the header area.

This can be done by going to Appearance > Menus and removing the “Cart” link from your menu. If you don’t want to remove it completely, you can also drag it down to the “Bottom Menu” area.

Another way to hide the Cart icon is by using CSS. You can add the following code to your child theme’s style.css file:

.site-header .cart-contents {
    display: none;
}

This will completely hide the Cart icon from your site.

PRO TIP: If you are using WooCommerce to sell products on your website, you may want to hide the cart icon from the header area of your site. This can be done by going to the WooCommerce settings page and selecting the “Hide Cart Icon” option. However, hidden cart icons can still be accessed by anyone who knows the URL of the page. Therefore, it is important to make sure that you do not give out this URL to anyone who should not have access to your shopping cart.

If you want to take things a step further, you can also add some code to your .php files that will prevent the Cart icon from being loaded at all. This is useful if you’re trying to speed up your site or reduce server load.

add_filter( 'woocommerce_is_header_cart_icon_visible', '__return_false' );

This code should be added to your child theme’s functions.php file.

Conclusion:

There are a few different ways that you can hide the Cart icon in WooCommerce. You can remove it from your header menu, or use CSS or PHP code to prevent it from being loaded at all. Choose the method that works best for you and your site.</p

Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.