How to Remove Cart from Storefront Theme Header

Table of Contents

By default, WooCommerce does not allow you to disable the WooCommerce Cart Icon from the header or navigation in the Storefront theme.

However, in this brief tutorial, I am going to show you how to do just that. You will discover how it is very easy and all you need to do is add a few lines of code.

In this post, I will share with you two ways to do it.

The first method involves the use of a PHP code snippet that will remove the cart icon.

Moreover, I will provide a CSS styling solution to hide the cart in the second solution.

Storefront Remove Cart from Header

If you are using Chrome or Firefox, they make it pretty easy to inspect and manipulate elements in the DOM. DOM stands for Document Object Model, it is a hierarchical representation of every element on the website in a tree-like form.

These browsers allow you to review the entire structure of a web page including all elements and their properties.

In our case, we want to select a specific element called the cart icon.

With all that said, let us look at how you can remove the cart icon from the header of the Storefront theme.

Steps to Disable the Cart Icon in the Storefront Theme Using PHP Code

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will disable the cart icon in the storefront theme.
Add the following code to the PHP file:

/**

 * Disable Cart Icon

  */

function remove_sf_actions() {

    remove_action( 'storefront_header', 'storefront_header_cart', 60 );

}

add_action( 'init', 'remove_sf_actions' );

This will be the outcome:

Steps to Disable the Cart Icon in the Storefront Theme Using CSS Code

In this step, we have to first identify the element that we need to hide.

Identify the Element you need to Change

Simply right-click on the area you want to change in a browser like Chrome or Firefox and click “Inspect Element” like this:

After clicking on that, this will bring up the console containing the various elements of the page on the left and the settings for those elements on the right. Now you need to find the element responsible for the Cart Icon.

Add your Desired CSS Styling in the Console

In my example, I have removed the cart icon by adding a new rule ‘display: none;’. However, it is important to note that this does not make any actual changes to your site.

It acts as just a temporary change that is visible in your browser.

It allows you to experiment to your heart’s content. Moreover, you can even decide to place an image as the background. Now that you are satisfied with your changes, it is time to make them permanent.

Extracting the New Rule

You need to extract the rule by right-clicking it (on Firefox) like this and selecting “Copy Rule”:

However, if you are using Chrome, you can just select the entire rule with your mouse and copy the text. Paste it into an editor and delete all the existing rules except for the new one you just added if there are any.

Adding the Rule

The remaining part is to copy/paste into the “Additional CSS” section of your Storefront theme customization interface. To do this:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Customize.
Navigate down to Additional CSS in the left sidebar that appears.
Add the CSS rule as shown below:

.site-header-cart .cart-contents {

display: none;

}

This will be the outcome:
Click on publish once you are satisfied with the changes.

Conclusion

In this post, I have shared two simple ways to remove the cart header. However, if you need a tech-savvy WordPress developer to help you out, please consider Hiring an Expert.

In the first method, I have completely removed the cart icon from the header. In the second guide, I have hidden the cart icon with a simple line of CSS code.

Here you will need to use the Element inspector so that you can add a new rule. The trick is just finding the right element and the right rule to change.

Editorial Staff

How to Remove Cart from Storefront Theme Header

Storefront Remove Cart from Header

Steps to Disable the Cart Icon in the Storefront Theme Using PHP Code

Steps to Disable the Cart Icon in the Storefront Theme Using CSS Code

Conclusion

Similar Articles

Related