php - 如何在 WooCommerce 中编辑结账字段

Question

我正在尝试在 WooCommerce 中编辑结帐页面的前端。

目前，这是结帐页面上显示的生成的 html 代码:

<div class="column">
    <h2 class="title">Billing Details</h2>
    <?php if ( $checkout->get_checkout_fields() ) : ?>

    <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

        <?php do_action( 'woocommerce_checkout_billing' ); ?>

    <?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>

    <?php endif; ?>
</div>

如何更改此设置以使输出代码如下所示:

<div class="column">
    <h2 class="title">Billing Details</h2>
    <?php if ( $checkout->get_checkout_fields() ) : ?>

    <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

        <div class="field">
          <label class="label">First Name</label>
          <div class="control">
            <input class="input" type="text" placeholder="First Name">
          </div>
        </div>

        etc......

    <?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>

    <?php endif; ?>
</div>

这是为了使前端看起来对用户更具吸引力，因为我已经在其他网站页面上使用了 CSS 样式，并清除了 WooCommerce 生成的所有不必要的标记。

感谢任何帮助。

Answer 1

要在 woocommerce 中编辑结帐字段，您将使用一些操作和过滤器 Hook ，如官方文档中描述的那样:

Customizing checkout fields using actions and filters in Woocommerce

它将向您解释如何进行所需的更改，并提供许多代码示例。

您会在 StackOverFlow 中找到许多相关线程 using this search .

---

Update (related to your comment)

对生成的 html 字段类型进行更改:

所有结账字段均由函数 woocommerce_form_field() 生成如果您查看源代码，您可以使用复合过滤器 Hook "woocommerce_form_field_{$args\[type\]}"其中 $args[type] 是要更改的目标字段类型:

$field = apply_filters( 'woocommerce_form_field_' . $args['type'], $field, $key, $args, $value );

以下是使用此 Hook 的一些现有示例代码线程:

• How to rearrange/customize html in woocommerce checkout form fields
• WooCommerce Custom Fields - Multiselect
• WooCommerce: Dynamic Custom Checkout Fields in admin

由于这是为了结帐，您将使用条件标签 is_checkout()。