I'd like to add a custom field to my billing checkout page in Woocommerce. I'd like it to be a birthday field and have them select it from the datepicker. How do I enable this functionality within wordpress?
Please add this in your theme's functions.php file:
<?
// ADD Custom Fields to Checkout Page
/**
* Add the field to the checkout
**/
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');
function my_custom_checkout_field( $checkout ) {
date_default_timezone_set('America/Los_Angeles');
$mydateoptions = array('' => __('Select BirthDay', 'woocommerce' ));
echo '<div id="my_custom_checkout_field"><h3>'.__('Delivery Info').'</h3>';
woocommerce_form_field( 'order_birth_date', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'id' => 'datepicker',
'required' => true,
'label' => __('Delivery Date'),
'placeholder' => __('Select Date'),
'options' => $mydateoptions
),$checkout->get_value( 'order_birth_date' ));
echo '</div>';
}
/**
* Process the checkout
**/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
global $woocommerce;
// Check if set, if its not set add an error.
if (!$_POST['order_birth_date'])
wc_add_notice( '<strong>BirthDay</strong> ' . __( 'is a required field.', 'woocommerce' ), 'error' );
}
/**
* 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['order_birth_date']) update_post_meta( $order_id, 'BirthDay', esc_attr($_POST['order_birth_date']));
}
?>
Related
I simply don't understand what's happening. I have tried so many examples on stack overflow and not a single one, even when copied and pasted directly are working.
I'm trying to add custom fields to my checkout. This is working however no matter if I write manually into the text box or textarea or have javascript fill in the boxes the 'woocommerce_checkout_process' will always fail as if the box is empty and even if I pull that code out the order will have empty data where the field data should be stored. I have honestly tried every option I have located on the internet. This is infuriating as it seems to be working for everyone else. I don't know if this is a database security issue from my host that I'm unaware of, a bug in the latest version of WooCommerce, an issue with Divi. There have been no solutions, I'm genuinely hoping that someone knows something that I can't locate.
I have also tried with a single field in 'woocommerce_after_order_notes' still to no avail.
The code is as follows and was pulled directly from WC site, I've tried every modification I could find from other forums:
/**
* Add the field to the checkout
*/
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field"><h2>' . __('Wallet Info') . '</h2>';
woocommerce_form_field( 'checkbox_address', array(
'type' => 'checkbox',
'class' => array('my-field-class form-row-wide'),
'label' => __('I have a Wallet'),
), $checkout->get_value( 'checkbox_address' ));
woocommerce_form_field( 'address_field', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Wallet Address'),
'placeholder' => __('000'),
), $checkout->get_value( 'address_field' ));
woocommerce_form_field( 'chosen_images', array(
'type' => 'textarea',
'class' => array('my-field-class form-row-wide'),
'label' => __('Chosen NFTs from above'),
), $checkout->get_value( 'chosen_images' ));
echo '</div>';
}
/**
* Process the checkout
*/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
// Check if set, if its not set add an error.
if ( ! $_POST['chosen_images'] )
wc_add_notice( __( 'Please enter something into this new shiny field.' ), 'error' );
}
/**
* 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 ( ! empty( $_POST['chosen_images'] ) ) {
update_post_meta( $order_id, 'chosen_images', sanitize_text_field( $_POST['chosen_images'] ) );
}
}
/**
* Display field value on the order edit page
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );
function my_custom_checkout_field_display_admin_order_meta($order){
echo '<p><strong>'.__('chosen_images').':</strong> ' . get_post_meta( $order->id, 'chosen_images', true ) . '</p>';
}
Thanks in advance. I appreciate anyone who looks into this with me. Cheers!
You need to replace
update_post_meta( $order_id, 'chosen_images', sanitize_text_field( $_POST['chosen_images'] ) );
With
update_post_meta( $order_id, 'chosen_images', sanitize_textarea_field( $_POST['chosen_images'] ) );
sanitize_text_field() is used for type="text" not for texarea.
Full Updated Code
/**
* Add the field to the checkout
*/
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field"><h2>' . __('Wallet Info') . '</h2>';
woocommerce_form_field( 'checkbox_address', array(
'type' => 'checkbox',
'class' => array('my-field-class form-row-wide'),
'label' => __('I have a Wallet'),
), $checkout->get_value( 'checkbox_address' ));
woocommerce_form_field( 'address_field', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Wallet Address'),
'placeholder' => __('000'),
), $checkout->get_value( 'address_field' ));
woocommerce_form_field( 'chosen_images', array(
'type' => 'textarea',
'class' => array('my-field-class form-row-wide'),
'label' => __('Chosen NFTs from above'),
), $checkout->get_value( 'chosen_images' ));
echo '</div>';
}
/**
* Process the checkout
*/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
// Check if set, if its not set add an error.
if ( ! $_POST['chosen_images'] )
wc_add_notice( __( 'Please enter something into this new shiny field.' ), 'error' );
}
/**
* 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 ( ! empty( $_POST['chosen_images'] ) ) {
update_post_meta( $order_id, 'chosen_images', sanitize_textarea_field( $_POST['chosen_images'] ) );
}
}
/**
* Display field value on the order edit page
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );
function my_custom_checkout_field_display_admin_order_meta($order){
echo '<p><strong>'.__('chosen_images').':</strong> ' . get_post_meta( $order->id, 'chosen_images', true ) . '</p>';
}
I am using the following code to display an additional input field on the edit account page of WooCommerce.
/**
* Step 1. Add your field - Age Range
*/
add_action( 'woocommerce_edit_account_form', 'misha_add_age_range_field_account_form' );
function misha_add_age_range_field_account_form() {
echo "<h4> Please fill in the following details to complete your profile for review </h4>";
woocommerce_form_field(
'certified_age_range',
array(
'type' => 'text',
'required' => true, // remember, this doesn't make the field required, just adds an "*"
'label' => 'Your Age',
'description' => '',
),
get_user_meta( get_current_user_id(), 'certified_age_range', true ) // get the data
);
}
/**
* Step 2. Save field value
*/
add_action( 'woocommerce_save_account_details', 'misha_save_age_range_account_details' );
function misha_save_age_range_account_details( $user_id ) {
update_user_meta( $user_id, 'certified_age_range', sanitize_text_field( $_POST['certified_age_range'] ) );
}
/**
* Step 3. Make it required
*/
add_filter('woocommerce_save_account_details_required_fields', 'misha_make_field_required');
function misha_make_age_range_field_required( $required_fields ){
$required_fields['certified_age_range'] = 'Age';
return $required_fields;
}
add_filter( 'woocommerce_customer_meta_fields', 'misha_admin_age_range_field' );
function misha_admin_age_range_field( $admin_fields ) {
$admin_fields['billing']['fields']['certified_age_range'] = array(
'label' => 'Age',
'description' => 'Get Certified Form Field',
);
return $admin_fields;
}
The code above works perfectly, and this is how the 'Age' field appears on the page:
But now I need to make this field into a dropdown one instead of a simple text field.
This said, I tried doing the above customisation with the following code but without the desired result. Any advice?
add_filter( 'woocommerce_save_account_details_required_fields' , 'custom_override_age_field' );
function custom_override_age_field( $account_fields ) {
$option_age = array(
'' => __( 'Select your Age Range' ),
'18-24' => '18-24',
'25-34' => '25-34',
'35-44' => '35-44',
'45-54' => '45-54',
'55-64' => '55-64',
'65+' => '65+',
);
$account_fields['account_first_name']['type'] = 'select';
$account_fields['account_first_name']['options'] = $option_age;
return $account_fields;
}
Your code says: Step 1. Add your field - in your attempt you are using the hook from step 3.. while step 3 indicates Make it required so that's your first mistake.
The bottom line is that in the first step you have to edit the woocommerce_form_field settings. In your code the type is 'text' and you have to change this to 'select'.
So you get:
/**
* Step 1. Add your field - Age Range
*/
function action_woocommerce_edit_account_form() {
echo "<h4> Please fill in the following details to complete your profile for review </h4>";
// Select field
woocommerce_form_field( 'certified_age_range', array(
'type' => 'select',
'class' => array( 'form-row-wide' ),
'label' => __( 'Your age', 'woocommerce' ),
'required' => true, // remember, this doesn't make the field required, just adds an "*"
'options' => array(
'' => __( 'Select your age range', 'woocommerce' ),
'18-24' => '18-24',
'25-34' => '25-34',
'35-44' => '35-44',
'45-54' => '45-54',
'55-64' => '55-64',
'65+' => '65+',
)
), get_user_meta( get_current_user_id(), 'certified_age_range', true ) );
}
add_action( 'woocommerce_edit_account_form', 'action_woocommerce_edit_account_form', 10, 0 );
/**
* Step 2. Make it required
*/
function filter_woocommerce_save_account_details_required_fields( $required_fields ) {
$required_fields['certified_age_range'] = __( 'Age', 'woocommerce' );
return $required_fields;
}
add_filter( 'woocommerce_save_account_details_required_fields', 'filter_woocommerce_save_account_details_required_fields', 10, 1 );
/**
* Step 3. Save field value
*/
function action_woocommerce_save_account_details( $user_id ) {
if ( isset( $_POST['certified_age_range'] ) ) {
// Update field
update_user_meta( $user_id, 'certified_age_range', sanitize_text_field( $_POST['certified_age_range'] ) );
}
}
add_action( 'woocommerce_save_account_details', 'action_woocommerce_save_account_details', 10, 1 );
/**
* Step 4. Get address fields for the edit user pages.
*/
function filter_woocommerce_customer_meta_fields( $args ) {
$args['billing']['fields']['certified_age_range'] = array(
'label' => __( 'Age', 'woocommerce' ),
'description' => __( 'Get Certified Form Field', 'woocommerce' ),
);
return $args;
}
add_filter( 'woocommerce_customer_meta_fields', 'filter_woocommerce_customer_meta_fields', 10, 1 );
I'm trying to add this basic code to add a new field to the check out page. However, it seems to disable the place order button. Here is the code:
/**
* Add the field to the checkout
*/
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
woocommerce_form_field( 'my_field_name', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Were you assisted with this order?'),
'placeholder' => __('Please enter the name of your rep here'),
), $checkout->get_value( 'my_field_name' ));
echo '</div>';
}
You just need to remember to add the start echo'<div>' tag for your field options div. Otherwise it disables the woo-commerce functionality on the page.
add_action('woocommerce_after_order_notes','my_custom_checkout_field');
function my_custom_checkout_field( $checkout ) {
//need to remember echo start tag here!
echo '<div id="my_custom_checkout_field">';
woocommerce_form_field( 'name_of_child', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Name of Child'),
'placeholder' => __('Enter something'),
), $checkout->get_value( 'name_of_child' ));
echo '</div>';
}
I'm trying to move custom fields that I created on my checkout page in the Shipping block.
What I've tried is this code: thise are the new fields
// Add a new checkout field
function filter_checkout_fields($fields){
$fields['extra_fields'] = array(
'some_field' => array(
'type' => 'text',
'required' => false,
'label' => __( 'Field 1:' )
),
'another_field' => array(
'type' => 'text',
'required' => false,
'label' => __( 'Field 2:' )
),
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'filter_checkout_fields' );
// display the extra field on the checkout form
function extra_checkout_fields(){
$checkout = WC()->checkout(); ?>
<div class="extra-fields">
<h3><?php _e( 'Title' ); ?></h3>
<?php
// because of this foreach, everything added to the array in the previous function will display automagically
foreach ( $checkout->checkout_fields['extra_fields'] as $key => $field ) : ?>
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
<?php endforeach; ?>
</div>
<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'extra_checkout_fields' );
And this is how I'm trying to move them (replace current fields)
add_filter( 'woocommerce_checkout_fields', 'another_group' );
function another_group( $checkout_fields ){
// 1. We assign a field array to another group here
$checkout_fields['some_field'] = $checkout_fields['shipping']['shipping_first_name'];
$checkout_fields['another_field'] = $checkout_fields['shipping']['shipping_last_name'];
// 2. Remove a field from a previous location
unset( $checkout_fields['shipping']['shipping_first_name'] );
unset( $checkout_fields['shipping']['shipping_last_name'] );
return $checkout_fields;
}
What is happening is that the ['shipping_first_name'] and ['shipping_last_name'] are removed (unset) but nothing appeared on their place.
Is this possible to happen at all?
you can set priority of custom field with your old field priority like below
$fields['shipping']['some_field']['priority'] = 10;
$fields['shipping']['another_field']['priority'] = 20;
Just unset the fields that you don't need as you do already but don't try to override them in this function
add_filter( 'woocommerce_checkout_fields', 'another_group' );
function another_group( $checkout_fields ){
// 2. Remove a field from a previous location
unset( $checkout_fields['shipping']['shipping_first_name'] );
unset( $checkout_fields['shipping']['shipping_last_name'] );
// ... more fields for unset here
return $checkout_fields;
}
Then in your function where you have [extra_fields] change it to [shipping] this will place the custom fields in the shipping block.
// Add a new checkout field
function filter_checkout_fields($fields){
$fields['shipping'] = array(
'some_field' => array(
'type' => 'text',
'required' => false,
'label' => __( 'Field 1:' )
),
... so on
I am working on an e-commerce website built in Woocommerce.
I want to add an extra field 'Delivery Date' in the billing form (in checkout page).
Here is the snapshot of the page:
I want to add 'Delivery Date' field next to Postcode.
The issue is that I can't find the location of this form.
I have looked everywhere in the Woocommerce Folder but couldn't find it.
My questions:
Where Woocommerce has located the billing form code?
And also: Do I just need to copy & paste the field? Or should I also add a field for it in Database?
I want the delivery date to be shown both in the dashboard and email.
You need to apply filters to add the woocommerce forms to checkhout. That's explained here in Lesson 2
https://docs.woothemes.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/
/ Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
$fields['shipping']['shipping_phone'] = array(
'label' => __('Phone', 'woocommerce'),
'placeholder' => _x('Phone', 'placeholder', 'woocommerce'),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true
);
return $fields;
}
/**
* Add the field to the checkout
*/
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
echo '<div id="my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';
woocommerce_form_field( 'my_field_name', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Delivery Date'),
'placeholder' => __('Enter something'),
), $checkout->get_value( 'my_field_name' ));
echo '</div>';
}
Next we need to validate the field when the checkout form is posted. For this example the field is required and not optional:
/* Process the checkout*/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');
function my_custom_checkout_field_process() {
// Check if set, if its not set add an error.
if ( ! $_POST['my_field_name'] )
wc_add_notice( __( 'Please enter something into this new shiny
field.' ), 'error' );
}