Fügen Sie benutzerdefinierte css-Klasse für WooCommerce Kasse Felder

Als @Erdnüsse darauf hingewiesen, was, wenn wir wollen hinzufügen von CSS-Klassen an bestimmte input-Typen nur?

Nach dem Experimentieren mit den Lösungen, die hier gepostet so weit, (Dank an alle!), Ich habe kam mit einem mod mit einem einfachen "switch case", in der die Logik stammt aus /woocommerce/includes/wc-template-functions.php. Die Funktion, die es uns ermöglichen, Ziel-alle-input-Typen auf einmal, werden Sie den Standard-input-Typen oder sogar benutzerdefinierte diejenigen.

Es gibt keine Notwendigkeit, zu schreiben, die woocommerce_form_field Funktion ändern Sie einfach die $defaults args für die input-Typen. Es gilt zu erwähnen, dass die Funktion auch erlauben, uns zu fügen Sie viel mehr als nur die css-Klassen auf die Felder.

-- So, hier ist die Funktion --

/*********************************************************************************************/
/** WooCommerce - Modify each individual input type $args defaults /**
/*********************************************************************************************/

add_filter('woocommerce_form_field_args','wc_form_field_args',10,3);

function wc_form_field_args( $args, $key, $value = null ) {

/*********************************************************************************************/
/** This is not meant to be here, but it serves as a reference
/** of what is possible to be changed. /**

$defaults = array(
    'type'              => 'text',
    'label'             => '',
    'description'       => '',
    'placeholder'       => '',
    'maxlength'         => false,
    'required'          => false,
    'id'                => $key,
    'class'             => array(),
    'label_class'       => array(),
    'input_class'       => array(),
    'return'            => false,
    'options'           => array(),
    'custom_attributes' => array(),
    'validate'          => array(),
    'default'           => '',
);
/*********************************************************************************************/

//Start field type switch case

switch ( $args['type'] ) {

    case "select" :  /* Targets all select input type elements, except the country and state select input types */
        $args['class'][] = 'form-group'; //Add a class to the field's html element wrapper - woocommerce input types (fields) are often wrapped within a <p></p> tag  
        $args['input_class'] = array('form-control', 'input-lg'); //Add a class to the form input itself
        //$args['custom_attributes']['data-plugin'] = 'select2';
        $args['label_class'] = array('control-label');
        $args['custom_attributes'] = array( 'data-plugin' => 'select2', 'data-allow-clear' => 'true', 'aria-hidden' => 'true',  ); //Add custom data attributes to the form input itself
    break;

    case 'country' : /* By default WooCommerce will populate a select with the country names - $args defined for this specific input type targets only the country select element */
        $args['class'][] = 'form-group single-country';
        $args['label_class'] = array('control-label');
    break;

    case "state" : /* By default WooCommerce will populate a select with state names - $args defined for this specific input type targets only the country select element */
        $args['class'][] = 'form-group'; //Add class to the field's html element wrapper 
        $args['input_class'] = array('form-control', 'input-lg'); //add class to the form input itself
        //$args['custom_attributes']['data-plugin'] = 'select2';
        $args['label_class'] = array('control-label');
        $args['custom_attributes'] = array( 'data-plugin' => 'select2', 'data-allow-clear' => 'true', 'aria-hidden' => 'true',  );
    break;


    case "password" :
    case "text" :
    case "email" :
    case "tel" :
    case "number" :
        $args['class'][] = 'form-group';
        //$args['input_class'][] = 'form-control input-lg'; //will return an array of classes, the same as bellow
        $args['input_class'] = array('form-control', 'input-lg');
        $args['label_class'] = array('control-label');
    break;

    case 'textarea' :
        $args['input_class'] = array('form-control', 'input-lg');
        $args['label_class'] = array('control-label');
    break;

    case 'checkbox' :  
    break;

    case 'radio' :
    break;

    default :
        $args['class'][] = 'form-group';
        $args['input_class'] = array('form-control', 'input-lg');
        $args['label_class'] = array('control-label');
    break;
    }

    return $args;
}

Die obige Funktion vollständig gelöst ist das Problem der Ausrichtung des checkout-Formulars Eingänge alle auf einmal, das ist wirklich straight forward für checkout-Formular Standard-input-Typen oder sogar eigene neue. Es scheint nicht möglich zu sein, obwohl, drucken jeden input type html-Ausgabe ohne die Schaffung einer neuen Funktion als @abhisek zeigt auf seine Antwort.

Bonus

Scheint es, dass die Funktion möglicherweise auch einen Einfluss auf andere Formen von Feldern gedruckt von WooCommerce Funktionen oder templates außerhalb der checkout-Seite.
Ich habe es geschafft, bedingt die Funktion anwenden, nur, wenn auf der checkout-Seite mit Hilfe der is_page() Funktion. Ihre checkout-Seite kann einen anderen slug, so verändern, dass zu reflektieren, Sie entsprechend.

Wenn Sie müssen, um die Funktion nur für den checkout-Seite gehen Sie wie folgt vor:

Kommentar add_filter()

//add_filter('woocommerce_form_field_args','wc_form_field_args', 10, 3);

Und verwenden add_action statt

add_action('woocommerce_form_field_args', 'wc_form_field_args', 10, 3);

function wc_form_field_args( $args, $key, $value = null ) {

...

//Right after 
    return $args;

//Place the following

if ( !is_page('checkout') ) {
  add_filter('woocommerce_form_field_args','wc_form_field_args', 10, 3);
} else {
  remove_filter('woocommerce_form_field_args','wc_form_field_args', 10, 3);
}


}

Nach, dass die Funktion nur auf der checkout-Seite form.

InformationsquelleAutor Adriano Monecchi