How to fix WordPress cart-fragments.min.js error.
Quick Summary of Contents
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.
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 load, but key elements driven by JavaScript were nowhere to be found. But where, oh where could they be?
Upon further inspection, I soon discovered WooCommerce and WordPress load several JavaScript files. 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 with 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 sometimes be a nightmare to manage. While it does make 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 restore from a backup simply — if you were careful enough to have made one before 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 could not 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 managed to not tread upon one another to the point of a site-halting standout — dance-off in the party’s case.
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 focused my efforts on learning about cart-fragments.min.js and why it was attempting to buck up to core WordPress so that the site came to a screeching halt.
What is cart-fragments.min.js, and what does it do?
I soon discovered that 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 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 rain on everyone’s dance party.
Go to WooCommerce > Settings > Products and uncheck the box for Enable AJAX to 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 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 plugins 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 does the use of 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 you deem non-essential to a page’s functioning.
Be very careful when dequeuing because you could unknowingly lose a lot 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).
Ensure you edit the functions.php file in the child theme, not the parent theme. If you update in the parent theme, you risk losing changes made to functions.php due to update override and overwriting of functions.php.
No worries, creating a child theme is really easy. You create a folder with the theme’s 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.
Create two files in the newly created child folder: 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):
/* Theme Name: Twenty Twenty Child Theme URL: http://yourdomain.com Description: Twenty Twenty Child Theme Author: Your Name Author URL: http://yourdomain.com Template: twentytwenty Version: 1.0.0 Text Domain: twentytwenty-child */
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.
<?php
// START - Base code for child theme functions
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
// END - Base code for child theme functions
// START - Enqueue/Dequeue scripts and styles
add_action( 'wp_enqueue_scripts', 'disable_wc_jscss' );
function disable_wc_jscss() {
//if WooCommerce plugin is active
if( function_exists( 'is_woocommerce' ) ){
//if a WooCommerce page
if(! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
## Dequeue WooCommerce styles
/* add any css below as shown with woocommerce-layout */
//wp_dequeue_style('woocommerce-layout');
## Dequeue WooCommerce scripts
wp_dequeue_script('wc-cart-fragments');
}
}
}
// END - Enqueue/Dequeue scripts and styles
?>This method of dequeuing unnecessary scripts and styles is a bit more involved, yet it is the most flexible and versatile.
In fact, this new 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, allowing 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, please drop me a line regarding the issue encountered. That’s all I have for now!
Leave a Comment