如何在 Woocommerce 的结帐字段之间添加标题
Posted
技术标签:
【中文标题】如何在 Woocommerce 的结帐字段之间添加标题【英文标题】:How to add a heading in between checkout fields of Woocommerce 【发布时间】:2016-06-19 02:07:23 【问题描述】:我正在自定义 WooCommerce 结帐页面字段。我想在字段之间添加一个标题(文本)。我已经重新排序了这样的字段
add_filter('woocommerce_checkout_fields', 'ac_checkout_reorder_fields');
function ac_checkout_reorder_fields($fields)
$order = array(
"billing_first_name",
"billing_last_name",
"billing_company",
"billing_email",
"billing_phone",
"billing_address_1",
"billing_address_2",
"billing_postcode",
"billing_country"
);
foreach($order as $field)
$ordered_fields[$field] = $fields["billing"][$field];
$fields["billing"] = $ordered_fields;
return $fields;
然后我添加了一个这样的新标题
add_action( 'woocommerce_after_checkout_billing_form', 'add_custom_heading' );
function add_custom_heading( $checkout )
echo '<div id="add_custom_heading"><h2>' . __('Custom Heading Here') . '</h2></div>' ;
现在重新排列字段并显示自定义标题。但我希望标题显示在名称和公司字段下方。使用我的代码,该字段将添加到下方。我如何将它重新定位到我想要的位置。
PS:我还尝试使用此钩子 woocommerce_checkout_fields
添加占位符并删除标签来自定义整个字段部分。这是代码,但这也不能帮助我解决问题。
function add_wc_custom_fields($fields)
global $woocommerce;
$countries_obj = new WC_Countries();
$countries = $countries_obj->__get('countries');
$fields['billing']['billing_first_name'] = array(
'label' => '',
'placeholder' => _x('First Name*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array( 'form-row-first' ),
);
$fields['billing']['billing_last_name'] = array(
'label' => '',
'placeholder' => _x('last Name*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array( 'form-row-last' ),
);
$fields['billing']['billing_company'] = array(
'label' => '',
'placeholder' => _x('Company Name', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('checkout-billing-company')
);
$fields['billing']['billing_address_1'] = array(
'label' => '',
'placeholder' => _x('Address(Line 1)*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('checkout-billing-addressL1')
);
$fields['billing']['billing_address_2'] = array(
'label' => '',
'placeholder' => _x('Address(Line 2)*', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('checkout-billing-addressL2')
);
$fields['billing']['billing_email'] = array(
'label' => '',
'placeholder' => _x('Email Address*', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('form-row-first')
);
$fields['billing']['billing_phone'] = array(
'label' => '',
'placeholder' => _x('Phone Number', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-last')
);
$fields['billing']['billing_city'] = array(
'label' => '',
'placeholder' => _x('Town/City', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-first')
);
$fields['billing']['billing_state'] = array(
'label' => '',
'placeholder' => _x('State/County', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-first')
);
$fields['billing']['billing_postcode'] = array(
'label' => '',
'placeholder' => _x('Zip/Postcode', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-first')
);
$fields['billing']['billing_country'] = array(
'label' => '',
'type' => 'select',
'placeholder' => _x('Country', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-last'),
'options' => $countries
);
return $fields;
add_filter('woocommerce_checkout_fields', 'add_wc_custom_fields');
【问题讨论】:
很难判断什么时候我们只能看到 php 代码...... 我的错误。这是屏幕截图。 i.imgur.com/rsTvwFh.png 请注意,自 WooCommerce 3.0.4 起,应将键“优先级”添加到字段以便对其进行排序:function ac_checkout_reorder_fields($fields) $order = array( "billing_first_name", ... ); foreach($order as $i => $field) $ordered_fields[$field] = $fields["billing"][$field]; $ordered_fields[$field]['priority'] = $i; $fields["billing"] = $ordered_fields; return $fields;
【参考方案1】:
我们可以使用过滤器'woocommerce_form_field_' . $type
...其中$type
是输入的类型...在我们的例子中billing_company
是文本类型...这个过滤器返回字段的html,在我们的案例计费字段,billing_company
.. 过滤器传递了 4 个参数,它们是 $field
、$key
、$args
、$value
...我们只需要其中两个...
add_action( 'woocommerce_form_field_text','reigel_custom_heading', 10, 2 );
function reigel_custom_heading( $field, $key )
// will only execute if the field is billing_company and we are on the checkout page...
if ( is_checkout() && ( $key == 'billing_company') )
$field .= '<p class="form-row form-row-wide">Custom Heading</p>';
return $field;
重要提示:如果我们不将其格式化为具有 form-row
类的段落,Woocommerce 会将其置于所有计费字段的顶部(我不知道原因)。这向我们表明,这是“Hack”,也许您的目标会以不同的方式更好地实现。
【讨论】:
这太棒了。我真的在寻找那个钩子 woocommerce_form_field。非常感谢。这解决了我的问题,并且答案被广泛接受。谢啦。 :) 您能否建议如何做同样的事情,但要在帐户用户名上方和帐单电子邮件字段下方挂钩标题?我试过id="billing_email"
,但没有效果。
@inspirednz,我不明白。也许您应该创建另一个问题并添加屏幕截图。还要描述并包括您迄今为止在该问题中尝试过的内容。
谢谢雷格尔。我会这样做的。
似乎不再起作用... mujuonly 解决方案更好。【参考方案2】:
我更喜欢使用woocommerce_form_field_<field_type>
过滤器来创建新的字段类型,而不是挂钩到现有的woocommerce_form_field_<field_type>
过滤器(例如woocommerce_form_field_text
)。这允许我们为额外的字段类型添加 HTML 输出(因此我们可以使用 HTML 输出作为标题),并且我们可以在使用 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',
);
使用上述方法,原始问题的解决方案是:
add_filter('woocommerce_checkout_fields', 'ac_checkout_reorder_fields');
function ac_checkout_reorder_fields($fields)
$fields['billing']['billing_heading_name'] = array(
'type' => 'heading',
'label' => 'Heading here',
);
$order = array(
"billing_first_name",
"billing_last_name",
"billing_heading_name",
"billing_company",
"billing_email",
"billing_phone",
"billing_address_1",
"billing_address_2",
"billing_postcode",
"billing_country"
);
foreach($order as $field)
$ordered_fields[$field] = $fields["billing"][$field];
$fields["billing"] = $ordered_fields;
return $fields;
【讨论】:
【参考方案3】:add_filter('woocommerce_form_field', 'addHeadingsInBetweenFormFields', 10, 4);
function addHeadingsInBetweenFormFields($field, $key, $args, $value = null)
if (is_checkout() & $key === 'billing_first_name')
$a = '<p class="form-row form-row-wide">Shipping</p>';
return $a . $field;
return $field;
【讨论】:
重要的是要了解 Woocommerce 位置字段未在<p>
标记内格式化始终位于列表顶部。这就是为什么我们必须模仿一个普通的表单域。不要问我为什么。以上是关于如何在 Woocommerce 的结帐字段之间添加标题的主要内容,如果未能解决你的问题,请参考以下文章
WooCommerce 的 MailChimp:在结帐字段中间添加复选框
添加一个结帐复选框字段,在 Woocommerce 中启用百分比费用
在 Woocommerce 结帐页面中将产品添加到购物车的复选框字段