• Resolved nickgeorghiou

    (@nickgeorghiou)


    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 use the select2 style for my custom field?

    Thanks for any advice

    https://wordpress.org/plugins/woocommerce/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi @nickgeorghiou, you may need to define class option in your custom field, something liked below:

    // Hook in
    add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
    
    function custom_override_checkout_fields( $fields ) {
         $fields['shipping']['shipping_place'] = array(
            'label'     => __('Shipping Place', 'woocommerce'),
        'placeholder'   => _x('Shippping Place', 'placeholder', 'woocommerce'),
        'required'  => false,
        'class'     => array('select2'),
        'clear'     => true
         );
    
         return $fields;
    }

    Official doc to customize checkout fields for WooComemrce.

    Thread Starter nickgeorghiou

    (@nickgeorghiou)

    Hi,

    Thanks for your response. Yes this is what I have tried but it doesn’t work. The ‘class’ field seems to get used on the <p> element that wraps the label and select elements that are generated for the field rather than on the select element. I also tried using the ‘input_class’ field (not documented) but this didn’t work either.

    Further to the above, I have tried disabling all other plugins in case one of the other plugins is loading chosen, but no luck there either.

    Any other suggestions would be greatly appreciated.

    Thread Starter nickgeorghiou

    (@nickgeorghiou)

    Hi again,
    I have found the issue. Chosen was being loaded by some borrowed template code.

    Once removing this the correct styling is applied.

    Thanks

    @nickgeorghiou currently I’m struggling the same problem as your were, I would like to know the specific error that you have encountered.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom checkout fields dropdown force select2’ is closed to new replies.