How To Remove Cart Icon in WooCommerce

Updated: October 11, 2021

Share:

Having a cart icon in your WooCommerce store will provide your customers with a unique shopping experience. It is of great significance to help consumers save time while navigating to your site and looking for a specific product. However, there are several cases that you want to remove from your store. And it is a piece of cake to do so.

So, if you do not want to use the cart icon anymore or want them to be invisible, follow us in this guide, and we will show you how to remove the cart icon in WooCommerce. Now, let’s get started!

Table of contents

When should we remove the cart icon in WooCommerce?

Before getting to know how you can accomplish this task, you should spend some moments understanding why you should do that. It is undeniable that some situations will require you to make this icon disappear. And as we mention below, there are two main causes that you should remove the cart icon in WooCommerce.

  • When your cart is empty: While the cart icon is effective to help your store drive conversions or assist customers in navigating easily within the page, it is pointless when it comes to an empty cart. In this case, you are highly recommended to remove the cart icon.

  • When it takes up space: When there is no product to show in your care, your cart icon will take up quite much space. It will serve no purpose. Hence, this also explains why you should remove it.

How to remove cart icon in WooCommerce

Now it is time to delve into which necessary steps you need to do to remove the WooCommerce cart icon successfully. Basically, there are three main steps, and they are simple to follow.

Step 1: Inspect the CSS class of cart icon

First and foremost, it is vital to inspect the CSS class of your cart icon. You are required to detect the class name of your CSS that used to be assigned. An efficient way to inspect this CSS is to use WP Fix It. Then you could detect the class name of your CSS effortlessly. This step is important as it could help you enable your cart icon to disappear.

When you register for use, you need to open your WooCommerce site. Next, you can navigate to the top position on your ride hand to the icon itself. You could see the cart icon then have a right-click to visit the section “Inspect(0)”.

Inspect the CSS class of cart icon

After you do it, you can find the exact CSS element as shown on the below screen.

Inspect the CSS class of cart icon

If you want to isolate your CSS class name, you are required to click on the “+” icon to find the name of your CSS class. And if you implement the activities in Google Chrome, then the steps will be the same. Here is the class name that you are looking for.

Inspect the CSS class of cart icon

Select “Copy” before proceeding to further steps.

Inspect the CSS class of cart icon

Step 2: Put the CSS into the custom function

In the above step, you have successfully found the CSS element of your cart icon. This step requires you to construct the custom function as well as apply this CSS name for triggering if you wish the cart icon to be visible or invisible.

In this situation, the CSS class should be exerted inside the following snippet where it indicates CLASS_NAME. Check out the below code snippet and place your CSS in the right location.

Moreover, as you know, the cart icon in WooCommerce can come with a class called header_cart. Hence, what you are supposed to do next is to add a CSS line to this class. By navigating to the section “Appearance”, you could explore the option of Custom CSS. In this section, you need to choose “Theme Options”. In the text area of your Custom CSS in the theme’s options, you have to add the below snippet.


.header_cart { display: none; }

After that, do not forget to choose “Save Changes” to save what you have made before reloading your site. Now, the icon would be gone. Check again to make sure you are successful or not. In case it still exists, let’s try to use the following snippet.


.header_cart { display: none !important; }

If you still see the icon there, it can be due to your browser that could have cached JS files or CSS from your site. Those files are known as static files. Therefore, it is necessary to make the cache empty manually in the settings of your browser. Then, you should reload one more time to observe your written custom CSS taking effect.

Sometimes, you cannot remove the WooCommerce cart icon in case of using a browser with smaller sizes. In such situations, there could be several CSS queries that overwrite the class properties. Let us take an example to help you understand easily. You can find such queries as below:


@media (max-width: 767px) {…}

In order to modify that query, you need to add the below lines in the field Custom CSS.


@media (max-width: 767px) {
		.header_cart { display: none; }
	

Step 3: Exert the custom function on your WooCommerce site

When you are done with the second step, you have everything needed to execute the custom functionality. Then you need to take your created custom function to place it inside the file functions.php of the active theme. After that, you could see the result. If your cart still has items, the cart icon will still be there. And if there is nothing in the shopping cart, this means that the cart icon has been completely removed from your site menu.

Conclusion

It seems that using custom CSS is a perfect way to help you remove the WooCommerce cart icon from your site menu. So, do not hesitate to get rid of this cart icon in case there is nothing to show in the shopping cart. With the above efficient code snippets, you only need to perform several simple steps without being good at coding. Hope you could find this piece of article helpful and follow us for more great ones.

Recommend for you
Image Description
SMS, Email Marketing Automation

Top rated Marketing automation for Shopify stores

Learn more
Image Description
SEO Suite

Auto-optimize website elements and structure in one-click.

Learn more
proofo
Boost Sales [Free]

Boost sales: Sales Pop, Trust badges, Countdown timer, more

Learn more
Image Description
Photo Reviews [Free]

Use photo reviews to boost sales

Learn more

Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up