Title: Checkout fields dropdown force using 'select2' instead 'chosen'
Last modified: August 31, 2016

---

# Checkout fields dropdown force using 'select2' instead 'chosen'

 *  [Postalindo](https://wordpress.org/support/users/postalin/)
 * (@postalin)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/checkout-fields-dropdown-force-using-select2-instead-chosen/)
 * I am using the woocommerce filter “woocommerce_checkout_fields” to add a custom
   select field to my checkout billing page. However it is styled as a ‘chosen’ 
   select field instead of ‘select2’.
 * This is not very nice since on the same page the State field is using a ‘select2’
   styled field so the page shows two different types of controls and doesn’t look
   good.
 * Is there a way to force woocommerce to force use the select2 style for my custom
   field?
 * Thanks for any advice
 * Website: [http://postalindo.com/cart/checkout/](http://postalindo.com/cart/checkout/)
   
   Plugin: [https://wordpress.org/plugins/woocommerce/](https://wordpress.org/plugins/woocommerce/)

Viewing 1 replies (of 1 total)

 *  [Adriano Monecchi](https://wordpress.org/support/users/designroom/)
 * (@designroom)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/checkout-fields-dropdown-force-using-select2-instead-chosen/#post-7336615)
 * You’d need a helper function to allow you to add a class or other atributes to
   your fields on checkout page. I’ve created a function that allows you to manage
   any woocommerce checkout field or custom field classes, please check it out here:
   [http://stackoverflow.com/questions/23943791/add-custom-css-class-to-woocommerce-checkout-fields/36724593#36724593](http://stackoverflow.com/questions/23943791/add-custom-css-class-to-woocommerce-checkout-fields/36724593#36724593)
 * After getting your fields with the right classes, then you’d need a small piece
   of js to trigger the select2 plugin
 * E.g:
 *     ```
       jQuery(document).ready(function($) {
       // If the select2 class exists, then fire the select 2 function
       if (jQuery(".select2").length > 0)
          $("select.select2").select2({ // if using css class
        	width: "100%",
        	//minimumResultsForSearch: Infinity,  // hide select 2 search field
           allowClear: true
          });
       });
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘Checkout fields dropdown force using 'select2' instead 'chosen'’ is closed
to new replies.

## Tags

 * [select2](https://wordpress.org/support/topic-tag/select2/)
 * [shipping](https://wordpress.org/support/topic-tag/shipping/)

 * 2 replies
 * 3 participants
 * Last reply from: [magdev](https://wordpress.org/support/users/magdev/)
 * Last activity: [9 years, 8 months ago](https://wordpress.org/support/topic/checkout-fields-dropdown-force-using-select2-instead-chosen/#post-8200723)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics