Question

我在结帐页面添加了一些自定义字段，其代码如下：

add_action( 'woocommerce_before_order_notes', 'bs_custom_checkout_fields' );
function bs_custom_checkout_fields( $checkout ) {

    woocommerce_form_field( 'order_domain_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Name','bs'),
        'placeholder'   => __('Enter the name','bs'),
        'required'      => true,
    ), $checkout->get_value( 'order_domain_name' ));
}

我需要在此字段之前添加一些其他说明，以向用户解释此字段的含义。有没有办法做到这一点？

由于

Answer 1

使用description参数：

add_action( 'woocommerce_before_order_notes', 'bs_custom_checkout_fields' );
function bs_custom_checkout_fields( $checkout ) {

woocommerce_form_field( 'order_domain_name', array(
    'type'          => 'text',
    'class'         => array('my-field-class form-row-wide'),
    'label'         => __('Name','bs'),
    'placeholder'   => __('Enter the name','bs'),
    'required'      => true,
    'description    => __('Additional description goes here','bs')
), $checkout->get_value( 'order_domain_name' ));

}

Answer 2

我发现了两个解决方案，可以通过WooCommerce更新安全地解决此问题。

一种方法是使用过滤器“ woocommerce_form_field”。这将传递$ field变量以及字段的$key，$args，$value。您可以编辑输出，但这有点繁琐，将来可能需要更新。

一个更简单的选择是利用flexbox通过CSS对其进行更改。我添加了以下CSS代码，以将描述移到表单字段上方：

.woocommerce-checkout .woocommerce-input-wrapper {
    display: -webkit-box;
    display:    -moz-box;
    display:         box;
    -webkit-box-orient: vertical;
       -moz-box-orient: vertical;
            box-orient: vertical;
    width: 100%;
}
.woocommerce-checkout .woocommerce-input-wrapper .description {
    display:  -ms-flexbox;
    display:  -webkit-box; 
    display:     -moz-box;
    display: -webkit-flex; 
    display:         flex;
    -webkit-box-ordinal-group: 1;
       -moz-box-ordinal-group: 1;
               -ms-flex-order: 1; 
                -webkit-order: 1; 
                        order: 1;
    font-style: italic;
}
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper textarea,
.woocommerce-checkout .woocommerce-input-wrapper .select2-container {
    display:  -ms-flexbox;
    display:  -webkit-box; 
    display:     -moz-box;
    display: -webkit-flex; 
    display:         flex;
    -webkit-box-ordinal-group: 2;
       -moz-box-ordinal-group: 2;
               -ms-flex-order: 2; 
                -webkit-order: 2; 
                        order: 2;
}

Answer 3

这是将描述放在标签下面的答案。

你需要破解/plugins/woocommerce/includes/wc-template-functions.php

移动线2103 - $field_html .= $field; 到2108号线。

这就是你能做的所有事情，不幸的是，不是WooCommerce更新证明。

WooCommerce - 在结账时在woocommerce_form_field（）之前添加说明

3 个答案: