WooCommerce: Remove Mini-Cart Widget Dropdown

Less is more (sometimes). On this same website, I’m already forcing max 1 product in the Cart and automatically redirecting users to Checkout upon add to Cart. On top of that, I’ve disabled WooCommerce cart fragments for performance reasons.

As a result, I definitely don’t need the whole “Mini-Cart Widget Dropdown Content”. To test, try to “hover” onto the shopping cart icon on the top right, and you’ll notice there is no cart dropdown.

Well, this is how it’s done – I love when a complex thing is fixed with one simple line of PHP!

WooCommerce: Hide the Mini-Cart Widget Dropdown Content

PHP Snippet: Hide Menu Mini-Cart Widget Dropdown @ WooCommerce Header

/**
 * @snippet       Remove WooCommerce Mini-Cart
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 6
 * @community     https://businessbloomer.com/club/
 */

add_filter( 'woocommerce_widget_cart_is_hidden', '__return_true' );

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Custom Add to Cart URLs – The Ultimate Guide
    In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID. This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: How to Fix the “Cart is Empty” Issue
    For some reason, sometimes you add products to cart but the cart page stays empty (even if you can clearly see the cart widget has products in it for example). But don’t worry – it may just be a simple cache issue (and if you don’t know what cache is that’s no problem either) or […]
  • WooCommerce: Remaining $$$ to Get Free Shipping Notification @ Cart
    This is a very cool snippet that many of you should use to increase your average order value. Ecommerce customers who are near the “free shipping” threshold will try to add more products to the cart in order to qualify for free shipping. It’s pure psychology. So, here’s how we show a simple message on […]
  • WooCommerce: Disable Payment Method If Product Category @ Cart
    Today we take a look at the WooCommerce Checkout and specifically at how to disable a payment gateway (e.g. PayPal) if a specific product category is in the Cart. There are two tasks to code in this case: (1) based on all the products in the Cart, calculate the list of product categories in the […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

16 thoughts on “WooCommerce: Remove Mini-Cart Widget Dropdown

  1. Nice post, but i would like to know the opposite, thats how to show the dropdown containint the mini cart on mouse click

    1. Hi Ronald, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  2. Hi,

    Used your code on my website, but my whole WC Cart was hidden. I want to leave Menu Cart Icon and if someone will click on it, it will take him to the Cart Page. So I want to hide just WC Menu Cart Dropdown (Mini Cart). Can you help me with that?

    Regards,
    Danylo

    1. Hi Danylo, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  3. Hi, I have a problem. I’m editing a store through Elementor Pro, and when clicking on the “menu cart” widget, I would like it to open the checkout page directly, instead of opening a preview sidebar, could you help me?

    1. Ask Elementor support please

  4. Thanks for this snippet Rodofo!

    It works a treat for hiding the mini-cart widget. I think it’s possibly creating a browser error, though,
    Uncaught TypeError: Cannot read property ‘getBoundingClientRect’ of null
    at HTMLUListElement. (header-cart.min.js:1)

    I tested for browser errors with and without the snippet and it seems to be related as the mini-cart is made null.

    I appreciate all you’re doing to help others!

    1. Hi Tiffany! I guess that JS script also needs to be dequeued – this should fix your problem 🙂

  5. Hi Rodolfo!

    Thank you for this amazing post! 😉

    May I ask you a question? How to edit a button in the mini cart widget (ie checkout > Secure checkout) ?

    Thank you Rodolfo.

    1. Hello Stephane, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  6. Unable to get this to hide the drop-down in my Avada theme installation. I’m running a child theme.

    1. Hello Rob, thanks for your comment! Avada has its own custom WooCommerce templates, so probably this function will need to be edited for that reason. Hope this helps 🙂

  7. Hi Rodolfo,

    Thanks for the snippet. Is this snippet for use in a specific theme? It looks like storefront, but you haven’t specified.

    Thanks,
    Hans

    1. Hey Hans, thanks for your comment! This is for all themes as it’s a default WooCommerce functionality. Some non-WooCommerce themes don’t show the Cart Widget in the navigation bar though, so it depends, yes 🙂 It works on Storefront for sure.

    2. Alright, thanks. I use genesis framework, so those themes don’t show the the cart widget in the navigation, although some basic woocommerce support is build-in. Do you have a snippet to add, or is the use of a plugin advised?

      Hans

      1. Hey Hans! You can add the cart widget by using this PHP function:

        the_widget( 'WC_Widget_Cart', 'title=' );
        
Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *