woocommerceフォームのラベルと入力の順序を変更するにはどうすればよいですか？

Question

私は私のwoocommerceの電子ショップに取り組んでいます。より良いユーザーエクスペリエンスのために、チェックアウトフォームフィールドにはhttps://github.com/tonystar/float-label-cssのCSS "float labels"を実装したいと考えています。 これは<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-テンプレートのfunctions.phpを制御ロングコードです。 ここでコードを変更して結果を得ることは可能だと思いますが、この関数では長いコードを変更しないでください。おそらく簡単な方法はありますか？私はこれらの

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

のみのみ<Label>を生成し、新しい行を追加し、最初のInputコードを生成するように変更することができれば多分思った、とループ？私はラベルをフェッチするだけで入力することも可能です（たとえ可能であっても）上記を変更する方法はわかりません。
ヒントは非常に高く評価されています。

Answer 1

@tonystar。 Iは各フォームに出願フォームbilling.php及びフォームshipping.phpループを変更することによって、 "有するフロートラベル" クラスを追加した：Iフロートラベル-CSSをenqued

<?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> 

：

woocommerceので、それは最後に少し困難だ

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

：

wp_enqueue_style('float-label-css', get_stylesheet_directory_uri() . '/bootstrap-float-label.min.css') 

は私のfunctions.phpに供給helgathevikingフィルタコードを使用しますか？ （または私のテーマ？）は、都市と郵便番号のラベルを同じ「スパンクラス」の下に追加することによって、都市と郵便番号のラベルを混乱させるいくつかの奇妙な "data-o_class"を作成しています。私はこれを解決する方法を知らなかったので、最後に浮動小数点数のラベルを使用していませんでした。しかし、それは本当に素敵なトランジションで、他のすべてのフィールド/ラベルで機能しました。都市と郵便番号フィールドラベルめちゃくちゃ

：