在 WooCommerce 结账时选择特定文本输入的单选按钮

Question

我正在通过我的子主题的 functions.php 将自定义字段添加到 WooCommerce 中的结帐区域。我已经添加了一些文本输入，但我需要添加两个单选按钮来选择/激活两个单独的文本输入“集”。

基本上，我需要一种方法让我的客户能够选择按钮 A：输入付款信息 或 选择按钮 B：并输入采购订单编号。我需要确保 NOT 选择的按钮不会写入数据库并在结帐期间阻止/产生错误。

如果您转到产品页面并添加产品，然后导航至结帐区域您可以看到我已经完成的工作。代码如下：

add_action('woocommerce_after_order_notes', 'custom_checkout_field');
function custom_checkout_field( $checkout ) {

echo '<div id="payment_info"><h3>'.__('Payment Information').'</h3>';

woocommerce_form_field( 'credit_card_name', array(
    'type'          => 'text',
    'class'         => array('form-row-wide'),
    'label'         => __('Name on Credit Card'),
    'required'    => true,
    'placeholder'       => __(''),
    ), $checkout->get_value( 'credit_card_name' ));

woocommerce_form_field( 'card_type', array(
    'type'          => 'select',
    'class'         => array(''),
    'label'         => __('Card Type'),
    'required'    => true,
    'placeholder'       => __(''),
    'options'     => array(
    'American Express' => __('American Express'),
    'Discover' => __('Discover'),
    'Mastercard' => __('Mastercard'),
    'Visa' => __('Visa')
    )), $checkout->get_value( 'card_type' ));

woocommerce_form_field( 'card_number', array(
    'type'          => 'text',
    'class'         => array(''),
    'label'         => __('Card Number'),
    'required'    => true,
    'placeholder'       => __('XXXX-XXXX-XXXX-XXXX'),
    ), $checkout->get_value( 'card_number' ));

woocommerce_form_field( 'card_expiration_month', array(
    'type'          => 'select',
    'class'         => array('form-row-first'),
    'label'         => __('Expiration Month'),
    'required'    => true,
    'placeholder'       => __('- Select Month -'),
    'options'     => array(
    '1' => __('1'),
    '2' => __('2'),
    '3' => __('3'),
    '4' => __('4'),
    '5' => __('5'),
    '6' => __('6'),
    '7' => __('7'),
    '8' => __('8'),
    '9' => __('9'),
    '10' => __('10'),
    '11' => __('11'),
    '12' => __('12')
    )), $checkout->get_value( 'card_expiration_month' ));

woocommerce_form_field( 'card_expiration_year', array(
    'type'          => 'select',
    'class'         => array('form-row-last'),
    'label'         => __('Expiration Year'),
    'required'    => true,
    'placeholder'       => __('- Select Year -'),
    'options'     => array(
    '2013' => __('2013'),
    '2014' => __('2014'),
    '2015' => __('2015'),
    '2016' => __('2016'),
    '2017' => __('2017'),
    '2018' => __('2018'),
    '2019' => __('2019'),
    '2020' => __('2020')
    )), $checkout->get_value( 'card_expiration_year' ));

woocommerce_form_field( 'security_code', array(
    'type'          => 'text',
    'class'         => array('form-row-first'),
    'label'         => __('Security Code'),
    'required'    => true,
    'placeholder'       => __(''),
    ), $checkout->get_value( 'security_code' ));

woocommerce_form_field( 'order_number', array(
    'type'          => 'text',
    'class'         => array('form-row-wide'),
    'label'         => __('PO Number (if required)'),
    'placeholder'       => __(''),
    ), $checkout->get_value( 'order_number' ));

echo '</div>';

所以它需要看起来像这样：

付款信息

[x] 信用卡
名称 [ __ 活动输入区 __ ]
卡号 [ __ 活动输入区 __ ] 等等

[ _ ] 订单号
Enter Number [ __ 无效输入区 __ ]

Answer 1

在 woocommerce 中，无法以这种方式更改表单。

1. 您必须将字段添加到 form-billing.php（将 woocommerce/templates/chechout/form-billing.php 复制到 {yourtheme}/checkout/form-billing.php）。此文件包含一个 foreach 循环，可将您的字段添加到表单中。在此循环中或之后添加您的自定义字段。例子：

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

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

<?
if($key=='billing_first_name')
{
?>
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<?
}
?>


<?php endforeach; ?>

你也可以在这里添加jQuery（在foreach循环之后）来根据用户的选择显示/隐藏一些字段。例子：

 <script type="text/javascript">
 jQuery('input[name="gender"]').live('change', function(){ alert('gender checked');});
 </script>

2 提交后检查自定义字段的输入。将此添加到您的 functions.php 示例中：

/**
 * Process the checkout
 **/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
    global $woocommerce;
    if($_POST['gender']=='male') 
        {
        $woocommerce->add_error( 'You are a female' );
        }   
}

3 将输入添加到数据库中，示例：

/**
 * Update the order meta with field value
 **/
add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');

function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ($_POST['gender']) update_post_meta( $order_id, 'Gender', esc_attr($_POST['gender']));
}

另见：https://gist.github.com/mikejolley/1604009更多示例代码