33

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

Improve this question
4
  • Do you want to completely disable their scripting, or override a particular behavior or event? Commented Aug 7, 2012 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. Commented Aug 7, 2012 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 github.com/woothemes/woocommerce/blob/master/assets/js/frontend/…. I haven't worked with that plugin, but I assume you could manually modify that file, too. Commented Aug 7, 2012 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: gregrickaby.com/remove-woocommerce-styles-and-scripts Commented Oct 4, 2015 at 2:53

3 Answers 3

Reset to default
40

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');
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

it's ''better'' to enqueue with the same name, so you won't break any dependency it may have.
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.
Could you please check my question also wordpress.stackexchange.com/questions/215238/…
36

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'; }
Improve this answer

3 Comments

I liked the $wp_scripts option because that way I don't disturb / need to bother about script dependencies or version etc. +1
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!
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.
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' );
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.