Search code examples
phpwordpresswoocommercecartproduct

Remove mini-cart when no items in cart (MayaShop)

I'm looking for some help in WooCommerce. I would like to hide the mini cart and topbar when there are no items in the cart (as it won't be used that often).

Below is the HTML output.

Is there some kind of "WooCommerce Hook" that needs to be added in functions.php?

Sorry, I don't even know what PHP files to look in to post any code snippets for this particular area, if they are required.

Please let me know if they are.

Code

Thanks.

Solution

  • Your header.php file located in your main theme is displaying that Mini-cart. (Is better to use a child theme and to copy that file from the parent theme to the child theme, avoiding loose the customizations when updating main theme).

    Editing that header.php file, you will have to use a simple condition around the code that is displaying Mini-cart, this way:

    // If cart is not empty display the mini-cart
if(!WC()->cart->is_empty()){

    // Here goes the code that display mini cart in your header
}

    This should work, but if ajax is enabled for add-to-cart, the mini-cart will be displayed only moving to another page or refreshing the actual page.

    ALTERNATIVE: THE EASY WAY (HIDDING WITH CSS)

    Another alternative, should be to inject a CSS rule in html head, when cart is empty this way:

    add_action('wp_head', 'hook_css', 99999);
function hook_css() {
    // If cart is empty hide the mini-cart
    if(WC()->cart->is_empty())
        echo '<style type="text/css">#top > #cart{display:none !important;}</style>';
}

    This code goes on function.php file of your active child theme (or theme) or in any plugin file.

    The code works.and if you want to hide all the top bar (and the mini-cart at the same time), replace the css rule by (just removing > #cart):

    #top{display:none !important;}