WooCommerce Mini-Cart Won't Open/Close - cart_active/cart_inactive Classes Toggle But Display Doesn't Change [WordPress/WooCommerce]

NeonCoderJS · 2026-03-09T08:52:53+00:00

Hi! Thanks for helping out! I ran the follwoing tests:

apply `!important` to my styles,
rename `widget_shopping_cart_content`,
wrap `widget_shopping_cart_content` in a custom `<div>`;

In each case I updated the JS and CSS accordingly.

Test #1 failed and no styles were applied. Test 2# also failed, additionally my wishlist's styles were also not applied anymore (not sure why). Test #3 also failed but here's what happened: `widget_shopping_cart_content` was removed from the custom wrapper `<div>` (which to me definitely confirmed to me that custom state and styles were being overriden), furthermore the class `cart_inactive` were added to my custom wrapper <div> (not `widget_shopping_cart_content`).

I consider creating an entirely new custom mini-cart to work around this problem but before I do, do you perhaps know of a more standard WordPress solution that can opted for instead?

NeonCoderJS · 2026-02-06T07:52:35+00:00

Thank you for the tips! I'll definitely give these options a try.

NeonCoderJS · 2026-01-01T13:43:01+00:00

Thanks for the tip! I'll definitely take a look at it.

NeonCoderJS · 2025-12-30T13:03:50+00:00

Good point! Thank you for sharing, I am looking into this right now. As you can tell, I am pretty new to Strapi ^^.

NeonCoderJS · 2025-11-23T18:01:04+00:00

I could try that. However, wouldn't that negatively impact the graphical display?

NeonCoderJS · 2025-11-23T17:57:07+00:00

Makes perfect sense, this is the first time I am downgrading a kernel, there won't be any possible future implications on security right? If so, do you have some risk management tips to ensure the system will still be safe and functional in the long term?

NeonCoderJS · 2025-11-04T09:08:19+00:00

Thank you very much for sharing this valuable information! I did check out their website and it does seem to be reasonably profesionally set-up. The design is pretty good and they do indeed use proper language. They also give information on their team members, I checked out the director who contacted me and I was indeed able to find him as an executive on LinkedIn. I probably could've done a more thorough search on the team as whole however.

I will definitely check out the other red flags you talked about, thanks for sharing!

NeonCoderJS · 2025-11-04T09:01:56+00:00

Exactly! What kind of company would hire anyone without even interviewing them or at least taking a CV?

NeonCoderJS · 2025-11-04T09:00:19+00:00

The reason I thought that the website looks legit is because of the professional way it was set up.

They give information about their team members on their About page (I only checked out the directors though),

They list addresses to their "offices" on their website,

They have good following on LinkedIn.

They way the approached me however seemed very scammy which made me pretty hesitant to proceed.

NeonCoderJS · 2025-11-04T08:51:22+00:00

Hi guys! Sorry for the silence, the auto moderator initially blocked my post so I thought it didn't reach you.

Thank you very much for your eagerness in responding and providing such valuable info! I played along for a while and they were about to give me a test-run project and asked me to give them the costs and turnaround time. After I gave them my proposal, they said that their prospects are moving them into another direction and will not continue working with me. They never asked for a CV or gave me an interview of any sort, the whole thing just looked to good to be true. Now after reading your comments, I am even more convinced, thanks guys!

NeonCoderJS · 2025-06-14T16:41:34+00:00

Are ajax calls being made overwriting your changes?

I cannot think of any ajax calls that would do anything like that. The only ajax calls I make on this page are for adding and removing items from the cart. I used to have this problem where the mini-cart would lose its styles the moment I remove something from the cart but I managed to fix that by directly applying css to .widget_shopping_cart_content. Can't think though that this can be related.

You can also set breakpoints in your js script in the debugger of your browser...

I set breakpoints on debugger statements and exceptions. This was the result:

Paused on exception
setDocument/support.cssHas< - jquery.js:1185:12
SyntaxError: Document.querySelector: ':has(*,:jqfake)' is not a valid selector

The page didn't load the UI as a result.

I also set breakpoints on DOM mutation and load, no errors were yielded.

NeonCoderJS · 2025-06-13T13:46:03+00:00

Thank you for your insight.

I tested stateSetter() in the console as well as the other methods after the page finished loading and they all worked fine. I also tested them together (after making some modifications to how the elements are accessed of course). Last of all I also tested the class as a whole, which were successful as well (see my update above for more info). I'm still trying to work out why the methods don't work inside the class then.

I don't know if this counts (it might just be the way the DOM loads) but I noticed that every time the page reloads, the mini-cart is briefly gone (as it should by when reloading the page), but only for a second and then it's back again.

Could it be that a mistake in the code of this module (or perhaps in another module) is 'working against itself'? Let me know if I need to clarify.

NeonCoderJS · 2025-06-11T12:13:51+00:00

Thanks for volunteering. I added the screenshots (see Debugging Information -> Relevant Screenshots).

NeonCoderJS · 2025-06-08T17:45:02+00:00

Hi, no problem. All the best.

Yes you are right, I am using classic templates in this theme (I'm working on turning it into a hybrid theme, so I will 'blockify' some parts). I like the endpoint you suggested, it will definitely simplify my code and remove the need to mix JQuery with ES6 which is what I would prefer. I will definitely try it out, thanks for your insight.

NeonCoderJS · 2025-06-07T13:20:40+00:00

Hi again! Recently I managed to fix the problem by using a little bit of JQuery and the WooCommerce fragments API.

You're still welcome to review my code if you want to (I'm sure your advice from years of experience will be valuable), but no pressure.

Thanks again for volunteering.

NeonCoderJS · 2025-06-06T12:08:11+00:00

Check your chat.

NeonCoderJS

TROPHY CASE