Change WooCommerce Checkout “Additional Information” Field And Add Your Own

Change WooCommerce Checkout “Additional Information” Field And Add Your Own

Hey there! If you are figuring out how to change the Additional Information and Order Notes tab on the Checkout of WooCommerce and WordPress you have come to the right place!

I am going to try to make this short and simple. Watch the video to explain where to input and change the code!

How To Change & Edit The "Additional Information" and "Order Notes" in WooCommerce Checkout

Step 1: Go to your theme “functions.php” file. 

How to get there: Appearance –> Theme Editor –> Look on the right sidebar for “functions.php” and click  on it then scroll all the way down and get ready to copy and paste the code.

Step 2: Copy everything in the grey box below and paste it at the bottom of your “functions.php” file. 

/** WooCommerce Checkout Editing Fields
 */
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {

    echo '<div id="my_custom_checkout_field"><h3>' . __('What Type of Website?') . '</h3>';

    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Example: Watch Store, Amazon Products, Yoga Studio, Fitness Gear Store, Photography Services'),
        'placeholder'   => __(''),
		'required'    => true,
        ), $checkout->get_value( 'my_field_name' ));

    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['my_field_name'] )
        wc_add_notice( __( 'Please enter the type of website we will create for you.' ), '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['my_field_name'] ) ) {
        update_post_meta( $order_id, 'My Field', sanitize_text_field( $_POST['my_field_name'] ) );
    }
}

// // Removes Order Notes Title - Additional Information & Notes Field
add_filter( 'woocommerce_enable_order_notes_field', '__return_false', 9999 );



// Remove Order Notes Field
add_filter( 'woocommerce_checkout_fields' , 'remove_order_notes' );

function remove_order_notes( $fields ) {
     unset($fields['order']['order_comments']);
     return $fields;
}

If you just want to remove the “Additional Information” and “Order Notes” from the checkout page use this code below in the blue box: (Same thing copy and paste at the bottom of your “functions.php” file)

// // Removes Order Notes Title - Additional Information & Notes Field
add_filter( 'woocommerce_enable_order_notes_field', '__return_false', 9999 );

// Remove Order Notes Field
add_filter( 'woocommerce_checkout_fields' , 'remove_order_notes' );

function remove_order_notes( $fields ) {
     unset($fields['order']['order_comments']);
     return $fields;
}

Step 3: How to edit the titles you just created from the code in the grey box.

While in your “functions.php” file look through the code you just pasted from the grey box above for these terms: (You could also search them by using your keyboard “control then f” which means find and a search bar will pop up)

– What Type of Website?
– Example: Watch Store, Amazon Products, Yoga Studio, Fitness Gear Store, Photography Services
– Please enter the type of website we will create for you.

Simply remove and input your own titles and information once you find those in the code.

To break down what each one means:

“What Type of Website?” – is the main title 

“Example: Watch Store, Amazon Products, Yoga Studio, Fitness Gear Store, Photography Services” – is the placeholder

“Please enter the type of website we will create for you.” – is the required field indicator when someone tries to checkout and doesn’t input anything

It’s as simple as that! I hope this 3 Step Process has helped you. Let me know if you have any questions or problems in the comments below. Please share this with anyone you feel needs it as this is a great resource for fixing the Additional Information and Order Notes tab in the WooCommerce and WordPress Checkout!

PS. Try to use this code over any plugin as plugins with slow down your website and cause the loading time to increase so this code is a useful for anyone.

Cheers,

Matt from WebDesignbyMatt.com

Leave a Reply