How to fix WordPress cart-fragments.min.js error

I recently migrated a customer’s WordPress website from Bluehost to RoseHosting.

It was a good 6 year run with Bluehost, but this specific customer finally outgrew Bluehost web hosting services.

In actuality, Bluehost kept their website running on PHP 5.6 instead of upgrading to 7.x. But that’s a different story for another day.

The party was good until cart-fragments.min.js shut it down

My WordPress struggles with this given client’s website occurred after updating WooCommerce and updating to WordPress. After the latter update, the pages loaded but key elements driven by JavaScript were nowhere to be found.  But where, oh where could they be?

Upon further inspection, I soon discovered there are quite a few JavaScript files loaded by WooCommerce and WordPress. I inspected multiple pages, using Google Developer tools, to discover an error occurring when loading the file cart-fragments.min.js.

I’d expect to encounter such an error if I were loading pages in relation to WooCommerce. But in this case, the homepage with no elements of shopping evident on the page anywhere was not loading.

The battle of WooCommerce and WordPress core updates

But why did I not encounter this cart-fragments.min.js error before now? Two reasons: WooCommerce plugin and WordPress core updates.

If you don’t know by now, WooCommerce can be a nightmare to manage at times. While it does making hosting an e-commerce-centric website a lot easier than most, the technical glitches and snares that await you can be gnarly, to say the least.

WooCommerce is a brimming trove of “extra javascript” files bloating and greatly impacting a website’s page load performance.

Then there are WordPress core updates that can badly break a website with no other recourse than to simply restore from a backup — if you were careful enough to have made one prior to updating.

Nevertheless, WordPress core updates can be bad nightmares for both website owners and WordPress plugin developers.

As for the customer’s website, both updates were not able to be performed due to the version of PHP. However, with migration into a new website, updates were a MUST.

It wasn’t until updating both WooCommerce and WordPress that a battle of scripts emerged. This battle likely always existed, but they somehow managed to not tread upon one another to the point of a site-halting standout — dance-off in the case of the party.

And so now, I was forced to pick a side: WooCommerce or WordPress. Of course, you always choose the side of WordPress, which means WooCommerce instigated this site-halting standoff.

So I focus my efforts on learning about cart-fragments.min.js and why it was attempting to buck up to core WordPress in such a way that the site came to a screeching halt.

What is cart-fragments.min.js and what does it do?

I soon discovered the cart-fragments.min.js is nothing more than javascript allowing for AJAX calls to gather shopping cart data to display on each web page load.

Unfortunately, WooCommerce adds this script and a hand full of others across every page on a WordPress website. This loading of non-essential scripts can massively slow down websites that don’t use caching and optimize and minimize script loading.

It’s best not to use cart-fragments.min.js throughout your WordPress website if you don’t have to.

So, let’s explore how to best limit the exposure to cart-fragments.min.js by simply disabling it.

How to disable WooCommerce’s cart-fragments.min.js

I’ll share with you a few ways to settle the score between WooCommerce’s cart-fragments.min.js script and WordPress.

We’ll have both back to dancing in no time instead of trying to square off and raining on everyone’s dance party.

1. Disable AJAX add to cart buttons

Go to WooCommerce > Settings > Products and uncheck the box for Enable AJAX add to cart buttons on archives.

Congratulations, you just resuscitated your website, ending the feuding and standoff between WooCommerce’s cart-fragments.min.js and WordPress.

2. Time to plugin “Disable Cart Fragments”


(Highly Recommended Solution)

If disabling AJAX add to cart buttons in WooCommerce > Settings > Products doesn’t do the trick, then perhaps using a plugin will unplug cart-fragments.min.js and bring life back to your website.

I STRONGLY recommend using Disable Cart Fragments by Optimocha. I LOVE this plugin because you simply install and activate it, and it does the rest.

It’s a lightweight plugin that disables the cart fragment script while speeding up your website. I’ve found it to work well with not only this customer’s website and caching plugin but quite a few caching plugins.

3. Dequeue unnecessary scripts and styles

If disabling AJAX add to cart buttons in WooCommerce > Settings > Products doesn’t do the trick nor using plugins, then perhaps our friend “dequeue” can talk some sense into cart-fragments.min.js and non-essential tag alone scripts.

Dequeueing is nothing more than removing scripts and styles that you deem as non-essential to the functioning of a page.

Be very careful though when dequeuing because you could unknowingly lose quite a bit of functionality. More like, my page loads lightning fast now, but nothing displays — in the worst-case scenario.

To dequeue unnecessary scripts and styles, locate your website’s theme folder and the functions.php file (e.g., /wp-content/themes/your-theme/functions.php).

Make sure you edit the functions.php file in the child theme and not the parent theme. If you update in the parent theme, then you risk losing changes made to functions.php due to update override and overwrite of functions.php.

No worries, creating a child theme is really easy. All your doing is creating a folder with the themes identical name and appending “-child” to it.

So, create a new folder in /wp-content/themes/ and append “-child” (e.g. twentytwenty-child). Now, there should be twentytwenty and twentytwenty-child folders, or whatever your theme is named.

In the newly created child folder, create two files: functions.php and styles.css. Inside the CSS file you can place the following code (pay close attention to ensuring the parent theme is named for Template):

In the same child folder, now create functions.php. Paste the PHP code below allowing the loading of child CSS files, and enqueueing/dequeuing of scripts and styles.

This method of dequeuing unnecessary scripts and styles is a bit more involved, yet is the most flexible and versatile.

In fact, this newly child functions.php file allows for customizing your WordPress website in ways you could have never imagined. Like, if you desire to replace the WordPress logo on your login page or customize the CSS of the entire page.

That’s only the beginning of where you could go with child theme functionality and look and feel.

Closing Thoughts

Don’t let WordPress and its themes and plugins beefing with one another cause you to despair or discourage their use.

In the case of WooCommerce and its feisty cart-fragments.min.js attempting a showdown with core WordPress, there are more than enough options available to find a suitable compromise and to bring life back to your website, allow the dance party continues for all to do their thing.

You may find success trying one, two, or all three options. Nevertheless, should none of the options work for your website, then don’t hesitate to drop me a line with the issue encountered. That’s all I have for now!

Share:
Written by Alvin Brown
He's an experienced and passionate serial entrepreneur, founder and publisher of Kickstart Commerce. Alvin possesses a great love for startups dominating their market using profitable digital strategies for greater commerce.