In Magento, custom checkout fields are additional fields that you can add to the checkout page to collect specific information from customers during the checkout process. These fields can be used to gather data such as gift messages, special instructions, additional contact information, or any other custom information you need from your customers.
To add Magento custom checkout fields without using any third-party extensions, you can follow these steps:
Step 1: Create a Custom Module
Create a new module: Create a new custom module in your Magento installation if you haven't already. This involves creating the necessary files and folders in the app/code directory of your Magento installation.
Step 2: Create a Setup Script
Create a setup script: Inside your custom module, create a setup script to add new fields to the quote and order tables. This script should be located in the Setup folder of your module and should extend Magento\Framework\Setup\UpgradeSchemaInterface. In the upgrade method of this script, you can use the \Magento\Framework\Setup\ModuleDataSetupInterface to add new fields to the tables.
Step 3: Create a Layout XML File
Create a layout XML file: Create a layout XML file to define the position of your custom fields on the checkout page. This file should be located in the view/frontend/layout folder of your module. Use XML tags to define the block types and templates for your custom fields.
Step 4: Create Block and Template Files
Create block and template files: Create a block file and a template file for your custom fields. The block file should be located in the Block folder of your module, and the template file should be located in the view/frontend/templates folder. In the block file, you can define methods to retrieve and save data, while the template file contains the HTML markup for your custom fields.
Step 5: Modify Checkout Templates
Modify checkout templates: Override the default checkout templates in your custom module if necessary. You can do this by placing the modified template files in the view/frontend/templates folder of your module, following the same file structure as the core checkout templates.
Step 6: Save and Display Custom Field Data
Save and display custom field data: Modify the controller responsible for saving the checkout data to include logic for saving and retrieving data from your custom fields. You can use the quote object to save data to the quote, and later, the data will be transferred to the order during the order placement process.
Step 7: Test Your Custom Checkout Fields
Test your custom checkout fields: After implementing the above steps, test your custom checkout fields thoroughly to ensure they are displayed correctly on the checkout page, the data is saved properly, and it is available in the order details after the order is placed.
Please note that these steps provide a general overview of the process. The actual implementation might vary based on your specific requirements and the version of Magento you are using. It's essential to refer to the official Magento 2 documentation and follow best practices while implementing customizations to ensure compatibility and maintainability of your code.
You may want to know the detailed instruction to add Magento custom checkout fields using codes: https://bsscommerce.com/blog/add-magento-custom-checkout-fields/