How to make a custom field required based on country on WooCommerce checkout?

1
votes

I've added a custom field to the checkout page (billing_vat) and it needs to be required when the country is set to Ireland (IE).

Currently, I've changed the label to show that it's required in the same way as all the other fields using JavaScript and have hooked into 'woocommerce_get_country_locale' to change the field to required for IE.

add_filter('woocommerce_billing_fields', 'dc_custom_billing_fields', 1000, 1);
function dc_custom_billing_fields( $fields ) {
    $fields['billing_vat'] = array(
        'label'        => 'VAT Number',
        'required'     => false,
        'type'         => 'text',
        'class'        => array( 'form-row-wide' ),
        'priority'     => 35,
    );

    return $fields;
}

add_filter( 'woocommerce_get_country_locale', 'dc_change_locale_field_defaults', 1000, 1 );
function dc_change_locale_field_defaults($countries) {
    $countries['IE']['billing_vat']['required'] = true;

    return $countries;
}

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'dc_display_admin_order_meta', 10, 1 );
function dc_display_admin_order_meta($order) {
    echo '<p><strong>'.__('Billing VAT').':</strong> ' . get_post_meta( $order->get_id(), '_billing_vat', true ) . '</p>';
}

add_action( 'woocommerce_after_order_notes', 'dc_after_checkout_field' );
function dc_after_checkout_field() {
    ?>
    <script>
        (function($) {
            $(document).ready(function (){
                $('#billing_country').on('change',function() {
                    if ($('#billing_country').val() == 'IE') {
                        // Required
                        $('#billing_vat').prop('required', true);
                        $('label[for="billing_vat"] .optional').remove();
                        $('label[for="billing_vat"]').append('<abbr class="required" title="required">*</abbr>');
                    } else {
                        $('#billing_vat').removeProp('required');
                        $('label[for="billing_vat"] .required').remove();
                        $('label[for="billing_vat"]').append('<span class="optional">(optional)</span>');
                    }
                })
            });
        })(jQuery);
    </script>
    <?php
}

However when I submit the form, with the country set to Ireland and the field empty, Woo doesn't say that the field is required.

2
phpjquerywordpresswoocommercecheckout

2 Answers

3
votes

To make the custom field billing_vat required, when the country is set to Ireland (IE).

Just replace your existing code with: (explanation via comment tags, added to the code)

// Add field
function filter_woocommerce_billing_fields( $fields ) {
    $fields['billing_vat'] = array(
        'label'        => 'VAT Number',
        'required'     => false,
        'type'         => 'text',
        'class'        => array( 'form-row-wide' ),
        'priority'     => 35,
    );

    return $fields;
}
add_filter( 'woocommerce_billing_fields', 'filter_woocommerce_billing_fields', 10, 1 );

// Validate
function action_woocommerce_after_checkout_validation( $data, $error ) {
    if ( $data['billing_country'] == 'IE' && empty( $data['billing_vat'] ) ) {
        $error->add( 'validation', 'Required based on country.' );
    }
}
add_action('woocommerce_after_checkout_validation', 'action_woocommerce_after_checkout_validation', 10, 2 );

// jQuery
function action_woocommerce_after_order_notes( $checkout ) {
    ?>
    <script>
        (function($) {
            $(document).ready(function () {
                required_or_optional(); //this calls it on load
                $( '#billing_country' ).change( required_or_optional );

                function required_or_optional() {
                    if ( $( '#billing_country' ).val() == 'IE' ) {
                        // Required
                        $( '#billing_vat' ).prop( 'required', true );
                        $( 'label[for="billing_vat"] .optional' ).remove();
                        $( 'label[for="billing_vat"]' ).append( '<abbr class="required" title="required">*</abbr>' );
                    } else {
                        $( '#billing_vat' ).removeProp( 'required' );
                        $( 'label[for="billing_vat"] .required' ).remove();

                        // Avoid append this multiple times
                        if ( $( 'label[for="billing_vat"] .optional' ).length == 0 ) {
                            $( 'label[for="billing_vat"]' ).append( '<span class="optional">(optional)</span>' );
                        }
                    }
                }
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'woocommerce_after_order_notes', 'action_woocommerce_after_order_notes', 10, 1 );

// Display on the order edit page (backend)
function action_woocommerce_admin_order_data_after_shipping_address( $order ) {
    if ( $value = $order->get_meta( '_billing_vat' ) ) {
        echo '<p><strong>' . __( 'Billing VAT', 'woocommerce' ) . ':</strong> ' . $value . '</p>';
    }
}
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'action_woocommerce_admin_order_data_after_shipping_address', 10, 1 );
1
votes

Just add below code snippet to your existing code snippets and hopefully, you will be done to manage validation for Ireland

add_action('woocommerce_checkout_process', 'billing_vat_field_process');
function billing_vat_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['billing_vat']  && !empty($_POST['billing_country']) && 
    $_POST['billing_country'] == "IE" ){
      wc_add_notice( __( 'Please enter VAT number' ), 'error' );
   }
}