Override WooCommerce Frontend Javascript

Question

Can someone guide me as to what is the proper method of overriding WooCommerce core Javascript files, specifically frontend files. I have not found any documentation on this and looking at the code, the path to the frontend script files is hard coded in the plugin so I doubt that placing an assets folder in my theme will do anything.

What is the cleanest way to to this so that I can load a file located in my theme dir?

Thanks

Answer 1

I had the same problem except with add-to-cart.js. Simple solution is to DEQUEUE the woocommerce script and ENQUEUE your replacement. In my case I added the following to my functions.php:

wp_dequeue_script('wc-add-to-cart'); wp_enqueue_script( 'wc-add-to-cart', get_bloginfo( 'stylesheet_directory' ). '/js/add-to-cart-multi.js' , array( 'jquery' ), false, true ); 

You would want to DEQUEUE the 'wc-add-to-cart-variation' script. I don't think you have to ENQUEUE with the same name, but I couldn't see a reason not to.

Hope this helps.

If you're using WordPress Version 4.0.1 and WooCommerce Version 2.2.10. You can use the following scripts:

  wp_deregister_script('wc-add-to-cart'); wp_register_script('wc-add-to-cart', get_bloginfo( 'stylesheet_directory' ). '/js/add-to-cart-multi.js' , array( 'jquery' ), WC_VERSION, TRUE); wp_enqueue_script('wc-add-to-cart');  

Answer 2

WooCommerce loads frontend scripts and styles in class-wc-frontend-scripts.php file, and there can be found how the scripts are registered, enqueued, localized and dependencies.

The preferred place to enqueue scripts in Wordpress is the wp_enqueue_scripts action hook, because that is the moment after Wordpress is fully loaded but before any output is made. And also I like to enqueue all my related script and styles in one section of code.

When you want to completely remove some scripts, calling either wp_deregister_script() or wp_dequeue_script() is enough. But sometimes if want to make some changes and leave the existing dependencies, variables and localization there is a problem because plugins are loaded before themes. So enqueue functions will not work as you would expect. Simple wp_dequeue_script() => wp_enqueue_script() will not work, wp_deregister_script() => wp_register_script() will work, but localized data will be lost.

---

This can be solved by working directly with $wp_scripts global object that contains and manages all the scripts loaded through wp_enqueue_script() or registered with wp_register_script():

    add_action( 'wp_enqueue_scripts', 'load_theme_scripts' );      function load_theme_scripts() {         global $wp_scripts;          $wp_scripts->registered[ 'wc-add-to-cart' ]->src = get_template_directory_uri() . '/woocommerce/js/wc-add-to-cart.js';     }