收音机按钮,用于在结帐时在WooCommerce中选择特定的文本输入

时间:2013-05-06 17:26:27

标签: wordpress radio-button checkout woocommerce

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

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

如果您转到products page并添加产品,请导航至checkout area,您可以看到我已经完成的操作。代码如下:

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]信用卡
名称[__活动输入区域__]
卡号[__活动输入区__] 等

[_]采购订单编号
输入数字[__非活动输入区域__]

1 个答案:

答案 0 :(得分:1)

在woocommerce中,以这种方式改变你的形式是没有意义的。

1。您必须将字段添加到form-b​​illing.php(将woocommerce / templates / chechout / form-b​​illing.php复制到{yourtheme} /checkout/form-b​​illing.php )。此文件包含foreach-loop,可将您的字段添加到表单中。在此循环中或之后添加自定义字段。例如:

<?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了解更多示例代码