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中的结帐字段，您将使用一些 action和filter钩子，如官方文档中所述：

Customizing checkout fields using actions and filters in Woocommerce

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

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

更新 （与您的评论有关）

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

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

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

以下是一些使用此钩子的示例代码线程：

这是用于结帐的，因此您将使用条件标签is_checkout()。

如何在WooCommerce中编辑结帐字段

1 个答案:

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