[Support request] How to edit cart modal?

[Johan]

Hello, I hope you’re doing well 🙂

I need help with 3 questions today, to edit the menu cart modal. By default if there’s not any item added to cart to modal isn’t displayed if you hover it, only shows the default title tag “See your cart” and if you click it it will redirect you to woocommerce cart page.

https://imgur.com/YP7zPsG

But if you add a item on cart it will open the cart review on the same page, and that’s wonderful. Like this:

https://imgur.com/LJkQRIG

(this is the 1 problem) But I want to modify that modal to open even is there’s no items on cart, and show something like “Your cart is empty :(” I really will appreciate if you help me to modify it. That’s because I want to insert a shortcode on the bottom of that modal to show some data.
(this is the 2 problem) How to insert the shortcode there, something like this:
https://imgur.com/0rw0bIc

(this is the 3 problem, but optional) I want to do the same on mobile 🙂 By default even is theres is some item added to cart the cart icon on mobile redirect you automatically to the woocommerce cart page. But If there’s possible I want to open the same modal showing cart description on the same page on mobile.

I know im asking a lot, but I really need you, thanks! 🙂

[David]

Hi there,

1. Try adding this CSS to display the cart even when its empty:

.wc-menu-item:not(.has-items) .wc-mini-cart {
    display: initial !important;
}

2. you can use the woocommerce_after_mini_cart hook that Woo adds after the mini cart:

https://github.com/woocommerce/woocommerce/blob/b19500728b4b292562afb65eb3a0c0f50d5859de/templates/cart/mini-cart.php#L96

3. We don’t have a solution for that – it would require changing the links behaviour that would also affect desktop and then you would need to deal with carts having a lot of items may overflow the viewport and become unscrollable. It would require a plugin or custom development to do that.

[Johan]

Hi, thanks for reply David.

Problem 1 has been solved. Thanks a lot.

But the 2 not yet. I used the provided hook and it doesn’t seens like do nothing. I have made an element, wrote the shortcode and even a single text only to see if that were working but nope:

https://imgur.com/mp137wc (elemtent)
https://imgur.com/7khBWQ1 (nothing)

Can I do something else?

About the 3 problem then I’ll let it as solved coz I decided don’t do that.

[Ying]

Hi Johan,

The element is working, and the paragraph is there, have you tried clear your browser cache?
https://www.screencast.com/t/mOD4Q9mZVgL

However, your shortcode doesn’t seem working.

You could test the shortcode on a blank page or post, see if it’s working.

[Author]

Posts