Search code examples
csswordpresswoocommerceminicart

Hiding hover over mini cart in header


Site in question: www.melodylakerart.com

Background: ages ago, on mobile and tablet view i disabled the pop up cart preview that shows when you hover over the shopping cart in the header because its not that user-friendly on small devices. Now I've discovered it has come back with avengance. NB I am not a coder and quite a newb to wordpress.

What I've tried: I've tried all the inspecting and 'display:none-ing i can think of to no avail. I think its called .o-mini-cart and I can see when I look at the code that there is a 'display:none ' on and around it but it is crossed out, as though not active. From what ive read online this probably means something somewhere else is overriding it but i've tried the !important trick, to no avail and cant find whats overriding it and even if I could, I wouldn't know how to stop it.

How you can help: Please can you help me to fix this problem and stop this horribly squiffy useless pop up cart appearing on hover over the cart on mobile and tablet

Thanks in advance


Solution

  • You can hide the minicart "popup" with add this css to Custom CSS :

    @media only screen and (max-width: 767px) {
        body .elementor-21767 .elementor-element.elementor-element-b1cb531 .l-primary-header__bag:hover .o-mini-cart {
            display: none!important;
    }}