Question

我想在我的woocommerce结帐表单中完成两件事： 1.在某些字段组之间放置一些文本，例如（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显示标签）

我发现此代码显示结帐表单（用于结算）：

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

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

<?php endforeach; ?>

如何以我描述的方式自定义它？

Answer 1

我对第1部分不确定，但对于第2部分，您可以通过过滤woocommerce_form_field_$type来修改woocommerce_form_field()的输出。

所以你的第2部分可以这样解决：

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'] ) . '"' : '';

    $args['autocomplete'] = ( $args['autocomplete'] ) ? 'autocomplete="' . esc_attr( $args['autocomplete'] ) . '"' : '';

    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 ) . ' />';

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

你需要编写一些函数（大部分是我从WooCommerce中复制并粘贴了大量代码，然后只是交换标签部分）以用于其他其他字段类型，但这应该作为一个例子。

Answer 2

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

<?php 

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

?>

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

因此，对于您的示例，它将是这样的

<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重新定位标签。

类似的东西：

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

Answer 3

据我所知，woo commerce不支持html，有一个名为woocommerce checkout字段编辑器的插件，看看它是否解决了你的问题。

如何在woocommerce结帐表单字段中重新排列/自定义html

3 个答案: