CODEWITHSUNDEEP
javascriptwordpressoverridingwoocommerce
Sebastien
Sebastien

Reputation: 2679

Override WooCommerce Frontend Javascript

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

Upvotes: 33

Views: 39015

Answers (3)

Danijel
Danijel

Reputation: 12719

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';
    }

Upvotes: 36

Simon Unger
Simon Unger

Reputation: 431

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');

Upvotes: 40

Ritcher
Ritcher

Reputation: 21

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' );

Upvotes: 2

Related Questions