Woocommerce is one of the most commonly used plugins to make a WordPress online store. Its open-source, cost-effective, and flexible nature allows anyone to turn their website into a fully functional online store. In this blog post, we will learn how to optimize your store with AJAX add to cart WooCommerce button to provide a seamless shopping experience for your customers.
What is AJAX?
AJAX is a set of web development techniques that web applications use to send and receive data from the server without refreshing the page. Whenever the user performs any action such as adding items to the cart or filling an inquiry form, AJAX helps to eliminate the page refresh by loading only portions of the page before even the user clicks the button, observed a WooCommerce developer in Toronto - Webomindapps.
How to create an “add to cart” with AJAX to eliminate the page refresh?
Basically when you press the add-to-cart button what happens is that WooCommerce will attempt to collect the shopping cart details by calling “wc-ajax = get refreshed_fragments” and it takes more time to complete this task. Now if you are wondering how to eliminate the delay and optimize this to speed the process when a user taps on add to cart on your product listing pages, follow these steps
● Remove the old button by the action command:
remove_action('woocommerce_single_product_summary',
'woocommerce_template_single_add_to_cart', 30 );
● Now add the AJAX link from the archive page to the single product page following the command that you can find in the path:
(wp-content/plugins/woocommerce/templates/content-single-product.php.)
add_action('woocommerce_single_product_summary',
'woocommerce_template_loop_add_to_cart', 30 );
How to fix the WooCommerce AJAX issue?
Different websites are developed using different platforms, so no one solution works for every site. Understand the concepts below and choose the best solution for your website.
What is “wc - ajax = get refreshed_freagments”?
When the user tries to add items to the cart, the refreshed fragments of the page are called from the WooCommerce plugins. The plugin will get all the uncached cart details on every page to show the latest cart items you have added by calling the AJAX admin. Where your site is hosted? It will also make a difference on the WooCommerce AJAX call.
For instance, if your site is hosted on “SiteGrand Cloud VPS”, the call is faster than if it is hosted on a shared hosting system like “BlueHost”. The delay is typically anywhere around 3-10 seconds, and you can check the page loading delay on GPMetrix and Pingdom. You can find the code of each page of your site within your own URL on the localhost environment.
AJAX calls and page loading
Woconmmerce uses an admin AJAX call to update the items in the cart without refreshing the page. But this has its own downside, adding an admin AJAX call to every page will delay the page-loading time and consume high server resources. When you add this to every page the plugin will act even on pages without the shopping cart option.
Fix the Issue with wc-ajax=get_refreshed_fragments
To fix this issue dequeue the script by modifying your theme’s functions.php file, you can modify using the WordPress admin panel or FTP.
1. Create a child theme.
2. Disable cart fragmentation on the front page.
3. Disable cart fragmentation on post pages.
4. Disable all the WooCommerce styles and scripts on all pages except the pages with the shopping cart.
1. How to create a child theme
- Log in to your server where WordPress is installed
- Navigate to wp-content/themes.
- Create a new child folder and name it accordingly.
- In the created directory, create a new CSS file named style CSS.
- Edit this file and add relevant information by replacing the placeholders with your data.
- Go to the WordPress dashboard and tap on appearances→ themes
- You can find your new child theme listed here.
2. Disable Cart Fragmentation on the front page
To disable Cart fragmentation on the front page add the below code in the theme’s function.php file.
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'); }
3. Disable Cart Fragmentation on post pages
To disable cart fragmentation from all the post pages add the below code in the theme’s function.php file.
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');
}
4. Disable all the WooCommerce styles and scripts on all pages except the pages with the shopping cart.
If your products have more blog posts then disable all the WooCommerce-relevant stuff on the blog posts. This will allow other pages to load faster. The below code checks whether the WooCommerce plugin exists on your site and then disables all the styles and scripts on all pages except the product, cart, and checkout 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' );
}
}
}
Plugins to prevent WooCommerce admin-ajax calls
If you don't wanna go through the hassle of creating a child or modifying a theme’s file, there are prebuilt plugins available to do all of the work for you. Install and activate WP Rocket from your WordPress admin panel. Activating the plugin will thus disable all the cart fragmentation on all pages of your website.
How does WP Rocket work?
This plugin works on every page and checks whether the page contains an AJAX fragment call in the source code, and then it will check whether its cart is empty when loading the page. If these booth conditions are satisfied, it will cache the page in transient and serve the page when it is loaded the next time.
Page speed testing
To optimize the page speed, clear all levels of cache if you have installed the WP Rocket plugin. Then check the Google PageSpeed for insights and compare it to what you have found before.
Deactivate Dynamic Widgets
While the WooCommerce plugin comes with many attractive dynamic widgets, having these widgets on the dashboard will impact the site's loading speed. It is recommended to disable this to reduce the server load and speed up the website loading time .
Final Verdict
All in all, optimizing through AJAX add to cart WooCommerce button offers a seamless shopping experience for your customers. Deactivating cart fragmentation on non-essential pages, selectively disabling WooCommerce styles and scripts, and using caching mechanisms can significantly reduce AJAX-related delays. Regular page speed testing and deactivating features like Dynamic Widgets further improve site performance.
