WooCommerce Cart Fragments

In this guide, I would like to talk about cart fragments in WooCommerce.

Knowing what they are and how to use them could be quite handy when working with WooCommerce themes, especially when you create a custom theme for WooCommerce.

What are cart fragments anyway?

Cart fragments – parts of your WooCommerce theme templates that automatically get updated without a page refresh when the cart content is changed (for example, when products are added to the cart).

How to Disable WooCommerce Cart Fragments

Before showing you an actual way to do it, first of all, let’s understand why you even need to consider disabling AJAX cart fragments in WooCommerce.

The answer is simple – performance.

• Cart fragments are never cached,
• If you try to analyze your website using any performance tool, you may notice that your store not only has an extra JavaScript file which is cart-fragments.min.js but also an additional HTTP request to ?wc-ajax=get_refreshed_fragments which may be quite slow. However, it may depend on the WooCommerce theme you’re using.

Example of what I am talking about:

1. Using a WordPress plugin

Usually, I am not a big fan of using WordPress plugins for small tasks like this one, but in case using a custom code snippet freaks you out, you can try a plugin, why not?

It is the Disable Cart Fragments plugin, and it is available in the official WordPress repository.

By the way, it doesn’t actually disable the cart fragments functionality, it just loads the scripts asynchronously after the page is fully loaded itself.

2. Using a code snippet

Now, let’s just go to the code snippet approach. If you don’t know how and where to insert this snippet into your WooCommerce store, please check my guide about code snippets.

add_action( 'wp_enqueue_scripts', 'rudr_turn_off_cart_fragments', 25 );
 
function rudr_turn_off_cart_fragments() {
 
	wp_dequeue_script( 'wc-cart-fragments' );
 
}

How to check if the cart fragments are now disabled?

• First of all, you can inspect the HTML code of your WooCommerce store pages in the browser. Is the cart-fragments.min.js file included?
• Second, if you go to the cart page, for example, and try to change the quantity of any product in it, does the mini cart remain static?

If the answer to both of the questions above is “Yes”, then the cart fragments are now successfully disabled.

Refresh Cart Fragments

If you do something on your WooCommerce store pages and you want cart fragments to be automatically refreshed after that, you can easily do it by triggering the wc_fragment_refresh event in jQuery.

Example:

jQuery( document.body ).trigger( 'wc_fragment_refresh' )

Create a Custom Cart Fragment

All right, most of this tutorial we spent disabling the cart fragments, but this functionality is quite useful, and honestly, it doesn’t affect performance that much. If your site is struggling with performance, most likely it is because of one of two reasons – it is either a server issue or a third-party plugin issue that you’re using on your store. And believe me, disabling cart fragments won’t help you a bit with it.

Now, let’s create our custom cart fragment.

Step 1. HTML code of a cart fragment for a template

First things first, let’s decide what it is going to be. For example, let’s say it is going to be some kind of link to the cart with the text like “Products in the cart: 5 ($500)” (let’s keep it simple, all right?).

Here is the HTML code for a WooCommerce template:

printf(
	'<a class="rudr-cart-fragment" href="%s">Products in the cart: %s (%s)</a>',
	wc_get_cart_url(),
	WC()->cart->get_cart_contents_count(),
	WC()->cart->get_cart_total()
);

Step 2. Registering the cart fragment

The second and the last step. Good news for you guys – we still don’t have to use any JavaScript code over here. All we need to do is use the woocommerce_add_to_cart_fragments filter hook.

add_filter( 'woocommerce_add_to_cart_fragments', 'rudr_cart_fragment', 25 );
 
function rudr_cart_fragment( $fragments ) {

	$fragments[ 'a.rudr-cart-fragment' ] = sprintf(
		'<a class="rudr-cart-fragment" href="%s">Products in the cart: %s (%s)</a>',
		wc_get_cart_url(),
		WC()->cart->get_cart_contents_count(),
		WC()->cart->get_cart_total()
	);
	
	return $fragments;
 
}

As you can see here, the indexes of the $fragments array are simply CSS selectors of cart fragments.

That’s pretty much it, guys.

If you have any questions, feel free to ask them in the comments section below.

# WooCommerce

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X