The Complete Guide
WooCommerce is one of the popular plugins to make your WordPress site into an online store. Most of the popular themes offer integrated store feature with the help of WooCommerce plugin. We also use WooCommerce on some of our sites. Recently when we did a page speed check on pingdom, we found the the component “wc-ajax=get_refreshed_fragments” was taking about a second to load. After analysis we found that on most other cases it even takes 5 to 10 seconds for the page to load.
If you are having page speed issue with WooCommerce Ajax calls then here is a solution to fix the issue based on the inputs from Github.
All about WooCommerce wc-ajax=get_refreshed_fragments:
What is wc-ajax=get_refreshed_fragments?
Page loading issue with admin Ajax calls
How to fix slow page loading in WooCommerce with admin Ajax?
Disable only cart fragmentation on front page of your site
Deactivate only cart fragmentation on front page and posts
Disable all WooCommerce styles and scripts on all pages except shop pages
Using plugin to stop WooCommerce admin Ajax call
Testing page speed
Stopping WordPress heartbeat API
What is wc-ajax=get_refreshed_fragments?
It took sometime for us to understand actually the refreshed fragments is called from WooCommerce. As our site was hosted on HOST SSH Premier Hosting, the impact was less and the WooCommerce Ajax call was taking around a second. If you are hosting on a shared hosting with GoDaddy or similar providers, then you may notice longer delay in page loading somewhere from 3 to 10 seconds.
Below is the screenshot from pingdom showing the long waiting time for loading “wc-ajax=get_refreshed_fragments” on the page. You can also see this script will be listed under a render blocking issue in Google PageSpeed Insights tool.
WooCommerce Ajax Page Loading Issue
Basically WooCommerce attempts to collect the shopping cart details by calling the script and takes long time to complete the task. The plugin get the uncached cart details on every page to show the latest cart items by calling the admin Ajax. You can see the script something like below on each page of your site:
WooCommerce Admin Ajax Call
<script type=’text/javascript’>
/* <![CDATA[ */
var wc_add_to_cart_params = {“ajax_url”:”\/wp-admin\/admin-ajax.php”,”wc_ajax_url”:”\/?wc-ajax=%%endpoint%%”,”i18n_view_cart”:”View Cart”,”cart_url”:”http:\/\/localhost\/shop\/cart\/”,”is_cart”:””,”cart_redirect_after_add”:”yes”};
/* ]]> */
</script>
<script type=’text/javascript’>
/* <![CDATA[ */
var wc_add_to_cart_params = {“ajax_url”:”\/wp-admin\/admin-ajax.php”,”wc_ajax_url”:”\/?wc-ajax=%%endpoint%%”,”i18n_view_cart”:”View Cart”,”cart_url”:”http:\/\/localhost\/shop\/cart\/”,”is_cart”:””,”cart_redirect_after_add”:”yes”};
/* ]]> */
</script>
This is on the localhost environment, you should see the code with your own URL.
WooCommerce Ajax Fragments on Page Source
Admin Ajax Calls and Page Loading
WooCommerce uses this cart fragmentation admin Ajax call to update the items and total in the cart without refreshing the page. Calling admin Ajax on every page will delay your page loading time considerably and also consume high server resources. The other issue is that the plugin does this action even on a page where there are no shopping cart or product related details.
The above screenshot shows the problem exists on “About Us” page where there are no WooCommerce components available. So removing the shopping cart on the page will not help in improving the page load speed. What we need is to disable the cart update where there are no shopping carts or products displayed.
How to Fix the Issue with wc-ajax=get_refreshed_fragments?
The issue needs to be fixed by de-enqueuing the script by modifying your theme’s functions.php file. You can modify the functions.php through WordPress admin panel or using FTP. Instead of modifying functions.php file, create a child theme and add additional functions in the child theme. There are three options for dequeuing the WooCommerce Ajax cart fragmentation script.
- Disable only cart fragmentation on front page of your site
- Deactivate only cart fragmentation on front page and posts
- Disable all WooCommerce styles and scripts on all pages except shop pages.
Let us discuss all three options in detail, do only one thing required for you.
Disable Cart Fragmentation on Front Page
In WordPress admin panel, navigate to “Appearance > Editor” and locate the functions.php file. Add the following code at the end of the file.
Disabling WooCommernce Ajax Call
/** Disable Ajax Call from WooCommerce */
add_action( ‘wp_enqueue_scripts’, ‘dequeue_woocommerce_cart_fragments’, 11);
function dequeue_woocommerce_cart_fragments() { if (is_front_page()) wp_dequeue_script(‘wc-cart-fragments’); }
/** Disable Ajax Call from WooCommerce */
add_action( ‘wp_enqueue_scripts’, ‘dequeue_woocommerce_cart_fragments’, 11);
function dequeue_woocommerce_cart_fragments() { if (is_front_page()) wp_dequeue_script(‘wc-cart-fragments’); }
It should look like below on the editor, once pasted the code click on “Update File” to save your changes.
Modifying Theme Functions PHP File
If you want to use FTP then login to your server using FTP account. Go to “/wp-content/your-theme/” and find the “functions.php” file. Edit and add the above code at the end of the file and upload the modified file back to server.
Once the file is updated, navigate to “WooCommerce > Settings” menu and go to the “Display” section under “Products” tab. Enable the checkbox against the option “Redirect to the cart page after successful addition“.
Enable Redirect to Cart Page
This will help the customer goes to the main cart page instead of waiting for long time after the item is added into the cart. Otherwise though the item is added, your shopping cart may not show the updated details when you are on the same page as the cart fragmentation script is disabled.
Disable Cart Fragmentation on Front Page and Posts
The above code will disable the cart fragment script only on the static front page. If you want to disable the script on all posts then try adding the below code in your theme’s function.php file.
Disable WooCommerce Ajax Script on All Posts
/** Disable Ajax Call from WooCommerce on front page and posts*/
add_action( ‘wp_enqueue_scripts’, ‘dequeue_woocommerce_cart_fragments’, 11);
function dequeue_woocommerce_cart_fragments() {
if (is_front_page() || is_single() ) wp_dequeue_script(‘wc-cart-fragments’);
}
/** Disable Ajax Call from WooCommerce on front page and posts*/
add_action( ‘wp_enqueue_scripts’, ‘dequeue_woocommerce_cart_fragments’, 11);
function dequeue_woocommerce_cart_fragments() {
if (is_front_page() || is_single() ) wp_dequeue_script(‘wc-cart-fragments’);
}
Disabling All WooCommerce Styles and Scripts Site Wide
WooCommerce is a resource intensive plugin which may take your server resources for loading all relevant stylesheets and scripts. If you have few products with hundreds of thousands of blog posts then it make sense to dequeue or disable all WooCommerce relevant stuffs on the blog posts. In other words you can only allow WooCommerce scripts on shop relevant pages so that all other pages will load faster.
Add the below code in your functions.php file based on the Github gist. The code will first check whether WooCommerce plugin exist on your site and then disable the styles and scripts on all pages except product, cart and checkout pages.
Disable All WooCommerce Styles and Scripts Except Shop Pages
/** Disable All WooCommerce Styles and Scripts Except Shop Pages*/
add_action( ‘wp_enqueue_scripts’, ‘dequeue_woocommerce_styles_scripts’, 99 );
function dequeue_woocommerce_styles_scripts() {
if ( function_exists( ‘is_woocommerce’ ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
# Styles
wp_dequeue_style( ‘woocommerce-general’ );
wp_dequeue_style( ‘woocommerce-layout’ );
wp_dequeue_style( ‘woocommerce-smallscreen’ );
wp_dequeue_style( ‘woocommerce_frontend_styles’ );
wp_dequeue_style( ‘woocommerce_fancybox_styles’ );
wp_dequeue_style( ‘woocommerce_chosen_styles’ );
wp_dequeue_style( ‘woocommerce_prettyPhoto_css’ );
# Scripts
wp_dequeue_script( ‘wc_price_slider’ );
wp_dequeue_script( ‘wc-single-product’ );
wp_dequeue_script( ‘wc-add-to-cart’ );
wp_dequeue_script( ‘wc-cart-fragments’ );
wp_dequeue_script( ‘wc-checkout’ );
wp_dequeue_script( ‘wc-add-to-cart-variation’ );
wp_dequeue_script( ‘wc-single-product’ );
wp_dequeue_script( ‘wc-cart’ );
wp_dequeue_script( ‘wc-chosen’ );
wp_dequeue_script( ‘woocommerce’ );
wp_dequeue_script( ‘prettyPhoto’ );
wp_dequeue_script( ‘prettyPhoto-init’ );
wp_dequeue_script( ‘jquery-blockui’ );
wp_dequeue_script( ‘jquery-placeholder’ );
wp_dequeue_script( ‘fancybox’ );
wp_dequeue_script( ‘jqueryui’ );
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/** Disable All WooCommerce Styles and Scripts Except Shop Pages*/
add_action( ‘wp_enqueue_scripts’, ‘dequeue_woocommerce_styles_scripts’, 99 );
function dequeue_woocommerce_styles_scripts() {
if ( function_exists( ‘is_woocommerce’ ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
# Styles
wp_dequeue_style( ‘woocommerce-general’ );
wp_dequeue_style( ‘woocommerce-layout’ );
wp_dequeue_style( ‘woocommerce-smallscreen’ );
wp_dequeue_style( ‘woocommerce_frontend_styles’ );
wp_dequeue_style( ‘woocommerce_fancybox_styles’ );
wp_dequeue_style( ‘woocommerce_chosen_styles’ );
wp_dequeue_style( ‘woocommerce_prettyPhoto_css’ );
# Scripts
wp_dequeue_script( ‘wc_price_slider’ );
wp_dequeue_script( ‘wc-single-product’ );
wp_dequeue_script( ‘wc-add-to-cart’ );
wp_dequeue_script( ‘wc-cart-fragments’ );
wp_dequeue_script( ‘wc-checkout’ );
wp_dequeue_script( ‘wc-add-to-cart-variation’ );
wp_dequeue_script( ‘wc-single-product’ );
wp_dequeue_script( ‘wc-cart’ );
wp_dequeue_script( ‘wc-chosen’ );
wp_dequeue_script( ‘woocommerce’ );
wp_dequeue_script( ‘prettyPhoto’ );
wp_dequeue_script( ‘prettyPhoto-init’ );
wp_dequeue_script( ‘jquery-blockui’ );
wp_dequeue_script( ‘jquery-placeholder’ );
wp_dequeue_script( ‘fancybox’ );
wp_dequeue_script( ‘jqueryui’ );
}
}
}
Remember to add only one of the code block from the three options. Don’t add multiple or all the codes in your functions.php file.
When you disable the scripts side wide, also disable “Enable Ajax add to cart buttons on archives” option available under the “Display” section of “WooCommerce > Settings” menu.
4. Using Plugin to Stop WooCommerce Admin Ajax Calls
If you are not familiar with modifying theme’s file or creating child theme then there is a free plugin to do the work for you. Install and activate “Disable Cart Fragments” plugins from your WordPress admin panel.
This plugin does not have any settings page. Simply activating the plugin will disable the WooCommerce cart fragmentation on all pages of the site. If you want to disable the script only on particular pages then add the below code in your wp-config.php file.
Disable Cart Update Script on Selected Posts or Pages
define(‘DISABLE_CART_FRAGMENTS’, ‘ID-1,ID-2,ID-3’);
1
define(‘DISABLE_CART_FRAGMENTS’, ‘ID-1,ID-2,ID-3’);
ID-1, ID-2 and ID-3 are the post or page IDs.
Remember you should disable “Enable Ajax add to cart buttons on archives” and enable “Redirect to the cart page after successful addition” as explained in the above sections.
5. Testing the Page Speed
Once the code is added, purge the cache if you use caching plugin or purge varnish caching on server. Check on Google PageSpeed Insights, you should not see the “wc-ajax=get_refreshed_fragments” script under render blocking JavaScript section.
Disable Styles and Scripts of WooCommerce
Disable Styles and Scripts of WooCommerce
Also on pingdom the script should not be visible under “File Requests” section. Your page speed score should be increased notably after disabling the WooCommerce Ajax script.
6. Stopping WordPress Heartbeat API
All those dashboard widgets showing live sales and statistics may look attractive. But that will cost you high by dragging your site’s loading speed. The dashboard widgets update the content dynamically using admin Ajax calls similar to cart fragmentation in WooCommerce. This is done with the help of standard WordPress API called heartbeat API.
Generally we don’t recommend to have those dynamic widgets on the dashboard. You can simply disable the admin-ajax calls or WordPress heartbeat API to reduce the server load and improve the page loading speed of your WordPress site.
Final Words
WooCommerce is one of the easy ways to build your online store in WordPress. But online stores need certain basic functions like dynamic cart update. In our experience, what we have seen is that 90% of the WooCommerce users sell simple digital goods. Their store is merely an add-on to the large blog or content site. In this case, we strongly recommend to disable the admin Ajax calls so that all other pages on the site will load faster without affecting user experience.
Conclusion
If you need assistance with this guide, you can always schedule a Free Consultation.