How to Hide Storefront Mobile Cart Icon In WooCommerce

The Storefront theme is characterized by providing great control to the store owner regarding how products will appear and user access. This theme is free and offers you a plethora of customization options through child themes. Moreover, this theme is very flexible, and you can make any customization depending on your needs.

Table of Contents

This brief tutorial will show you how you can change the hide the mobile cart icon. I will use the “Customize” option under “Appearance” in the dashboard to hide this element. This section lets you change your theme easily in many ways that are allowed by the theme author. However, the trick is just finding out what CSS to use.

When visitors come to your store, they see a small menu cart icon located on the bottom of the mobile screen. You might want to hide this element and place it somewhere else.

However, it is worth mentioning that the shopping cart icon gives your customers a personalized shopping experience. This is because users can see the number of items they have purchased.

With that said, let me show you how you can hide the mobile cart icon in the Storefront theme.

Steps to Hide the Mobile Cart Icon in the Storefront Theme

Here are the simple steps that you need to follow:

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 that targets the mobile cart icon, and we can add a new rule.

Choose your Desired Size

Now that the hard work is done, the next step is to enter your CSS rule. You need to enter something like “display,” press tab, and type in “none.”

Now that you are satisfied with your changes, it is time to make it 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 select the entire rule with your mouse and copy the text. Paste it into an editor and add the new rule

.footer-cart-contents{

            display: none!important;

}

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:
If you are satisfied with the changes, click on Publish.

Conclusion

In this post, I have shared how to hide the mobile cart icon in four simple steps. The trick is to find the right element and the right rule to change. Once that is done, you can add the rule in the console, copy it, and add it in the Additional CSS section. If you are satisfied with the changes, click on Publish. Moreover, you can use the above procedure to modify the appearance of any element on your site.

Editorial Staff

How to Hide Storefront Mobile Cart Icon In WooCommerce

Steps to Hide the Mobile Cart Icon in the Storefront Theme

Conclusion

Similar Articles

Related