Answer a question

Where to find a complete list of Javascript (JQuery) events that fire on the WooCommerce admin page?

For example, if you wanted to run a Javascript function after adding a new attribute to a product from the product edit page, which event should you use?

The answer to this question only reports events in the WooCommerce frontend.

Answers

Javascript events for WooCommerce admin can be found in the directory: /wp-content/plugins/woocommerce/assets/js/admin

If you want to use JQuery in the Wordpress admin remember to load your script after JQuery is loaded.

Look at these answers:

• How can I include JavaScript that use jQuery on admin side
• get_template_directory_uri pointing to parent theme not child theme

Make sure you set the $in_footer parameter to true for the wp_enqueue_script function otherwise the events may not be triggered in the Wordpress admin pages.

For more details:

• jQuery.on() does not work in WordPress admin panel

META BOXES ORDER

• quantity_changed triggered when the quantity of the order item line changes (and after updating the totals and taxes of the line)
• order-totals-recalculate-before triggered before sending Ajax request to recalculate totals (after clicking "Recalculate")
• order-totals-recalculate-success triggered when the Ajax request was successful (after clicking "Recalculate")
• order-totals-recalculate-complete triggered when the Ajax request has completed (after clicking "Recalculate")
• items_saved triggered after clicking on "Save" and sent the Ajax request
• refund_quantity_changed triggered when you change the quantity of a product to be refunded

META BOXES PRODUCT VARIATON

• wc-enhanced-select-init run actions when variations is loaded (on product edit page)
• woocommerce_variations_loaded triggered after loading variations via Ajax (on product edit page)
• woocommerce_variations_saved triggered after saving changes to variations via Ajax
• woocommerce_variations_save_variations_button triggered after clicking on the "Save changes" button
• woocommerce_variations_save_variations_on_submit triggered after clicking on the "Update" button instead of "Save changes"
• woocommerce_variations_added triggered after adding a variation
• woocommerce_variations_removed triggered after removing a variation
• woocommerce_variations_input_changed triggered after changing any input fields of the variation. This event is triggered after adding the variation-needs-update class and enabling the "Save changes" button (removing the disabled attribute)
• woocommerce_variations_defaults_changed triggered after changing the select "Default Form Values"

META BOXES PRODUCT

• woocommerce-product-type-change triggered when the select "Product Type" changes
• woocommerce_added_attribute triggered after adding an attribute row via the "Add" button
• reload triggered after reloading the variations panel

SETTINGS

• updateMoveButtons triggered after sorting payment methods or shipping methods

USAGE

Use the admin_enqueue_scripts hook to queue a .js file to run on all admin pages.

In my example I used get_stylesheet_directory_uri() to get the url of the child theme. To get the URI of the root theme you should use get_template_directory_uri().

// queue the "admin-scripts.js" script for all admin pages
add_action( 'admin_enqueue_scripts', 'add_admin_scripts' );
function add_admin_scripts() {
   wp_enqueue_script( 
      'custom_admin_script',
      get_stylesheet_directory_uri() . '/js/admin/admin-scripts.js',
      array('jquery'),
      '1.0',
      true
   );
}

Then you will need to create an admin-scripts.js file and upload it to the directory: /themes/child-theme/js/admin/admin-scripts.js.

jQuery(function($){
    // triggered when the product type changes
    $('body').on('woocommerce-product-type-change',function(){
        // run code
    });

    // triggered when the quantity of the order item line changes
    $('body').on('quantity_changed',function(){
        // run code
    });

    // ...
});