Ecommerce Shopify WordPress Discussion

Add a custom checkout field after the billing fields in WooCommerce

I want to add a custom field at the bottom of the billing section but I get two fields instead. The heading and the input are right but I get another unwanted input field inside the woocommerce-billing-fields__field-wrapper. functions.php // Add a custom text field to WooCommerce checkout billing section add_filter('woocommerce_checkout_fields', 'custom_checkout_field'); function custom_checkout_field($fields) { $fields['billing']['custom_text_field'] = array( 'type' => 'text', 'class' => array('form-row-wide'), 'label' => __('Custom Text Field', 'woocommerce'), 'placeholder' => __('Enter your custom text', 'woocommerce'), 'required' => true, ); return $fields; } // Save the custom text field value to the order meta add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_field'); function save_custom_checkout_field($order_id) { if (!empty($_POST['custom_text_field'])) { update_post_meta($order_id, '_custom_text_field', sanitize_text_field($_POST['custom_text_field'])); } } // Display the custom text field on the checkout page add_action('woocommerce_after_checkout_billing_form', 'display_custom_checkout_field'); function display_custom_checkout_field($checkout) { ?> <div id="custom_checkout_field_display"> <h3><?php _e('Custom Text Field'); ?></h3> <div class="custom-text-field-wrapper"> <?php woocommerce_form_field('custom_text_field', array( 'type' => 'text', 'class' => array('form-row-wide'), 'label' => __('Custom Text Field', 'woocommerce'), 'placeholder' => __('Enter your custom text', 'woocommerce'), 'required' => true, ), $checkout->get_value('custom_text_field')); ?> </div> </div> <?php } Structure
You are adding 2 times this custom checkout field, there are some mistakes and missing things in your code. Since WooCommerce 3, the hook woocommerce_checkout_update_order_meta is outdated and replaced by woocommerce_checkout_create_order (compatible WooCommerce with High-Performance Order Storage). As your field is a required field, the field validation need to be implemented. You also need to save this custom field value as custom user metadata, so it will work with: $checkout->get_value($field_key). Try the following code replacement: // Display the custom text field on the checkout page add_action( 'woocommerce_after_checkout_billing_form', 'display_custom_checkout_field' ); function display_custom_checkout_field( $checkout ) { $field_key = 'my_custom_field'; echo '<div id="custom_checkout_field_display"> <h3>' . esc_html__('Custom Text Field Section', 'woocommerce') . '</h3> <div class="custom-text-field-wrapper">'; woocommerce_form_field( $field_key, array( 'type' => 'text', 'class' => array('form-row-wide'), 'label' => esc_html__('My Custom field', 'woocommerce'), 'placeholder' => esc_html__('My Custom field placeholder text', 'woocommerce'), // Optional 'required' => true, ), $checkout->get_value($field_key) ); echo '</div> </div>'; } // Custom checkout field validation add_action( 'woocommerce_checkout_process', 'custom_checkout_field_validation' ); function custom_checkout_field_validation() { $field_key = 'my_custom_field'; if ( isset($_POST[$field_key]) && empty($_POST[$field_key]) ) { wc_add_notice( __('<strong>My Custom field</strong> is a required field.', 'woocommerce'),'error' ); } } // Save the custom checkout field value as custom order metadata add_action( 'woocommerce_checkout_create_order', 'save_custom_checkout_field_value_order_meta' ); function save_custom_checkout_field_value_order_meta( $order ) { $field_key = 'my_custom_field'; if ( isset($_POST[$field_key]) && ! empty($_POST[$field_key]) ) { $order->update_meta_data( '_' . $field_key, sanitize_text_field($_POST[$field_key]) ); } } // Save the custom checkout field value as custom customer metadata add_action( 'woocommerce_checkout_create_order', 'save_custom_checkout_field_value_customer_meta') ; function save_custom_checkout_field_value_customer_meta( $customer ) { $field_key = 'my_custom_field'; if ( is_user_logged_in() && isset($_POST[$field_key]) && ! empty($_POST[$field_key]) ) { $customer->update_meta_data( $field_key, sanitize_text_field($_POST[$field_key]) ); } } Code goes in functions.php file of your theme (or in a plugin). Tested and works.

January 20, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.