Question

我在WooCommerce结帐页面结算表单中创建了自定义字段。这一切都很好，但我想在其间添加一个带有文本的h3元素。所以基本上我在账单表格中要求一些额外的信息，但我想给它一个标题。

我尝试使用Javascript / jQuery动态创建一个h3，然后在我想要的特定id之前插入。但是这并没有像我喜欢的那样工作，我更倾向于使用服务器端解决方案。

提前致谢！

这是我定义自定义字段的功能。我在开始时尝试过回声，但它最终显示在整个表单的顶部。

＆＃13;

// Modify billing fields

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {

    unset($fields['billing']['billing_phone']);
    unset($fields['billing']['billing_email']);

    //echo '<h3>Wie is de verzender?</h3>';

    $fields['billing']['name_sender'] = array(
          'label' => __('Uw naam', 'woocommerce'),
          'required' => true,
          'class' => array('form-row-wide'),
          'clear' => true
    );
    $fields['billing']['email_sender'] = array(
          'label' => __('Uw email', 'woocommerce'),
          'required' => true,
          'class' => array('form-row-wide'),
          'clear' => true
    );
    $fields['billing']['phone_sender'] = array(
          'label' => __('Uw telefoonnummer', 'woocommerce'),
          'required' => true,
          'class' => array('form-row-wide'),
          'clear' => true
    );
    $fields['billing']['anoniem'] = array(
          'label' => __('Anoniem verzenden?', 'woocommerce'),
          'type' => 'checkbox',
          'class' => array('form-row-wide'),
          'clear' => true
    );

    return $fields;
}

＆＃13;

直观的解释：

Visual explanation

Answer 1

您可以加入woocommerce_form_field_<field_type>过滤器。这允许我们为其他字段类型添加HTML输出（在这种情况下，我们可以为标题输出HTML），我们可以使用这个新标题＆＃34;字段类型＆＃34;使用woocommerce_checkout_fields过滤器修改结帐字段时。

// Add field type to WooCommerce form field 
add_filter( 'woocommerce_form_field_heading','sc_woocommerce_form_field_heading', 10, 4 );
function sc_woocommerce_form_field_heading($field, $key, $args, $value) {
    $output = '<h3 class="form-row form-row-wide">'.__( $args['label'], 'woocommerce' ).'</h3>';
    echo $output;
}

// Modify checkout fields
add_filter( 'woocommerce_checkout_fields','custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
    $fields['billing']['billing_heading_name'] = array(
        'type'      => 'heading',
        'label'     => 'Heading here',
    );

使用woocommerce_checkout_fields过滤器修改字段时，您现在可以将新标题字段放在所需的任何位置。

WooCommerce在自定义字段的开头添加标题

1 个答案: