How to Remove Shopping Cart Icon in WooCommerce

If you want to remove the shopping cart icon in WooCommerce, this complete beginner-friendly guide will help you do it easily using CSS, PHP code, plugins, and theme customization settings. WooCommerce automatically adds a shopping cart icon in the website header for customer convenience. However, many website owners prefer removing the WooCommerce cart icon to create a cleaner layout, improve landing page design, increase conversions, and simplify mobile navigation. Whether you are running a single product store, service website, custom checkout page, affiliate website, or minimalist WooCommerce store, hiding the shopping cart icon can improve the overall user experience. In this step-by-step WooCommerce tutorial, you will learn multiple safe methods to remove or hide the WooCommerce shopping cart icon without affecting your website functionality or checkout process.

---

Why Remove Shopping Cart Icon in WooCommerce?

Many WooCommerce store owners remove the shopping cart icon for design and usability reasons. The cart icon is useful for large eCommerce websites, but some websites do not need it visible all the time. Here are the most common reasons for removing the WooCommerce cart icon:

• Create a clean and professional website header
• Improve landing page conversion rates
• Reduce unnecessary distractions
• Improve mobile navigation experience
• Create a custom WooCommerce checkout flow
• Build a minimalist WooCommerce website
• Improve website speed and performance
• Focus visitors on call-to-action buttons
• Better branding and header customization
• Optimize single product WooCommerce stores

Removing unnecessary elements from the website header can help improve user engagement and make your website look more modern.

---

Benefits of Removing WooCommerce Cart Icon

Removing the WooCommerce shopping cart icon offers several advantages for both website owners and visitors.

Cleaner Website Design

A clean website header looks more professional and improves user focus. Minimalist designs often perform better for service-based websites and landing pages.

Better Mobile Experience

On mobile devices, header space is limited. Removing the WooCommerce cart icon creates more room for menus and important navigation elements.

Improved Conversion Rates

Removing distractions can help visitors focus on important buttons like “Buy Now,” “Contact Us,” or “Book Now.”

Better WooCommerce Customization

Many developers remove unnecessary WooCommerce elements to create fully customized websites and unique user experiences.

---

Best Methods to Remove WooCommerce Cart Icon

There are multiple ways to remove the shopping cart icon in WooCommerce. The best method depends on your experience level and website setup.

• Using CSS code
• Using PHP code
• Using WordPress theme settings
• Using plugins
• Using page builders like Elementor

Below, we explain all methods step-by-step.

---

Method 1: Remove WooCommerce Cart Icon Using CSS

The easiest and safest method to remove the WooCommerce shopping cart icon is using custom CSS. This method works with most WooCommerce themes including Astra, Storefront, Flatsome, OceanWP, GeneratePress, and Elementor-based websites.

Steps to Add CSS Code

• Login to WordPress Dashboard
• Go to Appearance → Customize
• Open Additional CSS
• Paste the CSS code below
• Click Publish

CSS Code to Hide WooCommerce Cart Icon

.site-header-cart {
    display: none !important;
}

This code hides the WooCommerce cart icon from the website header.

Advantages of CSS Method

• Beginner-friendly method
• No plugin required
• Lightweight solution
• Safe and fast implementation
• No impact on WooCommerce checkout

Disadvantages

• May not work for all custom themes
• Some themes use different cart class names

---

Method 2: Remove WooCommerce Cart Icon Using PHP Code

If your WooCommerce theme uses WordPress hooks, you can remove the cart icon using PHP code. This method is useful for developers and advanced WooCommerce users.

Important Safety Warning

Always create a full website backup before editing theme files or adding custom PHP code. Use a child theme whenever possible to avoid losing changes after theme updates.

PHP Code Example for Storefront Theme

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

Add this code inside your child theme’s functions.php file.

How to Add PHP Code Safely

• Use the Code Snippets plugin
• Use a child theme
• Backup your website first
• Test changes on staging website

This method completely removes the WooCommerce cart icon instead of simply hiding it.

---

Method 3: Remove Cart Icon Using Theme Settings

Many premium WordPress themes include built-in options to disable or hide the WooCommerce cart icon. This is one of the safest methods because no coding knowledge is required.

Steps to Remove Cart Icon via Theme Settings

• Go to Appearance → Customize
• Open Header Settings
• Find WooCommerce Options
• Locate Cart Icon Settings
• Disable the cart icon
• Publish changes

Themes That Support Cart Icon Customization

• Astra
• Flatsome
• OceanWP
• GeneratePress
• Kadence
• Blocksy
• WoodMart

If your theme includes WooCommerce header settings, this method is highly recommended.

---

Method 4: Remove WooCommerce Cart Icon Using Plugins

Plugins provide an easy way to customize WooCommerce without editing code manually.

Best Plugins for WooCommerce Header Customization

• Code Snippets
• WooCommerce Customizer
• Elementor Header Builder
• Header Footer Builder
• Custom CSS and JS Plugin

Why Use Plugins?

• No coding required
• Easy customization
• Beginner-friendly
• Safer than editing theme files
• Quick implementation

However, avoid installing too many plugins because excessive plugins can slow down your WordPress website.

---

How to Hide WooCommerce Cart Icon Only on Mobile Devices

Many store owners want to hide the WooCommerce cart icon only for mobile visitors to improve responsive design. You can do this using responsive CSS media queries.

Responsive CSS Code

@media (max-width: 768px) {

.site-header-cart {
    display: none !important;
}

}

This code hides the WooCommerce shopping cart icon only on mobile devices with screen width below 768 pixels.

Benefits of Mobile Cart Icon Removal

• Cleaner mobile navigation
• Improved mobile user experience
• More space for menus
• Better responsive design

---

Common Problems After Removing WooCommerce Cart Icon

Sometimes users face issues after removing or hiding the WooCommerce shopping cart icon.

CSS Not Working

Some themes use custom CSS classes instead of .site-header-cart. Use browser inspect tools to identify the correct class name.

Cache Problems

Always clear:

• WordPress cache
• CDN cache
• Browser cache
• Plugin cache

Theme Override Issues

Premium WooCommerce themes may override custom CSS. Use stronger CSS selectors if necessary.

Mobile Layout Breaking

Always test your website on mobile devices after making WooCommerce header changes.

---

Best Practices Before Removing WooCommerce Cart Icon

• Create a full website backup
• Use child themes for PHP customization
• Test changes before going live
• Check mobile responsiveness
• Clear all caches after modifications
• Ensure cart and checkout pages still work
• Keep website navigation user-friendly
• Use lightweight customization methods

Following these best practices helps prevent website errors and improves WooCommerce stability.

---

Frequently Asked Questions

How do I remove the shopping cart icon in WooCommerce?

You can remove the WooCommerce cart icon using CSS, PHP code, plugins, or theme customization settings.

Can I hide the WooCommerce cart icon without coding?

Yes, many WordPress themes and plugins provide options to hide the WooCommerce cart icon without coding.

Will removing the cart icon affect checkout?

No, removing the WooCommerce cart icon does not affect checkout functionality if cart and checkout pages remain active.

Which method is best for beginners?

The CSS method is the easiest and safest option for beginners.

Can I hide the WooCommerce cart icon only on mobile devices?

Yes, responsive CSS allows you to hide the WooCommerce cart icon only for mobile users.

Why is my CSS code not working?

Your theme may use different cart icon classes. Inspect the header using browser developer tools.

Should I use plugins or custom code?

If you are a beginner, plugins are safer. Advanced users can use CSS or PHP code for better performance.

---

Conclusion

Removing the shopping cart icon in WooCommerce is a simple customization that can improve your website design, mobile responsiveness, user experience, and conversion rates. You can remove the WooCommerce cart icon using CSS, PHP code, plugins, or built-in theme settings depending on your website needs and technical knowledge. For beginners, the CSS method is the safest and easiest option. Advanced users can use PHP hooks for deeper WooCommerce customization. Always test your WooCommerce website after making changes to ensure your customers continue enjoying a smooth shopping experience.

---

Related WooCommerce Tutorials

• How to Fix WooCommerce Checkout Errors
• WooCommerce Product Image Size Guide
• How to Add Apple Pay in WooCommerce
• WooCommerce Cart Not Updating Fix
• WooCommerce Mobile Optimization Guide
• WordPress Speed Optimization Tutorial

---

Useful Resources

• WooCommerce Official Website
• WordPress Official Website