Woocommerce Shopping Cart Dropdown on Header

  • Resolved kristinubute

    (@kristinubute)


    6 years, 8 months ago

    HI

    I’ll try and explain so not to confuse.

    I have the Woocommerce Shopping Cart Icon on the top right corner in the Header section (I think this is where it usually sits on installation) … So let’s say I have added a few items to the cart, and I HOVER over the “CART” button on top right corner (not actually click it yet just hover) then there is a Dropdown list of product items that are in the cart underneath approx 1cm and a “View Cart” and “Checkout” button there also

    I want to remove this extra feature drop down on hover but can’t seem to find the correct coding to remove. I just want people to click on “CART” and not see anything and not see cart contents on HOVER.

    Just to clarify I am NOT referring to the “Main Cart” itself AFTER someone has clicked it ..

    I am referring to the “Cart” in Header on HOVER BEFORE It is clicked on to “View all contents in the Cart” … so there is no confusion.

    If anyone can help urgently would be greatly appreciated.

    Thx
    Krsitin

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support Mike M. a11n

    (@mikedmoore)

    Automattic Happiness Engineer

    Hi Krsitin,

    What you’re referring to is called a mini cart. WooCommerce doesn’t include this functionality by default. It’s normally the theme or another plugin that adds it to the header. If you can post a link to your site, we can take a look and write some CSS that will hide the overlay that comes up when hovered.

    Thread Starter kristinubute

    (@kristinubute)

    Hi

    Basically when I hover I see the items in the cart, but can’t move my mouse cursor down to click on anything there it just disappears. Which is pointless if I can’t click on it, then customers can’t click on it, then they can’t click on “view cart” in that popup in hover, therefore it is pointless. Not sure why it disappears after my mouse cursor leave the hover area.

    I have read elsewhere that Woocommerce does this by default and you can’t remove it.

    Somebody from another post a while back said:
    Support Team posted this……
    Hello,

    It is not possible, to remove submenu from the Cart Link. This is the way the Cart Link works in wooCommerce.

    You are saying it is coming from somewhere else ? I have no plugins causing this. It only shows when I hover over the CART ICON on the Top right corner display.

    Yes I was trying to find some code to hide it … but I cannot seem to right click on it when it pops up to go into the Inspector section to read which code it exactly is .. then I could type “display: none”; once I know which code exactly it refers to.

    I have found this:

    .woocommerce-cart .cart-collaterals .cart_totals tr td {

    Maybe part of cart-collaterals but I tried putting in

    .cart-collaterals .cart_totals tr td {
    display:none;
    }

    but didn’t work. Its probably not the right coding reflecting this.

    Any help great appreciated !

    It’s the same on my other client sites also. Just thought I would tidy them up and remove them if they can’t be clicked on.

    Thx
    Kristin

    Please post the url to your site.

    Thread Starter kristinubute

    (@kristinubute)

    Can I supply the link privately so it is not public ? Thx Kristin

    If its a www.ads-software.com theme it may be possible to manage without the link. www.ads-software.com members don’t have access to commercial themes. What theme do you have? Otherwise you can write it in the format: my-site dot co dot uk, which should protect it from access by robots but it would be public.

    Thread Starter kristinubute

    (@kristinubute)

    Hi

    It is a Storefront theme and NOT www.ads-software.com

    Thx
    Kristin

    I used www.ads-software.com theme as shorthand for a theme that’s available from www.ads-software.com, so I have access to it.

    This custom css should do the job:

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

    Custom css can be entered at:
    Dashboard > Appearance > Customize > Additional CSS

    Thread Starter kristinubute

    (@kristinubute)

    Hi Lorro !

    That was perfect fix !!

    Even when trying to use Inspector and finding the right coding was a task ..
    Great work !

    ALSO THEN with that coding you provided me …. I CHANGED to

    .site-header-cart .widget_shopping_cart {
    margin-top: -70px;
    }

    AND that moved that Mini Cart up so it is straight underneath the CART area and now I can click on the cart contents and remove things ….

    Perfect fix ! It helps to be able to find the correct coding …

    So now I have 2 options for clients …
    That had been bugging me for a while !

    Thanks again !
    Thx
    Kristin

    Thread Starter kristinubute

    (@kristinubute)

    Hi @denishreyal

    Thanks very much for that, I will look into that.

    Regards

    Kristin

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    @kristinubute Don’t use the site that @denishreyal posted. It’s spam bait and is going to get hammered for violating WordPress’s trademark.

    https://wordpressfoundation.org/trademark-policy/
    https://www.ads-software.com/about/domains/

    • This reply was modified 6 years, 3 months ago by Jan Dembowski.
    briberyexpert

    (@briberyexpert)

    hello,

    Sorry but can you confirm what is doing this code?

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

    It seems to hide the minicart in the header ?

    But what if I want to show it but just disable ajax that displays the cart content on hoover and updates it ?

    Thank you.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Woocommerce Shopping Cart Dropdown on Header’ is closed to new replies.