How to Refresh Checkout Page WooCommerce

WooCommerce is a powerful plugin for WordPress that allows you to sell anything. If you are selling physical goods, it is important to understand all of the shipping options available for you. It is also important to learn how to configure them to suit your needs.

Table of Contents

WooCommerce has a lot of shipping options such as real-time cost calculations, extensions to make checking out easier, and at-home label printing.

WooCommerce Refresh Checkout Page

In this brief tutorial, I will share a custom code snippet to update the shipping information on the checkout page automatically. To achieve this, we need to trigger the update_checkout function. Adding the custom code will create a good user experience on the checkout page.

Here are the steps you need to follow:

Log into your WordPress site and access the dashboard as the admin user
Add the following code to the JavaScript file:

<script type="text/javascript">

  /* to update info on your checkout page, you need to trigger the update_checkout function

     so add this in your javascript file for your theme or plugin

  */

    jQuery('body').trigger('update_checkout');

    /* what this does is update the order review table but what it doesn't do is update shipping costs;

     the calculate_shipping function of your shipping class will not be called again;

     so if you were like me and you made a shipping method plugin, and you had to change costs based on the payment method, then

     this is the only way to ensure it does just that

  */

</script>

From the dashboard menu, click on the Appearance Menu > Theme Editor Menu. When the theme editor page is opened, look for the theme functions file with the extension functions.php. Open this functions file to add the function to refresh the WooCommerce checkout page automatically.

<?php

# add this in your plugin file, and that's it, the calculate_shipping method of your shipping plugin class will be called again

function action_woocommerce_checkout_update_order_review($array, $int)

{

WC()->cart->calculate_shipping();

return;

}

add_action('woocommerce_checkout_update_order_review', 'action_woocommerce_checkout_update_order_review', 10, 2);

?>

This code will automatically update the shipping costs on the checkout page using AJAX.

Conclusion

In summary, you have seen how to update the shipping costs using AJAX. If you are not comfortable with editing code, I recommend using a plugin. Errors caused when editing these files could break your site.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Refresh Checkout Page WooCommerce

WooCommerce Refresh Checkout Page

Conclusion

Similar Articles

Related