如何在woocommerce结帐表单字段中重新排列/自定义html [英] How to rearrange/customize html in woocommerce checkout form fields

问题描述

我想在我的 woocommerce 结帐表单中完成两件事:1. 在一些字段组之间放置一些文本，例如 (h3):

I want to accomplish 2 things in my woocommerce checkout form: 1. Put some text between some groups of fields, for example (h3):

<h3>my custom heading</h3>
<p class="form-row form-row validate-required">
  <input type="email">...
</p>

<h3>my other custom heading</h3>
<p class="form-row form-row validate-required">
  <input type="text">...
</p>
<p class="form-row form-row validate-required">
  <input type="text">...
</p>

2.html中输入标签优先显示，标签标签第二显示(woocommerce默认在输入前显示标签)

2. Display input tag first and label tag as second in html (woocommerce display label before input by default)

我发现此代码显示结帐表单(用于计费):

I figured out that checkout form is displayed by this code (for billing):

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

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

<?php endforeach; ?>

如何按照我描述的方式自定义它?

How can I customize it in way I described?

推荐答案

对于第一个，您可以执行以下操作以显示单个输入字段

For the first one you can do the following to display single input field

<?php 

woocommerce_form_field(
    "billing_first_name",
    $checkout->checkout_fields['billing']['billing_first_name'], 
    $checkout->get_value( 'billing_first_name' )
);

?>

您可以用结帐帐单字段的任何键替换 first_name

where you can replace first_name with any key of the checkout billing fields

所以对于你的例子，它会是这样的

So for your example it will be something like this

<h3>my custom heading</h3>

<p class="form-row form-row validate-required">

    <?php woocommerce_form_field( "billing_email", $checkout->checkout_fields['billing']['billing_email'], $checkout->get_value( 'billing_email' ) ); ?>

</p>

至于第二个，我不确定您是如何实现的.我需要类似的东西，我使用 javascript 重新定位标签.

As for the second I'm not sure how you can achieve that. I needed something similar and i used javascript to reposition the labels.

类似:

jQuery('form.checkout label').each(function(){
    jQuery(this).insertAfter(jQuery(this).parent().find('input'));
})

这篇关于如何在woocommerce结帐表单字段中重新排列/自定义html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！