Manage custom checkout fields in woocommerce - woocommerce

Hi I have a question regardin custom checkout fields in woocommerce.
I created a custom field in the checkout form and everything was working perfectly. The field contains a customer card number. I also managed to save the field value (once entered the first time) in the wp-usermeta, so that it doesn't come along only with the order, but it is saved together with teh customer details.
Now I would like to do the following. Once a registered customer returning to the shop goes to the checkout form, the new field (if not empyt) shows up automatically, instead of asking the customers to insert their card number everytime.
The original functions that I added to my child theme fucntions.php for showing the custom field in the checkout page was:
/**
* Add the field to the checkout
*/
add_action ('woocommerce_after_order_notes', 'checkout_w55_card_number' );
function checkout_w55_card_number( $checkout ) {
echo '<div id="checkout_w55_card_number"><h2>' . __('N. tessera W55') . '</h2>';
woocommerce_form_field( 'w55_card_number', array(
'type' => 'text',
'class' => array('w55-card-number-class form-row-wide'),
'label' => __('Inserisci n. tessera W55'),
'placeholder' => __('Inserisci numero'),
), $checkout->get_value( 'w55_card_number' ));
echo '</div>';
}
I thus tried to re-arrange it in this way, but it doesn't work
add_action ('woocommerce_after_order_notes', 'checkout_w55_card_number' );
function checkout_w55_card_number( $checkout ) {
//extracts the value of the w55_card_number field
$w55_card = get_user_meta($user_id, 'w55_card_number', true);
//condition is the w55_card_number field is empty or not
if ( !empty($w55_card) ) : echo $w55_card; else :
echo '<div id="checkout_w55_card_number"><h2>' . __('N. tessera W55') . '</h2>';
woocommerce_form_field( 'w55_card_number', array(
'type' => 'text',
'class' => array('w55-card-number-class form-row-wide'),
'label' => __('Inserisci n. tessera W55'),
'placeholder' => __('Inserisci numero'),
), $checkout->get_value( 'w55_card_number' ));
echo '</div>';
endif;
}
Any suggestion?

Your user_id variable was not defined. You need to do the following:
add_action ('woocommerce_after_order_notes', 'checkout_w55_card_number' );
function checkout_w55_card_number( $checkout ) {
$user_id = get_current_user_id();
$w55_card = '';
if ($user_id) {
//extracts the value of the w55_card_number field
$w55_card = get_user_meta($user_id, 'w55_card_number', true);
}
//condition is the w55_card_number field is empty or not
if ( !empty($w55_card) ) : echo $w55_card;
else :
echo '<div id="checkout_w55_card_number"><h2>' . __('N. tessera W55') . '</h2>';
woocommerce_form_field( 'w55_card_number', array(
'type' => 'text',
'class' => array('w55-card-number-class form-row-wide'),
'label' => __('Inserisci n. tessera W55'),
'placeholder' => __('Inserisci numero'),
), $checkout->get_value( 'w55_card_number' ));
echo '</div>';
endif;
}

Related

WordPress add field to checkout, can't add user meta to value

