How to change order of label and input in woocommerce forms?
<p><br>
I am working on my woocommerce e-shop and I would like to implement CSS "float labels" with <a href="https://github.com/tonystar/float-label-css" rel="noreferrer">https://github.com/tonystar/float-label-css</a> for the checkout form fields, for better user experience.
For this to work the<code>&lt;Label&gt;</code>has to come after the <code>&lt;Input&gt;</code>.<br> I can't seem to find a simple way to change the order in woocommerce.<br><br>
The final code is generated by :</p>

<pre><code>&lt;?php foreach ( $checkout-&gt;checkout_fields['billing'] as $key =&gt; $field ) : ?&gt;

    &lt;?php woocommerce_form_field( $key, $field, $checkout-&gt;get_value( $key ) ); ?&gt;

&lt;?php endforeach; ?&gt;
</code></pre>

<p>The function: <a href="https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_form_field.html#1744-1957" rel="noreferrer">woocommerce_form_field</a> is a long code controlling the form generation the wc-template-functions.php. 
I think it is possible to achieve the result by changing code here, but would rather not change the long code in in this function though. Is there perhaps an easier way? I thought maybe if</p>

<pre><code>&lt;?php woocommerce_form_field( $key, $field, $checkout-&gt;get_value( $key ) ); ?&gt;    
</code></pre>

<p>could be modified to only generate the <code>Input</code> code first, then add a new line that only generates the <code>&lt;Label&gt;</code>, and loop these? I don't know how to do modify the above to only fetch label or input though (if even possible). <br> Any hints are much appreciated.</p>