Adding WooCommerce custom checkout field not working in custom plugin

Question

I am creating a WooCommerce plugin for my requirements. When I activate my plugin I created two (2) user meta fields on User Form and saving the data, it's working perfectly.

Now I am trying to add custom dropdown field on checkout page, but it's not working. I searched a lot and asked to chatgpt but nothing worked. It even didn't show me the label or heading.

Here is the code of plugin main file:

<?php
defined('ABSPATH') || exit;

// Checking if Woocommerce installed or not
if(!in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {
    exit;
}

if(!defined('WCSF_PLUGIN_FILE')) {
    define('WCSF_PLUGIN_FILE', __FILE__);
}
if(!defined('WCSF_PLUGIN_URL')) {
    define('WCSF_PLUGIN_URL', plugin_dir_url(__FILE__));
}

// Load plugin text domain
if(!function_exists('wcsf_plugin_load_textdomain')) {
    add_action('init', 'wcsf_plugin_load_textdomain');
    function wcsf_plugin_load_textdomain() {
        load_plugin_textdomain('wcsf', false, dirname(plugin_basename(__FILE__)).'/languages');
    }
}

// Plugin activation Hook
if(!function_exists('wcsf_plugin_activation')) {
    function wcsf_plugin_activation() {
        // Adding Roles
        wcsf_user_roles();
    }

    register_activation_hook(__FILE__, 'wcsf_plugin_activation');
}

//=========> Delete Data on uninstall
register_uninstall_hook('uninstall.php','wcsf_plugin_activation');

if(!function_exists('wcsf_user_roles')) {
    function wcsf_user_roles() {
        // My roles
    }
}

if(!function_exists('wcsf_enqueue_global_scripts')) {
    function wcsf_enqueue_global_scripts() {
        wp_enqueue_script('wcsf-custom-script', plugins_url('/public/js/custom-script.js', __FILE__), array('jquery'), '1.0', true);
        wp_enqueue_style('wcsf-custom-style', plugins_url('/public/css/custom-style.css', __FILE__), array(), '1.0');
    }

    add_action('wp_enqueue_scripts', 'wcsf_enqueue_global_scripts');
}

if(!function_exists('wcsf_custom_franchiser_fields_added')) {
    function wcsf_custom_franchiser_fields_added() {
       // user meta field code
   }

    add_action('user_new_form', 'wcsf_custom_franchiser_fields_added');
}

After that I tried (Hooks / Filters):

Code Trying 01

add_action('woocommerce_after_checkout_shipping_form','wcsf_city_checkout_page');
function wcsf_city_checkout_page() {
  echo '<div id="custom_checkout_field"><h2>' . esc_html__('Custom City','wcsf') . '</h2></div>';
}

Code Trying 02

add_action('woocommerce_checkout_fields','wcsf_city_checkout_page');
function wcsf_city_checkout_page() {
    echo '<div id="custom_checkout_field"><h2>' . esc_html__('Custom City','wcsf') . '</h2> 
    </div>';
}

Code Trying 03

add_action('woocommerce_after_checkout_shipping_form','wcsf_city_checkout_page');
function wcsf_city_checkout_page() {
   echo '<div id="custom_checkout_field"><h2>' . esc_html__('Custom City','wcsf') . '</h2></div>';
}

Code Trying 04

add_filter('woocommerce_checkout_fields','wcsf_city_checkout_page');
function wcsf_city_checkout_page($checkout) {
   $checkout['shipping']['custom_city'] = array(
      'label'     => __( 'Custom City', 'example' ),
      'type'      => 'text',
      'placeholder'   => _x( 'Type', 'placeholder', 'example'),
      'required'  => false,
      'class'     => array( 'custom_city' ),
      'clear'     => true
     );
  return $checkout;
}

And much more codes. I am using WordPress custom theme twentytwo and also tried these codes in active theme's functions.php file, but none of them code is working. I even write die; or exit; in callback functions, but nothing happened.

I searched a lot and tried a lot of codes (From stack overflow) but nothing happened and surprised why these hooks or filters not working.

Did I miss something, including WooCommerce file etc. ?

Note: I used PHP 8, WordPress 6.1.4 and latest Woocommerce. and just Woocmmerce show me this kind of warning and its just showing on checkout page only.

Deprecated: Creation of dynamic property WC_Order_Item_Shipping::$legacy_package_key is deprecated in plugins\woocommerce\includes\class-wc-checkout.php on line 604

Hope you guys understood my question and what I am facing the problem.

Answer 1

You can switch to the legacy checkout page.

Go to Pages->Checkout->Edit Remove the checkout block and replace it with the shortcode [woocommerce_checkout]