Pro header cart dropdown trigger

[kgpthemex]

Hello again everyone!

I had a simple question about the trigger for the cart dropdown element. Currently and by default, the cart is shown upon clicking the cart on the header but I was wondering if there was an option to have it trigger on hover instead. I can’t find any option in the settings for the cart element.

Thank you!

[paul.r]

Hi,

To achieve that, you can add a class to your cart element.

then add this in Header > CSS

.my-cart:hover .x-dropdown {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-duration: 0.5s;
    transition-property: opacity, transform;
    pointer-events: auto;
}

Hope that helps

[kgpthemex]

Hi @paul.r!

Thank you for the awesome solution! It works! Any way to prevent the on click function? I wouldn’t want someone to accidentally click (as I suspect people will do) and end up seeing the cart permanently until the click on it again.

[paul.r]

Hi,

To disable the click event, you can add this in Header > JS

jQuery(function($) {
   $( ".x-anchor-toggle.my-cart" ).on( "click", function(e) {
	e.preventDefault();
        return false;
   });
});

Hope that helps

[kgpthemex]

@paul.r,

I’m grateful! Both of your solutions worked on the first try. Thank you so much. You’re brilliant.

[paul.r]

You’re welcome and Thank you!