Skip to main content

remove jquery select woocommerce

Disable WooCommerce state select field from using Select2 JQuery

So I set up an e-commerce site for a client using WordPress and WooCommerce and used a theme called Flatsome. It’s a pretty cool theme, probably one of the best themes on WooCommerce. Mind you, I don’t really like using themes, I think most themes are too bloated, have WAY too many settings and also restrict you with their shortcodes should you decide to move to a new theme, anyway – that argument is for another day.

Basically, my client was having problems with a lot of her customers not being able to select the state dropdown menu on their iPads and iPhones – so there may be some sort of issue on that end, however, the easiest fix of them all was to just disable the fancy Select2 coding so that the drop down is just a standard┬ádrop down menu.

Add this to your functions.php

Simply add this code to your functions file and your WooCommerce will now use standard drop downs.

add_action( 'wp_enqueue_scripts', 'agentwp_dequeue_stylesandscripts', 100 );
function agentwp_dequeue_stylesandscripts() {
if ( class_exists( 'woocommerce' ) ) {
wp_dequeue_style( 'select2' );
wp_deregister_style( 'select2' );
wp_dequeue_script( 'select2');
wp_deregister_script('select2');
}
}

Clear cache

Hope that helps you with your WooCommerce woes!

UPDATE 13/03/2018

Try this code for the latest WooCommerce as of 3/3/2018.

// Remove CSS and/or JS for Select2 used by WooCommerce, see https://gist.github.com/Willem-Siebe/c6d798ccba249d5bf080.

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

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

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

19 thoughts to “Disable WooCommerce state select field from using Select2 JQuery”

  1. PERFECT!! Has Problems with WooCommerce Checkout Dropdowns for country. The payment could not be processed because the country was not selected.

    Great Great functions.php Job! Thanks !!!

  2. Is there anyway to replace ‘Select an option’ with a state name froom woocommerce checkout page. Also needed to show other text when click the select box

  3. Sheesh, hours of searching and so thankful I found this post. Will try your fix and report back.

    36% of our traffic is from a mobile Apple device. We too use flatsome, and thought it was because fo the theme. But we created a brand-new installation, removed all default plugins except Woo, created a single basic test product….. Turns out this is actually WooCommerce (not flatsome) default behavior.

    I’ve emailed Woo about it and haven’t heard back.

    It’s amazing to think this one feature can be causing many millions of lost dollars in revenue across hundreds of thousands of websites. The conversion-killing impact of this feature is ridiculous.

  4. I was using this but the fix seems to have stopped working after a recent Woocommerce update. Select2 seems to have forced its way back in. Has anyone else experienced this?

    1. // Remove CSS and/or JS for Select2 used by WooCommerce, see https://gist.github.com/Willem-Siebe/c6d798ccba249d5bf080.

      add_action( ‘wp_enqueue_scripts’, ‘wsis_dequeue_stylesandscripts_select2’, 100 );

      function wsis_dequeue_stylesandscripts_select2() {
      if ( class_exists( ‘woocommerce’ ) ) {
      wp_dequeue_style( ‘selectWoo’ );
      wp_deregister_style( ‘selectWoo’ );

      wp_dequeue_script( ‘selectWoo’);
      wp_deregister_script(‘selectWoo’);
      }
      }

  5. In the latest version of WooCommerce, I needed the following:
    if ( class_exists( ‘woocommerce’ ) ) {
    wp_dequeue_style( ‘select2’ );
    wp_deregister_style( ‘select2’ );
    wp_dequeue_script( ‘select2’);
    wp_deregister_script(‘select2’);
    wp_dequeue_script( ‘selectWoo’);
    wp_deregister_script(‘selectWoo’);
    }

  6. Thank you so much for the updated code! Select2 is a nightmare to use on mobile devices, so we had it disabled, but after the latest WC updates the old fix no longer worked. One quick google search and I found the new solution. Thanks again!

  7. This is just awesome! Thanks!
    I am using Woocommerce 3.5.4 and WordPress 5.0.3. This fixes the State dropdown from being a very thin line with a “arrow” like at the end of it to a full size list UI component with a placeholder. This was broken on Chrome and now this is fixed.

    add_action( ‘wp_enqueue_scripts’, ‘wsis_dequeue_stylesandscripts_select2’, 100 );

    function wsis_dequeue_stylesandscripts_select2() {
    if ( class_exists( ‘woocommerce’ ) ) {
    wp_dequeue_style( ‘selectWoo’ );
    wp_deregister_style( ‘selectWoo’ );

    wp_dequeue_script( ‘selectWoo’);
    wp_deregister_script(‘selectWoo’);
    }
    }

Leave a Reply