{"id":38840,"date":"2022-06-27T15:00:55","date_gmt":"2022-06-27T13:00:55","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=38840"},"modified":"2024-03-27T09:18:08","modified_gmt":"2024-03-27T08:18:08","slug":"how-to-remove-shopping-cart-icon-in-woocommerce","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-remove-shopping-cart-icon-in-woocommerce\/","title":{"rendered":"How to Remove the Shopping Cart Icon in WooCommerce"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]When it comes to eCommerce and WordPress, it\u2019s hard to imagine the two without the WooCommerce platform<\/a> popping into mind, too. The foremost WordPress plugin for powering online stores<\/a>, WooCommerce offers tons of various options for your website. From setting up accounting<\/a> to adding subscriptions to your shop<\/a>, whatever you can imagine doing with your online store, chances are WooCommerce will help you do it. With so many features added to your website, you\u2019re bound to want to find some superfluous, prompting you to look for solutions to, for example, remove the shopping cart icon in WooCommerce.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you\u2019re unhappy with the shopping cart icon that appears in your website\u2019s menu when you install WooCommerce, you\u2019re at the right place. We\u2019ll discuss the offending icon, how it got there, and what you can do to remove it. So without further ado, let\u2019s dive in!
\n[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-ecommerce-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Reasons to Remove the Cart Icon in WooCommerce<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \"Shoping <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The WooCommerce cart icon is a staple in the navigation menu of many stores.<\/strong> Thanks to it, shoppers have a quick and easy method of accessing their shopping cart, but also checking how many items they\u2019ve placed into the cart. Because this feature is so important for any shop, there are many shopping cart plugins<\/a> that enhance and elevate the functionality.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]However, many shop admins decide they don\u2019t want the icon following the visitors wherever there\u2019s a navigation menu on your website.<\/strong> Maybe having an icon in your website\u2019s menu doesn\u2019t fit its design. Maybe you want the cart to be represented by the word \u201ccart\u201d instead of an icon. Maybe the store section isn\u2019t the central part of your website, and you want it to be more discreet.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The fact of the matter is that you get to choose what goes into the menu on your website. Whether the icon doesn\u2019t fit the concept of your website\u2019s design, or you just want the store to take the backbench while, for example, your content takes the center stage \u2013 you should be able to easily remove the cart icon in WooCommerce. However, that might not always be the case.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You should know that removing the shopping cart icon in WordPress might be a non-issue for many people who use WordPress and WooCommerce but don\u2019t have a shopping cart icon added to their website\u2019s menu. This is the reason why there are plugins such as WooCommerce Menu Cart<\/a>, to allow people to add shopping cart icons in WordPress.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Remove the Cart Icon in WooCommerce<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \"No <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Whether or not you\u2019ll have a WooCommerce shopping cart icon appear in your website\u2019s menu will depend, to a large extent, on the theme you are using.<\/strong> Some of the most popular themes will simply add it, leaving you to disable it if you don\u2019t want to use it. Other themes won\u2019t add it, leaving you to scramble for one of those plugins you can use to enable the WooCommerce cart icon.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Remove the Icon Using Appearance Customization Options<\/h3>\n

[\/vc_column_text][vc_column_text]So, if you\u2019re using a WordPress theme that doesn\u2019t stand in the way of the WooCommerce icon, you can do several things to make the icon disappear. First, you can go to Appearance > Customize<\/em> and look for any option that refers to the menu cart, cart icon, or something along those lines<\/strong>. The exact naming of the option might depend on the theme you\u2019re using for your website.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In our Qi Theme<\/a>, for example, the cart icon is added as a widget to the heather widget area. If you want to remove it, you can navigate to Appearance > Customize > Widgets<\/em> and delete the Qode Icon SVG widget.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Header <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]With other themes, you might be looking for a different path altogether. Usually, Appearance > Customize > WooCommerce<\/em> is a good place to start the search. You should be looking for a field you can check or uncheck to control how the cart icon displays.<\/strong> You might be able to change the icon, disable it when the cart is empty, or only show it when your store is viewed on certain types of devices. If at this point you don\u2019t manage to find these options, navigating to the theme\u2019s documentation page would help.[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Alternative Ways to Remove the Shopping Cart Icon<\/h3>\n

[\/vc_column_text][vc_column_text]In case you don\u2019t have many options in the Appearance menu that could help you out, there are a couple of different things you can do. The first one would be to switch your WordPress theme to one that doesn\u2019t display the icon.<\/strong> It\u2019s possible, however, that it might be too drastic a measure.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In case you used a plugin to enable the shopping cart icon in the first place, you could probably solve the problem by uninstalling the plugin.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If neither of the two is a viable option, you\u2019re left with using custom CSS.<\/strong> If you ever had to use custom CSS to hide an element, for example, a mobile menu<\/a>, then you know the drill \u2013 you\u2019ll be using the Inspect Element tool<\/a>. Navigate to the website where the needless cart icon is visible. Right-click on it, and then choose the \u201cInspect\u201d option. The icon element\u2019s ID should be visible \u2013 copy it.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Next, navigate to your website\u2019s backend, and then to Appearance > Customize > Additional CSS<\/em>. There, you can stop the website from displaying the icon using the following piece of code:[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n

name-of-cart-element {display: none !important; }<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If it does the trick, you should see the difference right away in the live preview window.<\/strong> If it didn\u2019t work, you might double-check the cart element ID. In case you got it right, but it still did nothing, you have no other recourse than to contact your theme developer\u2019s support for help.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Let\u2019s Wrap It Up!<\/h2>\n
[\/vc_column_text][vc_column_text]WooCommerce is one of the most useful WordPress plugins and an irreplaceable asset for anyone who wants to create an online store using WordPress. Thanks to its great mix of core features and those that could be added later on, WooCommerce can easily be all you need to create and run a successful online store.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The shopping cart icon that\u2019s sometimes displayed in the menu of stores that run on WooCommerce might be a welcome addition for some \u2013 but a nuisance for others. Removing the shopping cart in WooCommerce doesn\u2019t have to be too hard, however \u2013 there are a couple of different ways you can do it, depending on what caused it and the theme you\u2019re using it. Either way, this is one problem with WordPress that doesn\u2019t have to bother you.
\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
There are many reasons to remove cart icon in WooCommerce, and a couple of ways you can do it. We’ll show you all of them!<\/p>\n","protected":false},"author":9295,"featured_media":38849,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[56,4,99],"class_list":["post-38840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-ecommerce","tag-tips","tag-woocommerce"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/38840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=38840"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/38840\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/38849"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=38840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=38840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=38840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}