31

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

Sebastien
  • 2,607
  • 9
  • 30
  • 40
  • Do you want to completely disable their scripting, or override a particular behavior or event? – Matthew Blancarte Aug 07 '12 at 20:15
  • Well I was going to completely overwrite the javascript file (add-to-cart-variation.js) because there are quite a few changes I need to make. – Sebastien Aug 07 '12 at 20:36
  • 2
    In that file, it looks like there are only two events being bound on doc ready. You could just unbind them in your own script. line-4, and line-216 https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/add-to-cart-variation.js. I haven't worked with that plugin, but I assume you could manually modify that file, too. – Matthew Blancarte Aug 07 '12 at 20:53
  • I needed to dequeue them all. This has nice list of ALL the included woocommerce frontend css and javascript files. This is what I needed to work with: http://gregrickaby.com/remove-woocommerce-styles-and-scripts/ – i_a Oct 04 '15 at 02:53

3 Answers3

39

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');
Joko Wandiro
  • 1,957
  • 1
  • 18
  • 28
Simon Unger
  • 421
  • 5
  • 4
  • 5
    it's ''better'' to enqueue with the same name, so you won't break any dependency it may have. – Leonel Dec 13 '12 at 13:20
  • 2
    If you do try to enqueue with the same handle then original file still gets enqueued unless you deregister the original handle with `wp_dequeue_script()` before you re-enqueue it. – cfx Sep 01 '14 at 18:16
  • Could you please check my question also http://wordpress.stackexchange.com/questions/215238/how-to-add-quick-edit-in-woocommerce-order-section –  Jan 23 '16 at 13:40
35

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';
    }
Danijel
  • 12,408
  • 5
  • 38
  • 54
  • 3
    I liked the `$wp_scripts` option because that way I don't disturb / need to bother about script dependencies or version etc. +1 – Vivek Athalye Oct 04 '17 at 05:49
  • 2
    This is seriously such an amazing answer! I had no idea you could work with or that there even was an `$wp_scripts` object that you could modify. This is amazing! I want to buy you a beer! – Radmation Mar 09 '18 at 22:11
  • 2
    Thanks! Actually, my copied script (wc-single-product) isn't working without localized data so this fixed a big issue for me :) Note that you need to use "get_stylesheet_directory_uri" instead of "get_template_directory_uri" in a child theme. – Chaoste Sep 11 '20 at 10:10
2

Add this section to your function.php

function themeslug_enqueue_script() {
wp_enqueue_script( 'add-to-cart-variation', get_bloginfo( 'url' ). '/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
John Paul
  • 12,196
  • 6
  • 55
  • 75
Ritcher
  • 21
  • 1