I have been looking for a solution to display a custom input field on Checkout page in Payment option area when Cash ON Delivery option is selected. Upon selection it displays a field in which customer inputs a value and the data is sent to the admin order details page. This is what I came up with. I inserted this code in checkout/payment-method.php

<?php if ( $gateway->has_fields() || /* $gateway->get_description() && */ $gateway->id != "cod" ) : ?>
<?php endif; ?>
<?php if ( $gateway->id == "cod" ) : ?>
<div class="payment_box payment_method_<?php echo $gateway->id; ?>" <?php if ( ! $gateway->chosen ) : ?>style="display:none;"<?php endif; ?>>
<input type="text" name='cod_custom_field' placeholder="Enter Your Margin" >
<?php endif; ?>     

This is what it look like on checkout page Checkout COD custom box

Full template here

Here it is the code which resides in function.php

 * 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['cod_custom_field'] ) ) {
        update_post_meta( $order_id, 'COD Custom Field', sanitize_text_field( $_POST['cod_custom_field'] ) );

/** Field Entry Karne ke liye
 * Display field value on the order edit page
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<p><h2><strong><h2>'.__('Reseller Margin').':</h2></strong> ' . get_post_meta( $order->id,'COD Custom Field', true ) . '</h2></p>';

Here is the image what it looks like on checkout page When I input a value it displays something like this in admin order details: Admin Order Details

Now I want same value to be displayed on order details page on frontend as well. PLz tell me how do I do it? Here it is where I want that input value to be displayed with Label - "Margin or Your Bonus" Order details page on My account (customers)

2 Answers 2

  1. Adding the new custom field on the WooCommerce checkout page

You can add the new custom field in various places on the Checkout page. WooCommerce has defined many actions for the checkout page. Ideally, I would like my fields after the billing or shipping address fields.

We will add a custom field below the billing address fields. To add that field below billing address we will use action woocommerce_after_checkout_billing_form.

add_action( 'woocommerce_after_checkout_billing_form', 'display_extra_fields_after_billing_address' , 10, 1 );
function display_extra_fields_after_billing_address () {
    _e( "Delivery Date: ", "add_extra_fields");
    <input type="text" name="add_delivery_date" class="add_delivery_date" placeholder="Delivery Date">

enter image description here


Now I want same value to be displayed on order details page on frontend as well. PLz tell me how do I do it?

the woocommerce_order_details_after_order_table action will achieve what you want.

add_action( 'woocommerce_order_details_after_order_table',
            'namespace\custom_field_display_cust_order_meta', 10, 1 );

function custom_field_display_cust_order_meta( $order ) {
  echo '[whatever]';
  /* translators: whatever */
  echo '<p>' . sprintf( __( '<strong>Property 1:</strong> %1$s (%2$s)' ),
                        get_post_meta( $order->get_order_number(),
                                       'property 1.1', true ),
                        get_post_meta( $order->get_order_number(),
                                       'property 1.2', true ) )
       . '</p>';
  echo '[whatever]';

I have no idea if Woocommerce has filters to properly format property fields.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.