I'm trying to add an extra form field to woocommerce checkout, and populate it with an existing user meta value if exists, but I can't seem to get the value attribute to render.
$user_meta_billing_licence_number traces to the error log, and it will show up in the label if I append it to the label, and to the placeholder, if I append it to the placeholder, but not to the value attribute. What am I doing wrong?
add_filter('woocommerce_billing_fields', 'custom_billing_fields', 20 );
function custom_billing_fields( $fields ) {
// Add license field.
$user_id = get_current_user_id();
$user_meta_billing_licence_number = (string)get_user_meta( $user_id, 'billing_licence_number', true );
error_log('debug: line 117: billing_licence_number = '.$user_meta_billing_licence_number);
$fields['billing_licence_number'] = array(
'label' => __('License Number (for use on certificates)', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true,
'placeholder' => 'Recommended format: MA12345'.$user_meta_billing_licence_number,
'value' => $user_meta_billing_licence_number
);
return $fields;
}
So... looks like you can't pass the value in through this filter. You have to intercept it later, and override the value fetching during the printing of the fields:
<?php foreach ( $checkout->checkout_fields['billing'] as $key => $field ) : ?>
<?php
if($key == 'billing_licence_number') {
$uID = get_current_user_id();
woocommerce_form_field( $key, $field, get_user_meta($uID, 'billing_licence_number', true));
} else {
woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
}
?>
<?php endforeach; ?>

Display custom checkout field value on admin order detail section in Woocommerce

Hello I'm trying to display the custom checkout field in the admin order details page. My Custom field is Delivery Option and it allows the user to pick the to pick a value from checkbox. I use the code below following the similar topics about this, but it seems something is wrong with my code.
add_action( 'woocommerce_review_order_after_shipping', 'checkout_shipping_additional_field', 20 );
function checkout_shipping_additional_field()
{
$domain = 'wocommerce';
$default = 'option 1';
echo '<tr class="additional-shipping-fields"><th>' . __('Delivery Time', $domain) . '</th><td>';
// Add a custom checkbox field
woocommerce_form_field( 'custom_radio_field', array(
'type' => 'select',
'class' => array( 'form-row-wide' ),
'options' => array(
'option 1' => __('10:04 : 13:04 ', $domain),
),
'default' => $default,
), $default );
echo '</td></tr>';
}
//update order meta
add_action('woocommerce_checkout_update_order_meta', 'gon_update_order_meta_business_address');
function gon_update_order_meta_business_address( $order_id ) {
if ($_POST['custom_radio_field']) update_post_meta( $order_id, 'Business Address?',
esc_attr($_POST['custom_radio_field']));
}
// Display field value on the admin order edit page
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'custom_checkout_field_display_admin_order_meta', 10, 1 );
function custom_checkout_field_display_admin_order_meta( $order ){
$delivery_time = get_post_meta( $order->get_id(), 'Delivery Time', true );
if( ! empty( $delivery_time ) )
echo '<p><strong>'.__('Delivery Time', 'woocommerce').': </strong> ' . $delivery_time . '</p>';
}
There is some mistakes, so I have revisited your code. I have also replaced some hooks. Try the following:
// HERE set your the options array for your select field.
function delivery_time_options(){
$domain = 'woocommerce';
return array(
'1' => __('10:04 : 13:04 ', $domain),
'2' => __('14:04 : 16:04 ', $domain), // <== Added for testing
);
}
// Display a custom select field after shipping total line
add_action( 'woocommerce_review_order_after_shipping', 'checkout_shipping_additional_field', 20 );
function checkout_shipping_additional_field(){
$domain = 'woocommerce';
echo '<tr class="additional-shipping-fields"><th>' . __('Delivery Time', $domain) . '</th><td>';
// Add a custom select field
woocommerce_form_field( 'delivery_time', array(
'type' => 'select',
'class' => array( 'form-row-wide' ),
'options' => delivery_time_options(),
), '' );
echo '</td></tr>';
}
// Save custom field as order meta data
add_action('woocommerce_checkout_create_order', 'save_custom_field_order_meta', 22, 2 );
function save_custom_field_order_meta( $order, $data ) {
if ( isset($_POST['delivery_time']) ) {
$options = delivery_time_options(); // Get select options array
$option_key = esc_attr($_POST['delivery_time']); // The selected key
$order->update_meta_data( '_delivery_time', $options[$option_key] ); // Save
}
}
// Display a custom field value on the admin order edit page
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'display_custom_meta_data_in_backend_orders', 10, 1 );
function display_custom_meta_data_in_backend_orders( $order ){
$domain = 'woocommerce';
$delivery_time = $order->get_meta('_delivery_time');
if( ! empty( $delivery_time ) )
echo '<p><strong>'.__('Delivery Time', $domain).': </strong> ' . $delivery_time . '</p>';
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
Based on #LoicTheAztec answer, if you want multiple fields without re-writing the functions for every field (DRY), you can use this class (by adding it to your functions.php):
/**
* Add a custom field to the woocommerce checkout page
* https://stackoverflow.com/q/52098807/
*/
class WOO_Add_Checkout_Field
{
public function __construct($options)
{
$this->field_name = $options['field_name'];
$this->label = $options['label'];
$this->placeholder = $options['placeholder'];
$this->required = $options['required'];
if ($this->field_name && $this->label && $this->placeholder) {
add_action('woocommerce_after_order_notes', [$this, 'customise_checkout_field']);
add_action('woocommerce_checkout_update_order_meta', [$this, 'custom_checkout_field_update_order_meta'], 10, 1);
add_action('woocommerce_admin_order_data_after_billing_address', [$this, 'display_custom_field_on_order_edit_pages'], 10, 1);
} else {
die("Error in WOO_Add_Checkout_Field \$options: \n\n" . var_dump($options));
}
}
public function customise_checkout_field($checkout)
{
echo '<div id="customise_checkout_field">';
// echo '<h2>' . __('Heading') . '</h2>';
woocommerce_form_field($this->field_name, array(
'type' => 'text',
'class' => array(
'my-field-class form-row-wide'
),
'label' => $this->label,
'placeholder' => $this->placeholder,
'required' => $this->required,
), $checkout->get_value($this->field_name));
echo '</div>';
}
public function custom_checkout_field_update_order_meta($order_id)
{
if (!empty($_POST[$this->field_name]))
update_post_meta($order_id, $this->field_name, $_POST[$this->field_name]);
else
update_post_meta($order_id, $this->field_name, 0);
}
public function display_custom_field_on_order_edit_pages($order)
{
$field = $order->get_meta($this->field_name);
if (!empty($field)) {
echo '<p><strong style="display:block" title="' . $this->placeholder . '">' . $this->label . ': </strong><span>';
echo $field;
echo '</span></p>';
}
}
}
And use it as many times as you'd like:
$my_custom_field_1 = new WOO_Add_Checkout_Field([
'field_name' => 'my_custom_field_1',
'label' => __('My First Field'),
'placeholder' => __('Please write something in field 1...'),
'required' => false,
]);
$my_custom_field_2 = new WOO_Add_Checkout_Field([
'field_name' => 'my_custom_field_2',
'label' => __('My Second Field'),
'placeholder' => __('Please write something in field 2...'),
'required' => false,
]);
$my_custom_field_3 = new WOO_Add_Checkout_Field([
'field_name' => 'my_custom_field_3',
'label' => __('My Third Field'),
'placeholder' => __('Please write something in field 3...'),
'required' => false,
]);
// and so on...
Please note:
The custom field will show up in admin area ONLY if it was not sent empty
You can customize this code how you like

How to have custom checkout fields in ajax checkout in woocommerce

I have an Ajax checkout on my woocommerce installation and I am trying to capture the custom fields on the checkout. I am using below code to try to capture the field called add_gift_box, the field appears fine on my checkout page.
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['add_gift_box']) {
update_post_meta( $order_id, '_add_gift_box', esc_attr($_POST['add_gift_box']));
}
}
When I press "place order" button it creates a new order but the value of this field does not get saved in the database. I don't think even the hook gets fired. As I said everything is being handled by Ajax. The checkout page is one page checkout.
I need help sorting this out. Thanks in advance.
UPDATE
I am setting the field as follows:
add_action( 'woocommerce_after_checkout_billing_form', 'add_box_option_to_checkout' );
function add_box_option_to_checkout( $checkout ) {
woocommerce_form_field( 'add_gift_box', array(
'type' => 'radio',
'class' => array('add_gift_box form-row-wide'),
'label_class' => array('checkbox'),
'input_class' => array('input-checkbox'),
'required' => true,
'options' => array(
'option_1' => 'option1</br>' ,
'option_2' =>'option2</br>',
'option_3' =>'option3</br>',
'option_4' =>'option4</br>',
'option_5' =>'option5</br>',
'option_6' =>'option6</br>',
'option_7' =>'option7</br>',
),
'label' => __('Select Option'),
'placeholder' => __(''),
), $checkout->get_value( 'add_gift_box' ));
}
here is a plugin to add custom field on checkout page woocomerce https://wordpress.org/plugins/woo-custom-checkout-field/
or if you want to add by code you can follow codding from here
https://www.cloudways.com/blog/custom-field-woocommerce-checkout-page/
add_action('woocommerce_after_order_notes', 'customise_checkout_field');
function customise_checkout_field($checkout)
{
echo '<div id="customise_checkout_field"><h2>' . __('Heading') . '</h2>';
woocommerce_form_field('customised_field_name', array(
'type' => 'text',
'class' => array(
'my-field-class form-row-wide'
) ,
'label' => __('Customise Additional Field') ,
'placeholder' => __('Guidence') ,
'required' => true,
) , $checkout->get_value('customised_field_name'));
echo '</div>';
}
Do you have a plugin activated which creates the order by hooking into woocommerce_create_order filter? I don't see any other reason why add_gift_box isn't saved or why woocommerce_checkout_update_order_meta isn't firing.
The original code from includes/class-wc-checkout.php is
/**
* Action hook to adjust order before save.
* #since 3.0.0
*/
do_action( 'woocommerce_checkout_create_order', $order, $data );
// Save the order.
$order_id = $order->save();
do_action( 'woocommerce_checkout_update_order_meta', $order_id, $data );
So, you could create log files in your themes directory to see which hooks are firing like this:
add_action('woocommerce_checkout_update_order_meta', function ($order_id) {
file_put_contents(__DIR__ . '/woocommerce_checkout_update_order_meta.log', 'woocommerce_checkout_update_order_meta fired for order id ' . $order_id);
});
add_action('woocommerce_checkout_create_order', function () {
file_put_contents(__DIR__ . '/woocommerce_checkout_create_order.log', 'woocommerce_checkout_create_order fired');
});

