Woocommerce 如何更改电子商务表单中标签和输入的顺序?

Woocommerce 如何更改电子商务表单中标签和输入的顺序?,woocommerce,Woocommerce,我正在我的woocommerce电子商店工作,我想为结帐表单字段实现CSS“浮动标签”,以获得更好的用户体验。 为了实现这一点,必须在之后进行我似乎找不到一个简单的方法来更改woocommerce中的订单。 最终代码由以下程序生成: <?php foreach ( $checkout->checkout_fields['billing'] as $key => $field ) : ?> <?php woocommerce_form_field( $key


我正在我的woocommerce电子商店工作,我想为结帐表单字段实现CSS“浮动标签”,以获得更好的用户体验。 为了实现这一点,
必须在
之后进行
我似乎找不到一个简单的方法来更改woocommerce中的订单。

最终代码由以下程序生成:

<?php foreach ( $checkout->checkout_fields['billing'] as $key => $field ) : ?>

    <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

<?php endforeach; ?>

function:是一个长代码,用于控制wc-template-functions.php的表单生成。 我认为可以通过在这里更改代码来实现这一结果,但不希望更改此函数中的长代码。有没有更简单的方法?我想如果

<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>    

可以修改为仅首先生成
输入
代码,然后添加仅生成
的新行,并循环这些?我不知道如何修改上述内容,只获取标签或输入(如果可能的话)
非常感谢您的任何提示。

@tonystar。 通过更改form-billing.php和form-shipping.php循环,我在每个表单字段中添加了一个“has float label”类:

    <?php foreach ( $checkout->checkout_fields['billing'] as $key => $field ) : ?>
    <span class="has-float-label">
    <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
    </span>
使用了helgatheviking在my functions.php中提供的筛选代码:

function so_39267627_form_field( $field, $key, $args, $value ){

if ( $args['required'] ) {
    $args['class'][] = 'validate-required';
    $required = ' <abbr class="required" title="' . esc_attr__( 'required', 'woocommerce'  ) . '">*</abbr>';
} 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();

// 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 ) . '"';
    }
}

$field = '';
$label_id = $args['id'];
$field_container = '<p class="form-row %1$s" id="%2$s">%3$s</p>';

$field .= '<input type="' . esc_attr( $args['type'] ) . '" class="input-text ' . esc_attr( implode( ' ', $args['input_class'] ) ) .'" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" placeholder="' . esc_attr( $args['placeholder'] ) . '" ' . $args['maxlength'] . ' ' . $args['autocomplete'] . ' value="' . esc_attr( $value ) . '" ' . implode( ' ', $custom_attributes ) . ' required />';

if ( ! empty( $field ) ) {
    $field_html = '';

    $field_html .= $field;

    if ( $args['description'] ) {
        $field_html .= '<span class="description">' . esc_html( $args['description'] ) . '</span>';
    }

    if ( $args['label'] && 'checkbox' != $args['type'] ) {
        $field_html .= '<label for="' . esc_attr( $label_id ) . '" class="' . esc_attr( implode( ' ', $args['label_class'] ) ) .'">' . $args['label'] . $required . '</label>';
    }

    $container_class = 'form-row ' . esc_attr( implode( ' ', $args['class'] ) );
    $container_id = esc_attr( $args['id'] ) . '_field';

    $after = ! empty( $args['clear'] ) ? '<div class="clear"></div>' : '';

    $field = sprintf( $field_container, $container_class, $container_id, $field_html ) . $after;
}
return $field; }

add_filter( 'woocommerce_form_field_password', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_text', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_email', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_tel', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_number', 'so_39267627_form_field', 10, 4 );
函数so_39267627_form_字段($field,$key,$args,$value){
如果($args['required'])){
$args['class'][]='validate required';
所需$

混乱的城市和邮政编码字段标签:

也许可以使用过滤器过滤特定字段类型的输出?谢谢@helgatheviking。在您发表评论后,我在几个月前看到了您对类似问题的一个答案[你发布的代码解决了我的问题。@Martin,你能分享你的代码片段吗?我想在这里发布:。另外,浮动标签v1.0.1允许你嵌套在里面,可能会有帮助。@tonystar。请看下面我的答案。如果它解决了我的问题,我将尝试v1.0.1。谢谢。
function so_39267627_form_field( $field, $key, $args, $value ){

if ( $args['required'] ) {
    $args['class'][] = 'validate-required';
    $required = ' <abbr class="required" title="' . esc_attr__( 'required', 'woocommerce'  ) . '">*</abbr>';
} 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();

// 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 ) . '"';
    }
}

$field = '';
$label_id = $args['id'];
$field_container = '<p class="form-row %1$s" id="%2$s">%3$s</p>';

$field .= '<input type="' . esc_attr( $args['type'] ) . '" class="input-text ' . esc_attr( implode( ' ', $args['input_class'] ) ) .'" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" placeholder="' . esc_attr( $args['placeholder'] ) . '" ' . $args['maxlength'] . ' ' . $args['autocomplete'] . ' value="' . esc_attr( $value ) . '" ' . implode( ' ', $custom_attributes ) . ' required />';

if ( ! empty( $field ) ) {
    $field_html = '';

    $field_html .= $field;

    if ( $args['description'] ) {
        $field_html .= '<span class="description">' . esc_html( $args['description'] ) . '</span>';
    }

    if ( $args['label'] && 'checkbox' != $args['type'] ) {
        $field_html .= '<label for="' . esc_attr( $label_id ) . '" class="' . esc_attr( implode( ' ', $args['label_class'] ) ) .'">' . $args['label'] . $required . '</label>';
    }

    $container_class = 'form-row ' . esc_attr( implode( ' ', $args['class'] ) );
    $container_id = esc_attr( $args['id'] ) . '_field';

    $after = ! empty( $args['clear'] ) ? '<div class="clear"></div>' : '';

    $field = sprintf( $field_container, $container_class, $container_id, $field_html ) . $after;
}
return $field; }

add_filter( 'woocommerce_form_field_password', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_text', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_email', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_tel', 'so_39267627_form_field', 10, 4 );
add_filter( 'woocommerce_form_field_number', 'so_39267627_form_field', 10, 4 );