Magento 2: How to add date of birth and gender fields in checkout

Question

I enabled Gender and Date of Birth from Customer Configuration in back-end. Those fields are showing in registration page but I also want to add those fields in checkout page too where customer enters address information.

Answer 1

You need to create a module for the new field(s). I used this tutorial to add a date of birth field to my shipping step. The tutorial is for adding a custom field to shipping address but the basics are the same.

(One of the files he uses is missing in the tutorial but it is in the 'sample' that he links at the end)

To find out how to save the data i would like to refer you to this article:

Here

Answer 2

The gender is a customer property and because of this it will not be visible in checkout. Use the prefix for the gender:

Shop > Configuration > Customers > Customer Configuration > Name and Address Options > Show Prefix

After that you modify the things a little bit. Otherwise the first gender will be the default.

In your di.xml

<preference for="Magento\Checkout\Block\Checkout\LayoutProcessor" type="Vendor\Module\Block\Checkout\LayoutProcessor"/>

Your override

namespace Vendor\Module\Block\Checkout;

class LayoutProcessor extends \Magento\Checkout\Block\Checkout\LayoutProcessor
{
    public function process($jsLayout)
    {
        $jsLayout = parent::process($jsLayout);
        $shippingPrefix = &$jsLayout["components"]["checkout"]["children"]["steps"]["children"]["shipping-step"]["children"]["shippingAddress"]["children"]["shipping-address-fieldset"]["children"]["prefix"];
        $this->changePrefix($shippingPrefix);

        $payments = &$jsLayout["components"]["checkout"]["children"]["steps"]["children"]["billing-step"]["children"]["payment"]["children"]["payments-list"]["children"];
        foreach ($payments as &$payment) {
            $this->changePrefix($payment["children"]["form-fields"]["children"]["prefix"]);
        }

        return $jsLayout;
    }

    private function changePrefix(&$prefix)
    {
        $prefix["label"] = "Anrede";
        $prefix["options"] = [["value" => "", "label" => "Anrede"], ["value" => "Herr", "label" => "Frau"], ["value" => "Herr", "label" => "Herr"]];
    }
}