get_post_meta not showing the value of custom field when called

I've had the following code to add a custom order field in the woocommerce checkout:
function delivery_time_slots_array () {
return array(
'' => _('Choose a time slot'),
'5pm - 6pm' => __('5pm - 6pm', 'woocommerce'),
'6pm - 7pm' => __('6pm - 7pm', 'woocommerce'),
'7pm - 8pm' => __('7pm - 8pm', 'woocommerce'),
'8pm - 9pm' => __('8pm - 9pm', 'woocommerce')
);
}
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
$fields['order']['order_delivery_time'] = array(
'type' => 'select',
'label' => __('Delivery time (choose an hour slot between 5pm & 9pm)', 'woocommerce'),
'class' => array('form-row-wide'),
'required' => true,
'options' => delivery_time_slots_array()
);
Then, followed by the below code to update the order meta with field value:
add_action( 'woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta', 10, 2 );
function custom_checkout_field_update_order_meta( $order_id ) {
if ( ! empty( $_POST['order_delivery_time'] ) ) {
update_post_meta( $order_id, 'Delivery time', sanitize_text_field($_POST['order_delivery_time']) );
}
}
This all displays correctly and returns the value within the Orders section of woocommerce. However, I can't then access this data to return/display it on the thank-you page. I'm using the following code at present:
<li class="delivery_slot">
<?php _e( 'Delivery Slot', 'woocommerce' ); ?>
<strong><?php
$delivery_slots = delivery_time_slots_array();
$delivery_slot = get_post_meta($order_id, 'Delivery time', true);
if( isset($delivery_slots[$delivery_slot]) )
echo $delivery_slots[$delivery_slot];
?></strong>
I've reviewed 2 hours of posts here & on Google including the below example (which my code mirrors), but cannot get the value to display:
How to get the value instead of order_id with get_post_meta()
If you attach it to any of the hooks in the order-details.php template then the $order object will be available in your callback function
function so_34215698_display_order_meta( $order ){
$delivery_slots = delivery_time_slots_array()
$delivery_slot = get_post_meta($order->id, 'Delivery time', true);
if( isset($delivery_slots[$delivery_slot]) )
echo $delivery_slots[$delivery_slot];
}
add_action( 'woocommerce_order_details_after_order_table', 'so_34215698_display_order_meta' );

