我正在我的 woocommerce 电子商店工作,我想使用 https://github.com/tonystar/float-label-css 为结帐表单字段实现 CSS“ float 标签”,以获得更好的用户体验。
为此, <Label>
必须在 <Input>
之后。我似乎找不到一种简单的方法来更改 woocommerce 中的顺序。
最终代码由以下生成:
<?php foreach ( $checkout->checkout_fields['billing'] as $key => $field ) : ?>
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
<?php endforeach; ?>
函数:woocommerce_form_field 是控制wc-template-functions.php 表单生成的长代码。
我认为可以通过在此处更改代码来实现结果,但宁愿不更改此函数中的长代码。也许有更简单的方法?我想也许如果
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
可以修改为只生成
Input
代码,然后添加一个只生成 <Label>
的新行,然后循环这些?我不知道如何修改上述内容以仅获取标签或输入(如果可能的话)。任何提示都非常感谢。 最佳答案
@托尼斯塔。
我通过更改 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>
我对 float-label-css 进行了查询:
wp_enqueue_style( 'float-label-css', get_stylesheet_directory_uri() . '/bootstrap-float-label.min.css' )
使用了 helgatheviking 在我的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 );
最终因为woocommerce而变得有点困难? (或我的主题?)正在制作一些奇怪的“data-o_class”es,通过在同一个“span class”下添加城市和邮政编码来弄乱城市/邮政编码标签。我不知道如何解决这个问题,所以我最后跳过了使用 float 标签。但它适用于所有其他领域/标签,过渡非常好。
工作 float 标签:
弄乱了城市和邮政编码字段标签:
关于woocommerce - 如何更改woocommerce表单中标签和输入的顺序?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40118125/