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' );
}
Related
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 went through Save and display specific payment gateway additional field everywhere in Woocommerce that displays an additional dropdown field for specific payment gateway in checkout page. But I need to show a text box instead of the drop down menu and save and show in orders, emails etc.
I have edit the code from the above link and made changes according to my ipg plugin, but it doesn't show.
add_filter( 'woocommerce_gateway_description', 'gateway_digitalipg_custom_fields', 20, 2 );
function gateway_digitalipg_custom_fields( $description, $payment_id ){
//
if( 'digitalipg' === $payment_id ){
ob_start(); // Start buffering
echo '<div class="digital-ipg" style="padding:10px 0;">';
woocommerce_form_field( 'digital-ipg', array(
'type' => 'select',
'label' => __("Fill in this field", "woocommerce"),
'class' => array('form-row-wide'),
'required' => true,
'options' => array(
'' => __("Select something", "woocommerce"),
'Option 1' => __("Choice one", "woocommerce"),
'Option 2' => __("Choice two", "woocommerce"),
),
), '');
echo '<div>';
$description .= ob_get_clean(); // Append buffered content
}
return $description;
}
the output was nothing i dont see any dropdowns on the cart when i select my ipg
I have been scratching my head all day. I would like to add a custom checkbox within order review before placing order. Here is my code:
add_action( 'woocommerce_checkout_order_review', 'my_checkbox' );
function my_checkbox( $checkout ) {
echo '<div class="my_split_checkbox"><h2>' . __('Split Order', 'woocommerce') . '</h2>';
woocommerce_form_field( 'my_split_checkbox', array(
'type' => 'checkbox',
'class' => array('checkbox_field'),
'label' => __('Split Order', 'woocommerce'),
'required' => false,
), $checkout->get_value( 'my_split_checkbox' ));
echo '</div>';
}
but the page doesn't fully load. However if I replace the hook by
add_action( 'woocommerce_after_checkout_billing_form', 'my_checkbox' );
then the chekbox shows at the end of billing details with no issues. How can I get the textbox to show within checkout order review? Ideally after table .woocommerce-checkout-review-order-table.
You should use any of those below hooks instead of woocommerce_checkout_order_review to show the checkbox field based on your priority-
woocommerce_review_order_after_cart_contents
woocommerce_review_order_before_shipping
woocommerce_review_order_after_shipping
woocommerce_review_order_before_order_total
woocommerce_review_order_after_order_total
For further information go to woocommerce/templates/checkout/review-order.php. If you already copied the templates folder as woocommerce to your theme directory then may be you'll find the review-order.php there. And also you need to remove $checkout variable as well as , $checkout->get_value( 'my_split_checkbox' ). Cause those hooks do not pass any parameter. Please check the review-order.php, you'll get an overview.
So your whole code will be like below-
add_action( 'woocommerce_checkout_order_review', 'my_checkbox' );
function my_checkbox() {
echo '<div class="my_split_checkbox"><h2>' . __('Split Order', 'woocommerce') . '</h2>';
woocommerce_form_field( 'my_split_checkbox', array(
'type' => 'checkbox',
'class' => array('checkbox_field'),
'label' => __('Split Order', 'woocommerce'),
'required' => false,
));
echo '</div>';
}
Hope that helps.
Adding placeholder to Postcode billing field in Woocommerce.
In core class-wc-countries.php
'postcode' => array(
'label' => __( 'Postcode / ZIP', 'woocommerce' ),
'required' => true,
'class' => array( 'form-row-last', 'address-field' ),
'clear' => true,
'validate' => array( 'postcode' ),
'autocomplete' => 'postal-code',
),
So there is no way to override it woocommerce_billing_fields filter. Why some fields have placeholder key but other not? Some fields have only labels, some only placeholders and some have both. I don't get logic behind this.
So my question is: how to add placeholder text to Postcode field. I can do it with Javascript, but that seams not natural. Also I can modify core, which is even worse then Javascript solution. What else can I do?
As suggested by #Ash Patel we can do it like this:
add_filter( 'woocommerce_checkout_fields', function($fields){
$fields['billing']['billing_postcode']['placeholder'] = __('My Post Code', 'woocommerce');
return $fields;
} );
And for shipping
add_filter( 'woocommerce_shipping_fields', function($fields){
$fields['shipping_postcode']['placeholder'] = __('My Post Code', 'woocommerce');
return $fields;
} );
add below code into your function.php for adding/updating postal code for checkout and edit screen.
//on edit address screen
function filter_woocommerce_billing_fields( $wooccm_billing_fields, $int ) {
$wooccm_billing_fields['billing_postcode']['placeholder'] = __('My Post Code', 'woocommerce');;
return $wooccm_billing_fields;
};
add_filter( 'woocommerce_billing_fields', 'filter_woocommerce_billing_fields', 10, 2 );
add_action('woocommerce_checkout_fields', 'update_placeholder_checkout_form_billing');
function update_placeholder_checkout_form_billing($wcCheckout_fields) {
$wcCheckout_fields['billing']['billing_postcode'] = array(
'label' => 'Postcode / ZIP',
'placeholder' => _x('My Post Code', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('checkout-billing-postal-code')
);
return $wcCheckout_fields;
}
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']));
}
?>