How to unload select2 script/styles loaded by new WooCommerce 2.3.x?

Question

we are theme developers and we already use select2 (http://select2.github.io/) script for SELECT boxes in HTML in our wordpress theme. New WooCommerce 2.3.x that just relased now use select2 scripts too. But they override its styles with its own (most of all with !important tags) in many different ways.

We can't redeclare all of their CSS changes with !important rules, this will be a lot of CSS mess that we don't like. Also now our JS script loaded 2 times and conflicts sometimes too (because woocommerce loads its own select2 js).

My question is what is a best way to deactivate woocommerce select2 CSS and JS files in our theme functions? We want to use our script version and our styles file (for woocommerce select elements too).

I tryed to use wp_dequeue_script, wp_deregister_script and the same functions available for styles, but this does not help. As I see woocommerce add scripts/css AFTER our theme already initialized and we can't deactivate it.

Thanks.

This is code that loaded in /includes/class-wc-frontend-scripts.php that I need to disable from theme functions:

self::register_script( 'select2', $assets_path . 'js/select2/select2' . $suffix . '.js', array( 'jquery' ), '3.5.2' );
self::enqueue_script( 'select2' );
wp_enqueue_style( 'select2', $assets_path . 'css/select2.css' );

How to unload this CSS/JS files in theme functions, without changing original WooCommerce files?

Solution 1

I found a solution:

add_action( 'wp_enqueue_scripts', 'mgt_dequeue_stylesandscripts', 100 );

function mgt_dequeue_stylesandscripts() {
    if ( class_exists( 'woocommerce' ) ) {
        wp_dequeue_style( 'select2' );
        wp_deregister_style( 'select2' );

        wp_dequeue_script( 'select2');
        wp_deregister_script('select2');

    } 
} 

Solution 2

There's been some recent changes to WooCommerce (v 3.2.1) in which they forked the select2 script and so the code above by @Dmitry is no longer functional. The new code which worked for me is below..

add_action( 'wp_enqueue_scripts', 'agentwp_dequeue_stylesandscripts', 100 );

function agentwp_dequeue_stylesandscripts() {
    if ( class_exists( 'woocommerce' ) ) {
    wp_dequeue_style( 'selectWoo' );
    wp_deregister_style( 'selectWoo' );

    wp_dequeue_script( 'selectWoo');
    wp_deregister_script('selectWoo');

   }
}

Solution 3

For anyone getting a duplication of the select fields. There appears to be an issue due to Woocommerce making a call to:

?wc-ajax=update_order_review

after the page is loaded, which then introduces a select2 element just after each select element:

<span class="select2 select2-container ... >

This span appears under the dropdown and contains the currently chosen option.

Duplicate dropdown element

I tried adding wp_dequeue_script( 'wc-checkout' ); to his code, which did stop the span from appearing, but also stopped other functionality, which was needed.

In the end, I hid the span with css:

.woocommerce-checkout .select2-container {
    display:none;
}