How to Remove WooCommerce Cart Icon from Header in Divi

Last updated on
Feb 11, 2024

WooCommerce is the first option of plugin to create an e-commerce website in WordPress. It has a broad support from the WordPress community, including Elegant Themes, the developer of Divi. In Divi, a new cart icon is automatically added to the header when you install and activate the WooCommerce plugin. While it is quite handy when it comes shopping experience, you might want to remove it for a certain reason. This post will show you how.

In Divi, you have two options to customize the header of your website. The first option is via theme customizer and the second option is via theme builder by creating a custom header template. The WooCommerce cart icon itself is visible if you use the default Divi header. You won’t see it if you use a custom header on your Divi website. So, the following instructions are applicable if you use the default Divi header on your website.

Removing WooCommerce Cart Icon from Header in Divi

While there are plenty of setting options you can apply to style up your header in Divi, there is no option to remove the cart icon if you have WooCommerce installed and activated on your website. A little CSS snippet is needed to remove it. You can use the following CSS snippet to remove the icon.

.et-cart-info {
	display:none !important; 
}

The above code selects the icon using the class selector of .et-cart-info. The display property — with the none value — is used to hide the icon. You can place the above code on the Custom CSS field on the Theme Options. Go to Divi -> Theme Options on your WordPress dashboard and scroll down to the Custom CSS option field under the General tab. Paste the CSS snippet and click the Save Changes button to apply the code.

That’s it. The icon should now be gone from your header.

Summary

Divi is a multipurpose WordPress theme. You can use it to create any type of website, including an e-commerce website with the help of WooCommerce. Divi has a theme builder feature which you can use to create custom templates for your WooCommerce parts, including single product page. If you use a default header on your Divi website, you will see a cart icon belongs to WooCommerce when you install and activate it (WooCommerce).

Divi offers no built-in setting to remove the icon. To remove it, you can use the CSS snippet we provided above. Divi itself is a theme that has high enough system requirements.

Your hosting provider need to have at least 128 MB of PHP memory limit and 64 MB of maximum file upload to run Divi. WP Engine and other WP Engine alternatives like Kinsta and Rocket.net are the recommended hosting providers to run Divi. If your hosting provider doesn’t allow you to upload file larger than 10 MB, you can install Divi manually via file manager or using FTP.

This page may contain affiliate links, which help support the project. Read our affiliate disclosure.

Aliko Sunawang

Aliko is a professional blogger and web creator. He has been blogging with WordPress since 2012. In his spare time, he loves going out to take some photos. More

Want to turn your WordPress knowledge into a passive income machine?