WooCommerce: Add Custom Greeting Card Field in Checkout

index.php

<?php
/*
 * WooCommerce: Add Custom Greeting Card Field in Checkout
 * https://www.linkedin.com/posts/activity-7261525050271399938-Tt24
 *
 * This code snippet adds a custom textarea field in the WooCommerce checkout page
 * for customers to add a personal greeting card message. The message is saved with 
 * the order, displayed in the admin order edit page, and can be edited by the admin.
 * 
 * Usage:
 * - Add the code to your theme's 'functions.php' file or create a custom plugin to implement it.
 * - Enhances customer experience by allowing personalized messages, potentially increasing engagement.
 * 
 * Developed by: amirhp-com
 * Website: https://amirhp.com
 *
 * Disclaimer:
 * - Use this code at your own risk. The developer is not responsible for any issues or malfunctions 
 *   that may occur. Always test in a development environment first.
 */

// Display the textarea field at checkout
add_action("woocommerce_before_order_notes", function ($checkout) {
  woocommerce_form_field("gift_card_content", array(
      "type"        => "textarea",
      "class"       => array("add-postal-cart-class form-row-wide"),
      "label"       => "متن کارت تبریک",
      "placeholder" => "مثال: تقدیم به مادر عزیزم",
    ),
    $checkout->get_value("gift_card_content")
  );
});

// Save the textarea field value in order meta
add_action("woocommerce_checkout_update_order_meta", function ($order_id) {
  if (!empty($_POST["gift_card_content"])) {
    $order = wc_get_order($order_id);
    $order->update_meta_data("gift_card_content", sanitize_text_field($_POST["gift_card_content"]));
    $order->save();
  }
});

// Display the field value in the WooCommerce admin order edit page
add_action("woocommerce_admin_order_data_after_billing_address", function ($order) {
  $gift_card_content = get_post_meta($order->get_id(), "gift_card_content", true);
  if ($gift_card_content) {
    echo '<p class="display-gif-cart-info"><strong>متن کارت تبریک:</strong> ' . esc_html($gift_card_content) . '</p>';
  }
}, 10, 1);

// Display and make the field editable in the WooCommerce admin order edit page
add_action("woocommerce_admin_order_data_after_billing_address", function ($order) {
  ?>
    <style>
      .edit-gift-cart-area {
        display: none;
      }

      #order_data .order_data_column div.edit_address[style]~.display-gif-cart-info {
        display: none;
      }

      #order_data .order_data_column div.edit_address[style]~.edit-gift-cart-area {
        display: block;
      }
    </style>
  <?php
  woocommerce_wp_textarea_input(array(
    "id"            => "gift_card_content",
    "label"         => "<strong>کارت تبریک</strong>",
    "wrapper_class" => "form-field-wide edit-gift-cart-area",
    "rows"          => "4",
    "placeholder"   => "افزودن کارت تبریک",
    "description"   => "پیام کارت تبریک را اینجا ویرایش کنید.",
    "value"         => get_post_meta($order->get_id(), "gift_card_content", true),
  ));
}, 10, 1);

// Save the edited field value from the admin order page
add_action("woocommerce_process_shop_order_meta", function ($order_id) {
  if (isset($_POST["gift_card_content"])) {
    $order = wc_get_order($order_id);
    $order->update_meta_data("gift_card_content", sanitize_text_field($_POST["gift_card_content"]));
    $order->save();
  }
});