Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Hiding hover over mini cart in header – Woocommerce

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

Tags:

2

Answers


  1. 0

    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;
}}
    Login or Signup to reply.
  2. 0

    Try this:

    @media only screen and (max-width: 1200px) {
    .l-primary-header__bag:hover .o-mini-cart {
        display:none!important;
    }
}

    Where 1200px is the breakpoint of the mobile version of the site.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search