WooCommerce doesn’t provide an option to Disable the WooCommerce Cart Icon from the header or navigation. In this article, we will discover a very quick and easy workaround by adding a few lines of custom CSS. This technique will help you to hide/remove other elements from your website as well. FYI, you don’t really need to know how to code to do this. Let’s get started!

We’ll need to do 2 things here:
1. Inspect/find the cart icon via your browser’s inspector
2. Apply a custom CSS rule to hide the cart icon

If you are using one of our WordPress Podcast Themes, you can find additional settings through the “Appearance > Customize” screen.

How to Disable the WooCommerce Cart Icon in Your Code

Browsers make it pretty easy to inspect and manipulate elements in the DOM. What is the DOM? Well, it stands for Document Object Model, but in layman’s terms, it is a hierarchical representation of every element on the website in a tree-like form.

Browsers allow us to review the entire structure of a web page including all elements and their properties. But in this case, we want to select a specific element — the cart icon. Let’s see how we can do this in Safari and Google Chrome without searching for it manually in the Element Inspector.
In Safari, you should have the Developer tools enabled first.

The steps to disable the WooCommerce Cart Icon

1. Open your website, and once it is fully loaded, right-click anywhere on it, and select Inspect Element.
3. On the right side, you’ll see an icon that looks like a sniper scope, however iIf you hover it, it will say Start Element Inspection. If more convenient, you can also press Shift + Cmd + C. Once this icon is active, you will notice as soon as you move your mouse over some section or element on the website, the browser starts to highlight those elements.
4. With the Element Inspection active, find the WooCommerce cart icon in the header, and click on it. Once you do this, the browser will automatically find the icon element in the DOM tree.
5. From here, we can easily see what CSS classes are associated with the WooCommerce cart icon, and modify them later in our WordPress admin panel. If you take a closer look at the highlighted element, you will see that it has a class called header_cart. And on the right side, you can see all the CSS properties applied to it.

In Chrome, the process is pretty much the same. The only difference, is that to find the cart icon element, you will need to click on the arrow icon on the very left called Chrome Element Inspector (as opposed to Safari’s Start Element Inspection option).

Now we know how to track down any element on our website, and see stuff like CSS properties and HTML attributes related to it.

Custom CSS to Disable the WooCommerce Cart Icon

We found out that the WooCommerce icon has a class called header_cart. Now all we need to do, is add a single line of CSS to that class. Generally, you can find the Custom CSS option in Appearance -> Theme Options. In the Custom CSS text area in your theme’s options, you will need to add:

.header_cart { display: none; }

Click Save Changes, and reload your website. The icon should be gone. If it is still there, try:

.header_cart { display: none !important; }

Next, if the icon is still there, the browser might have cached CSS and JS files from your website. These files are called static files. You will need to empty the cache manually in the browser settings, and reload again to see the custom CSS you wrote take effect.

Special Case

Sometimes, when the second solution doesn’t work, or you can’t seem to Disable the WooCommerce Cart Icon while using smaller browser sizes, there might be some CSS queries overwriting the properties of this class. You will need to use the Element inspector, and find those queries. Here’s an example:

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

To modify this query, in the Custom CSS field, add the following lines (bellow the first .header_cart line):

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

If you need a savvy WordPress developer to help you out, please consider Hiring an Expert.

The post Disable the WooCommerce Cart Icon appeared first on SecondLineThemes.

How To Make Your Logo Responsive

If you are using one of our Podcast Themes, for example the Tusant WordPress Theme, you can easily change the logo width via the “Appearance > Customize” screen, where you’ll find separate options both for the regular logo, mobile logo, and sticky navigation logo.

Fixing Your Mobile Responsive Logo on WordPress

Fortunately, there’s a really easy fix for that – All you have to do is to determine the CSS class or ID of your logo, and limit it’s width, only on mobile devices. Here’s some CSS code you can add into the main style.css file:

@media screen and (max-width: 767px) {
 body #logo {
   max-width: 90%;
   display: block;
 }
}

(Make sure to use the proper ID or class for your logo, so it actually works correctly on your site. If you don’t know the class or ID, you’ll have to use your browsers ‘Inspect Element’ tool, which is available for all major browsers, and look around to find the exact class or ID that needs to be used. The #logo ID that is mentioned above is just an example, so it cannot work for every website, since many are using a different ID for their logo container or logo image.)

The same principals could also be used for the navigation, and you can restrict spacing between menu items, font size or any other setting you need by using the CSS @media queries.

Remember – A Responsive Logo can also fix your mobile and tablet navigation. The header are that contain the logo and navigation is the first part your visitors see, so it’s important to have a responsive logo and navigation set up!

The post How to Fix Responsive Logo Display on Mobile appeared first on SecondLineThemes.