Custom fields not showing on order

I have a few custom fields within my WooCommerce setup, however I am trying to get them to display on the order view.
This is my code (one custom field for the sake of it):
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');
function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field"><h3>'.__('Extra Information').'</h3>';
woocommerce_form_field( 'date_of_birth', array(
'type' => 'select',
'class' => array('my-field-class form-row-wide'),
'label' => __('Date of Birth'),
'placeholder' => __('Enter something'),
'required' => true,
'options' => array(
'1995' => __('1995', 'woocommerce' ),
'1994' => __('1994', 'woocommerce' )
)
),
$checkout->get_value( 'date_of_birth' ));
I thought this below would do the job on adding it to the order view, however it does not.. or I am completely wrong and the custom field is not saving?
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['date_of_birth']) update_post_meta( $order_id, 'Extra Information', esc_attr($_POST['date_of_birth']));
I then looked through stackoverflow and found some more information and tried this:
function my_custom_checkout_field1($order){
echo "<p><strong>Date of Birth:</strong> " . $order->order_custom_fields['_date_of_birth'][0] . "</p>";
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field1', 10, 1 );
That does add a "Date of Birth:" to the order view, but unfortunately it is empty afterwards. I tried both _date_of_birth and date_of_birth, apparently it needed the extra _ infront, I got that answer from here: Show custom field on order in woocommerce
I have tried to look inside the database, but can not find the extra details on an order displayed anywhere (no regular details either except order id's).
Can anyone tell me what I am doing wrong and what I can do to make the field show up on the order view?
Thanks
I donĀ“t know, but this:
'Extra Information'
here:
update_post_meta($post_id, $meta_key, $meta_value, $prev_value);
Are you sure 'Extra Information' is the $meta_key? Is not "date_of_birth"?

Resources