Hack: Have a Checkbox on the Checkout Page Which Updates the Order Totals

Adding a checkbox the the checkout page is easy. However, making it alter the order totals via AJAX is whole different game. In this post I will show you a little trick which will simplify this rather difficult task.

Regarding adding a checkbox to the checkout page, you can go over the following customizing checkout fields using actions and filters tutorial, or just install one out of the several plugins that enables that.

Assuming you wish your added checkbox to have the functionality of altering/updating the order totals via AJAX (since the order totals change via AJAX by default) – then searching for a solution online brings up a few and complex solutions. Instead, we are going to use WooCommerce core functionality to achieve this goal.

Looking over at the woocommerce/assets/js/frontend/checkout.js link, under the “Inputs/selects which update totals” section, we have the following code:

We can see that the following CSS selectors “select.shipping_method, input[name^=shipping_method], #ship-to-different-address input, .update_totals_on_change select, .update_totals_on_change input[type=radio]" are all triggering the update totals AJAX mechanism.

Therefore, in order for our checkbox that we’ve just added to have the updating order functionality, we could have its name attribute begin with shipping_method. For example, we could have our checkbox name attribute set as name="shipping_method_yf".

On the backend, in order to know if the checkbox was actually checked or not and create commands based on this information, we could access the POST data sent by the AJAX function triggered by the trigger_update_checkout trigger via the woocommerce_checkout_update_order_review action hook.

For example, we could create the following function:

Notes regarding this solution:

  1. This method could be easily applied to other input elements, or rather elements affected by the input, and change JS events.
  2. I’ve created a pull request to the WooCommerce project asking to include a general [name^=update_order] CSS selector, so that there will be a standardized way to add input types to the checkout page that can modify the order totals.

I hope you find this hack helpful.

Cheers,
Yaniv

Published by

Yaniv Friedensohn

Yaniv Friedensohn

Yaniv Friedensohn is a marketing developer specializing in paid advertising (especially Facebook advertising). Yaniv tries to merge his programming capabilities and online marketing knowledge towards maximizing marketing performance. You can contact him at [email protected]

  • Felix Kipyego

    This article was very helpful. I have tested it and it worked!!! Thanks a lot

  • This worked for me too!

  • rainny Azusa

    Thank you! That’s very helpful.

  • Madhav Sharma

    Hi Yaniv,

    I am working on the similar kind of functionality, i need a user input price field on the checkout. and need to update the total based on the that, can you please suggest me how to achieve this.

    Thanks

  • MarcPerel

    Great post thank you Yaniv!

  • pipoulito

    it seems great but whit is the code to modify the order total price ? thanks