Support » Theme: Storefront » Make Mini-cart display with click instead of hover

  • Resolved jasonpkc

    (@jasonpkc)


    The default behaviour on Storefront for displaying the minicart is to show when the user hovers over the cart summary in the main nav, but I’d like to change that to a click. I can get the click event showing it, but can’t find anything that would help me disable the hover behaviour (I can’t even figure out what’s changing that makes it appear!).

    Can someone help me disable the ‘show minicart on hover’ behaviour, but still have the minicart available to show with a click?

    Many thanks

    Jason

Viewing 5 replies - 1 through 5 (of 5 total)
  • Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    Hi @jasonpkc,

    To alter the default functionality of the mini cart in storefront you’re likely going to have to recode the themes navigation.js file and rebuild that into the navigation.min.js file wich storefront loads.

    https://github.com/woocommerce/storefront/blob/bcad1f305e3eba624fe443421abe63c5a2c7d443/assets/js/navigation.js

    Not sure what you’re using initially to get the click event working but the following CSS will disable the hover effect

    .storefront-primary-navigation .site-header-cart:hover li:last-child {
      display: none;
    }

    It may or may not work with the on click handling you have setup

    Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    Hey @jasonpkc,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can reopen it again if you need be.

    Hello @jasonpkc
    Did you find out how to make it work? I’m looking for the same solution, I want the header cart button shows the minicart on click, not on hover.
    Hope you can help me. Thank you.

    Regards.

    Someone?
    Hello @stuartduff. I don’t see any mouseover event called from navigation.js so I’m not sure this is the right file to look out for a solution to this problem.
    And @jarretc, once you get to open the widget with a click you can notice that the last product item of the list is removed because of the css line you recommend, so this solution is not accurate neither.
    This problem can look simple, but is turning into quite a challenge.
    Hope anyone can help. Thanks in advanced.
    Regards.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Make Mini-cart display with click instead of hover’ is closed to new replies.