将自定义css类添加到WooCommerce结帐字段

正如@Peanuts指出的那样,如果我们只想将CSS类添加到某些输入类型呢？

在试验到目前为止发布的解决方案之后,(感谢大家!),我想出了一个使用简单"开关盒"的mod,其中逻辑取自/woocommerce/includes/wc-template-functions.php.该函数允许我们一次定位所有输入类型,无论是默认输入类型还是自定义输入类型.

没有必要重写woocommerce_form_field函数来简单地更改$defaults输入类型的args.有必要提一下,该函数还允许我们向字段添加不仅仅是css类.

- 所以这是功能 -

/*********************************************************************************************/
/** 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;
}

上面的函数完全解决了同时定位结帐表单输入的问题,这对于结帐表单默认输入类型甚至是自定义新输入类型来说非常简单.似乎不可能打印每个输入类型的html输出,而不创建@abhisek在他的答案中显示的新功能.

奖金

看来该功能还可能影响WooCommerce的功能或结帐页面外的模板打印的其他表单字段.我已经设法通过使用该功能仅在结账页面上有条件地应用该is_page()功能.您的结帐页面可能有不同的slug,因此请更改它以相应地反映它.

如果您只需要为结帐页面应用该功能,请执行以下操作:

评论add_filter()

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

并使用add_action代替

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);
}


}

之后,该功能只会影响结帐页面.

icc97的答案几乎就在那里,但不起作用.

我拿了icc97的答案,并调试了它:

add_filter('woocommerce_checkout_fields', 'addBootstrapToCheckoutFields' );
public function addBootstrapToCheckoutFields($fields) {
    foreach ($fields as &$fieldset) {
        foreach ($fieldset as &$field) {
            // if you want to add the form-group class around the label and the input
            $field['class'][] = 'form-group'; 

            // add form-control to the actual input
            $field['input_class'][] = 'form-control';
        }
    }
    return $fields;
}