How to add a select custom field to checkout page in WooCommerce? - woocommerce

I'm adding extra fields to the checkout page in WooCommerce,
I've added basic text fields ok, but I want a dropdown or select box with a few options,
Here is what I've done so far but I've made an error somewhere
$fields['billing']['billing_meat'] = array(
'label' => __('Food options', 'woocommerce'),
'placeholder' => _x('', 'placeholder', 'woocommerce'),
'required' => false,
'clear' => false
'type' => 'select',
'options' => array( // array of key => value pairs for select options
__('I eat meat', 'woocommerce') => __('I eat mate', 'woocommerce'),
__('meat is gross', 'woocommerce') => __('meat is gross', 'woocommerce'),
Maybe I'm not defining 'type' field correctly?
thanks loads

If that is your exact code, then the problem is that you are missing a comma after 'clear' => false.
I've tested this and it works:
$fields['billing']['billing_meat'] = array(
'label' => __('Food options', 'woocommerce'),
'placeholder' => _x('', 'placeholder', 'woocommerce'),
'required' => false,
'clear' => false,
'type' => 'select',
'options' => array(
'eat-meat' => __('I eat maet', 'woocommerce' ),
'not-meat' => __('Meat is gross', 'woocommerce' )
)
);
Note that I also did not use __() on the options array keys. It's better to not translate those.

this is working. here's my code
// Hook in
add_filter( 'woocommerce_checkout_fields' , 'dropdown' );
// Our hooked in function - $fields is passed via the filter!
function dropdown( $fields ) {
$fields['billing']['dropdown'] = array(
'label' => __('dropdown', 'woocommerce'),
'placeholder' => _x('dropdown', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true,
'type' => 'select',
'options' => array(
'option 1' => __('option 1', 'woocommerce' ),
'option 2' => __('option 2', 'woocommerce' )
)//end of options
);
return $fields;
}
this works. but it seems that the value is not being saved under _billing_dropdown. I used "admin columns" plugin to add a field in the order table (admin side). under my custom field "dropdown", no value shows up. where can i retrieve the value? same goes with my other custom field "purpose" that is under "_billing_purpose" and is type=>'textarea'. thanks!
here's a screenshot
https://scontent-b-hkg.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/10696182_985415141473105_5302358697439449940_n.jpg?oh=74cb5ebc6b1ad6dd0c29e51293b61fdf&oe=5502613C

Related

Unable to add custom select field in woocommerce

I want to add a custom field options to checkout page. I am using the following code :
$fields['billing']['billing_options'] = array(
'label' => __('Options', 'woocommerce'),
'placeholder' => _x('', 'placeholder', 'woocommerce'),
'required' => false,
'clear' => false,
'type' => 'select',
'options' => array(
'option_a' => __('option a', 'woocommerce' ),
'option_b' => __('option b', 'woocommerce' )
)
);
I want to show the options (option_a,option_b) from database or
I want to use dynamic data and want to use for loop in the options menu
How can I use for loop inside this function ?
Just do it before, like this:
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function my_custom_checkout_fields( $fields ) {
$args = array(
'post_type' => array('options'),
'posts_per_page' => -1
);
$posts = new WP_Query($args);
$options = array();
foreach ($posts as $post) {
$options[$post->ID] => attr_esc($post->post_title);
}
$fields['billing']['billing_options'] = array(
'label' => __('Options', 'woocommerce'),
'placeholder' => _x('', 'placeholder', 'woocommerce'),
'required' => false,
'clear' => false,
'type' => 'select',
'options' => $options
);
return $fields;
}

How to make conditional field on cmb2 plugin?

I want to make a condition for my members info page.
$biometabox[] = array(
'id' => 'first-section',
'title' => 'Member Data',
'object_types' => array('dausfmembers'),
'fields' => array(
array(
'name' => 'Gender',
'type' => 'radio',
'id' => $dausf.'gender',
'options' => array(
'Male' => 'Male',
'Female' => 'Female'
)
),
array(
'name' => 'Gender',
'type' => 'radio',
'id' => $dausf.'mstatus',
'options' => array(
'Married' => 'Married',
'Single' => 'Single'
)
),
i want to make if female and married show this fileds in admin panel.
array(
'name' => 'Husband Name',
'type' => 'text',
'id' => $dausf.'hname',
),
can anyone help me out from this ??
"Conditional fields" seem not to be integrated within CMB2 core yet. However, there's a plugin called CMB2 Conditionals which might help you achieve the functionality you want.
After installing and setting up the plugin, it'd be simply achieved by setting up your fields as follows:
A special attention to the 'attributes' key, you can play with it as per the plugin's instructions.
$biometabox[] = array(
'id' => 'first-section',
'title' => 'Member Data',
'object_types' => array('dausfmembers'),
'fields' => array(
array(
'name' => 'Gender',
'type' => 'radio',
'id' => $dausf.'gender',
'options' => array(
'Male' => 'Male',
'Female' => 'Female',
),
'attributes' => array(
'required' => 'required',
)
),
array(
'name' => 'Gender',
'type' => 'radio',
'id' => $dausf.'mstatus',
'options' => array(
'Married' => 'Married',
'Single' => 'Single',
),
'attributes' => array(
'required' => 'required',
)
),
array(
'name' => 'Husband Name',
'type' => 'text',
'id' => $dausf.'hname',
'required' => true,
),
'attributes' => array(
'required' => true, // Will be required only if visible.
'data-conditional-id' => $prefix . 'gender',
'data-conditional-value' => 'Female',
),
'attributes' => array(
'required' => true, // Will be required only if visible.
'data-conditional-id' => $prefix . 'mstatus',
'data-conditional-value' => 'Married',
),
...
) );
You'll want to check the plugin's example functions here: https://github.com/jcchavezs/cmb2-conditionals/blob/master/example-functions.php
I hope you manage to make it you work. Good luck.
Although this might be a bit convoluted you can also write a custom jQuery script to show and hide fields based on the options selected:
In your theme directory add two folders called "js" and "css" if they aren't already there.
Then create a file in /js called "admin_scripts.js". And create a file in /css called "admin.css".
So you'll have:
theme_directory/css/admin.css
theme_directory/js/admin_scripts.js
In your functions.php add the following:
function admin_scripts() {
// Adding custom admin scripts file
wp_enqueue_script( 'admin-js', get_template_directory_uri() . '/js/admin_scripts.js', array( 'jquery' ));
// Registering and adding custom admin css
wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/css/admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
Then just below this function add:
add_action( 'admin_enqueue_scripts', 'admin_scripts' );
In js/admin_scripts.js add the following (remember to change the ids and classes to your field's ids and classes)
jQuery(document).ready( function() {
if( jQuery('#cmb2_select_field_id').val() == 'conditional_option') {
jQuery('.cmb2-field-to-display-on-select').show();
}
jQuery('#cmb2_select_field_id').bind('change', function (e) {
if( jQuery('#cmb2_select_field_id').val() == 'conditional_option') {
jQuery('.cmb2-field-to-display-on-select').show();
}
else{
jQuery('.cmb2-field-to-display-on-select').hide();
}
});
});
And in css/admin.css add the following:
.cmb2-field-to-display-on-select {
display:none;
}

Adding a new custom shipping field in woocommerce

I'd like to add a new custom billing field in my woocommerce checkout. After adding the following code inside my child theme functions.php, saved it and refreshed the page, I received a blank page. There was no error message. I believe there must be syntax error or something.
add_filter('woocommerce_checkout_fields','custom_override_checkout_fields');
function custom_override_checkout_fields($fields) {
$fields['shipping']['about_yourself'] = array(
'label' => __('About yourself', 'woocommerce'),
'placeholder' => _x('About yourself', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide');
'clear' => true
);
return $fields;
}
I was wondering if anyone could help me out.
Thank you in advance
The error is in your array field that should be like:
$fields['shipping']['about_yourself'] = array(
'label' => __('About yourself', 'woocommerce'),
'placeholder' => _x('About yourself', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true
);
NOTE: During development process to enable the error_reporting() and set WP_DEBUG true. This is how you enable it during WordPress development in wp-config.php file
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
#ini_set('display_errors', 0);
You have added ; instead of , in 'class' => array('form-row-wide');
So your code would be :
add_filter('woocommerce_checkout_fields','custom_override_checkout_fields');
function custom_override_checkout_fields($fields) {
$fields['shipping']['about_yourself'] = array(
'label' => __('About yourself', 'woocommerce'),
'placeholder' => _x('About yourself', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true
);
return $fields;
}

make CMB text_datetime_timestamp field repeatable

I'm using CMB to creat custom fields for wordpress custom post
https://github.com/WebDevStudios/Custom-Metaboxes-and-Fields-for-WordPress
I'm using text_datetime_timestamp to set date and time and I need to make this field repeatable which is not
as I go through the documentation we can make new fields but I can't figure out how it make "text_datetime_timestamp" field repeatable
any body can show me the way to accomplish that ?
thank you
I did not find a solution to make the field repeatable so I put the field inside group and made it repeatable
array(
'id' => $prefix . 'repeat_date_group',
'type' => 'group',
'description' => '',
'options' => array(
'group_title' => __( 'Date/Time {#}', 'cmb' ),
'add_button' => __( 'Add Another Date/Time', 'cmb' ),
'remove_button' => __( 'Remove Date/Time', 'cmb' ),
'sortable' => true, // beta
),
'fields' => array(
array(
'name' => 'Date/Time',
'desc' => '',
'id' => $prefix . 'course_date',
'type' => 'text_datetime_timestamp'
),
),
),
I hope this answer will help somebody
Well here is my code, you may try this
$cmb= new_cmb2_box( array(
'id' => $prefix.'testing',
'title' => _('Testing'),
'object_types' => array('post'),
'context' => 'normal',
'priority' => 'high',
'show_names' => true,
));
$cmb->add_field( array(
'name' => 'Test Date/Time Picker Combo (UNIX timestamp)',
'id' => 'wiki_test_datetime_timestamp',
'type' => 'text_datetime_timestamp',
'repeatable' => true,
) );

woocommerce Customising checkout fields

I am trying to customise the woocommerce checkout page. The below works fine:
$fields['billing']['billing_city'] = array(
'label' => __('Town / City:', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'label_class' => array('infotown'),
'clear' => true,
'placeholder' => _x('', 'placeholder')
);
Where as the following does not:
$fields['billing']['billing_state'] = array(
'label' => __('State:', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'label_class' => array('infocounty'),
'clear' => true,
'placeholder' => _x('', 'placeholder')
);
There's no difference between the 2, apart from the label, and the label class.
Any ideas?
try adding
- woocommerce language support, which is for translators
- check the add_action function in which you are adding it too
- spacing can be a problem in the wrong places also
to add language support, try so
$fields['billing']['billing_state'] = array(
'label' => __('State:', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'label_class' => array('infocounty'),
'clear' => true,
'placeholder' => _x('', 'placeholder', 'woocommerce')
);
where i added "woocommerce" next to placeholder. :)

Resources