Add custom css class to WooCommerce checkout fields

Question

I would like to be able to add a custom CSS class to my WooCommerce checkout fields. I\'m using twitter Bootstrap and I would like to be able to use their .form-control clas

Answer 1

I am fixed the issue by defining a custom function. The logic is taken directly from wc-template-functions.php (I am not sure if this is the right way but it does solve the problem).

/*
 * Custom form field function for Bootstrap 3
 */
function bootstrap_woocommerce_form_field( $key, $args, $value = null ) {
    $defaults = array(
        'type'              => 'text',
        'label'             => '',
        'placeholder'       => '',
        'maxlength'         => false,
        'required'          => false,
        'class'             => array(),
        'label_class'       => array(),
        'input_class'       => array(),
        'return'            => false,
        'options'           => array(),
        'custom_attributes' => array(),
        'validate'          => array(),
        'default'           => '',
    );

    $args = wp_parse_args( $args, $defaults  );

    if ( ( ! empty( $args['clear'] ) ) ) $after = '
'; else $after = '';

    if ( $args['required'] ) {
        $args['class'][] = 'validate-required';
        $required = ' *';
    } else {
        $required = '';
    }

    $args['maxlength'] = ( $args['maxlength'] ) ? 'maxlength="' . absint( $args['maxlength'] ) . '"' : '';

    if ( is_string( $args['label_class'] ) )
        $args['label_class'] = array( $args['label_class'] );

    if ( is_null( $value ) )
        $value = $args['default'];

    // Custom attribute handling
    $custom_attributes = array();

    if ( ! empty( $args['custom_attributes'] ) && is_array( $args['custom_attributes'] ) )
        foreach ( $args['custom_attributes'] as $attribute => $attribute_value )
            $custom_attributes[] = esc_attr( $attribute ) . '="' . esc_attr( $attribute_value ) . '"';

    if ( ! empty( $args['validate'] ) )
        foreach( $args['validate'] as $validate )
            $args['class'][] = 'validate-' . $validate;

    switch ( $args['type'] ) {
    case "country" :

        $countries = $key == 'shipping_country' ? WC()->countries->get_shipping_countries() : WC()->countries->get_allowed_countries();

        if ( sizeof( $countries ) == 1 ) {

            $field = '
';

            if ( $args['label'] )
                $field .= '' . $args['label']  . '';

            $field .= '' . current( array_values( $countries ) ) . '';

            $field .= '';

            $field .= '
' . $after;

        } else {

            $field = '
'
                    . '' . $args['label'] . $required  . ''
                    . ''
                    . ''.__( 'Select a country…', 'woocommerce' ) .'';

            foreach ( $countries as $ckey => $cvalue )
                $field .= ''.__( $cvalue, 'woocommerce' ) .'';

            $field .= '';

            $field .= '';

            $field .= '
' . $after;

        }

        break;
    case "state" :

        /* Get Country */
        $country_key = $key == 'billing_state'? 'billing_country' : 'shipping_country';

        if ( isset( $_POST[ $country_key ] ) ) {
            $current_cc = wc_clean( $_POST[ $country_key ] );
        } elseif ( is_user_logged_in() ) {
            $current_cc = get_user_meta( get_current_user_id() , $country_key, true );
            if ( ! $current_cc) {
                $current_cc = apply_filters('default_checkout_country', (WC()->customer->get_country()) ? WC()->customer->get_country() : WC()->countries->get_base_country());
            }
        } elseif ( $country_key == 'billing_country' ) {
            $current_cc = apply_filters('default_checkout_country', (WC()->customer->get_country()) ? WC()->customer->get_country() : WC()->countries->get_base_country());
        } else {
            $current_cc = apply_filters('default_checkout_country', (WC()->customer->get_shipping_country()) ? WC()->customer->get_shipping_country() : WC()->countries->get_base_country());
        }

        $states = WC()->countries->get_states( $current_cc );

        if ( is_array( $states ) && empty( $states ) ) {

            $field  = '
';

            if ( $args['label'] )
                $field .= '' . $args['label'] . $required . '';
            $field .= '';
            $field .= '
' . $after;

        } elseif ( is_array( $states ) ) {

            $field  = '
';

            if ( $args['label'] )
                $field .= '' . $args['label']. $required . '';
            $field .= '
                '.__( 'Select a state…', 'woocommerce' ) .'';

            foreach ( $states as $ckey => $cvalue )
                $field .= ''.__( $cvalue, 'woocommerce' ) .'';

            $field .= '';
            $field .= '
' . $after;

        } else {

            $field  = '
';

            if ( $args['label'] )
                $field .= '' . $args['label']. $required . '';
            $field .= '';
            $field .= '
' . $after;

        }

        break;
    case "textarea" :

        $field = '
';

        if ( $args['label'] )
            $field .= '' . $args['label']. $required  . '';

        $field .= ''. esc_textarea( $value  ) .'
            
' . $after;

        break;
    case "checkbox" :

        $field = '

                
                    '
                    . $args['label'] . $required . '
            
' . $after;

        break;
    case "password" :

        $field = '
';

        if ( $args['label'] )
            $field .= '' . $args['label']. $required . '';

        $field .= '
            
' . $after;

        break;
    case "text" :

        $field = '
';

        if ( $args['label'] )
            $field .= '' . $args['label'] . $required . '';

        $field .= '
            
' . $after;

        break;
    case "select" :

        $options = '';

        if ( ! empty( $args['options'] ) )
            foreach ( $args['options'] as $option_key => $option_text )
                $options .= '' . esc_attr( $option_text ) .'';

            $field = '
';

            if ( $args['label'] )
                $field .= '' . $args['label']. $required . '';

            $field .= '
                    ' . $options . '
                
            
' . $after;

        break;
    default :

        $field = apply_filters( 'woocommerce_form_field_' . $args['type'], '', $key, $args, $value );

        break;
    }

    if ( $args['return'] ) return $field; else echo $field;
}

Don't forget to replace all occurrences of woocommerce_form_field with bootstrap_woocommerce_form_field Hope it helps!