Adding Custom Field to Woo Checkout Page

Hi,

My demo site: https://shop.posmay.com/

I’d like to add

1. The company name field to the checkout page (I’ve read up here that this is added by default, but is not showing up on my shop’s checkout page) and …

2. A custom text form field to my Woo checkout page to capture the customers VAT/Tax number. Ideally it should show up under the Payment Info section.

I’ve researched and tried various ways of doing this both using plugins (e.g. Flexible Checkout Fields) and PHP code, but after adding code or adding the field using a plugin I just cannot seem to get it to work/show up.

I understand that I need to:

1. Create the custom field
2. Add it to the checkout page
3. And make sure it is captured as part of the order meta data

Ideally I’d like to add it using PHP code (if possible) but am also open to using a plugin.

Some of the resources that I’ve reviewed and tried:

– https://aovup.com/woocommerce/vat-number-field/
– https://www.businessbloomer.com/woocommerce-add-custom-checkout-field-php/
– https://wordpress.org/support/topic/how-to-insert-conditional-cusotm-form-field-on-checkout-page/

In case I need to hook it into the checkout page:
– https://www.businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/

I generally keep “Distraction-free mode” checked … in case that is causing this issue. Should I rather leave that unchecked?

Please let me know if this is beyond the scope of GP and GB support. Appreciate any guidance and support.

—

Update

I’ve also tried the adding following code to my functions file from: https://developer.woocommerce.com/docs/customizing-checkout-fields-using-actions-and-filters/, which also does not seem to work.

// ADD CUSTOM FIELD 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 ) {

    echo '' . esc_html__( 'My Field' ) . '';

    woocommerce_form_field(
        'my_field_name',
        array(
            'type'        => 'text',
            'class'       => array( 'my-field-class form-row-wide' ),
            'label'       => __( 'Fill in this field' ),
            'placeholder' => __( 'Enter something' ),
        ),
        $checkout->get_value( 'my_field_name' )
    );

    echo '';

}

/**
 * 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( esc_html__( '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['my_field_name'] ) ) {
        $order = wc_get_order( $order_id );
        $order->update_meta_data( 'My Field', sanitize_text_field( $_POST['my_field_name'] ) );
        $order->save_meta_data();
    }
}

/**
 * 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 '' . esc_html__( 'My Field' ) . ': ' . esc_html( $order->get_meta( 'My Field', true ) ) . '';
}

add_filter( 'woocommerce_billing_fields', 'wc_npr_filter_phone', 10, 1 );