I’m working with the WooCommerce Block Checkout and need to implement a custom flow for business purchases. Here’s what I’m trying to achieve:

1. In the Contact Information block, I want to add a custom checkbox labeled something like “Business purchase?”
2. When the user checks this box:
   • It should automatically uncheck and hide the “Use same address for billing” checkbox. This should force the Billing Address section to be shown. (I think this could be done in JS with no server-side problems.)
   • This should force the Billing Address section to be shown.
   • Initially in this “business purchase” mode, inside the billing address section, I want to show only two custom, required fields: Tax ID and Company Name and a custom optional checkbox saying something like “The billing address is different from the shipping address”
   • All other default billing fields should be hidden and optional.
3. The additional checkbox in the billing section, when checked, should display the usual billing section fields, so that the user can input a different company addres if need be.
4. When “Business purchase?” is unchecked, the checkout flow is normal as usual. The Tax Id and Company name fields are hidden and not required and the user can uncheck “Use same address for billing” and fill out billing data normally.

So in summary:

1. Two custom checkboxes, one in Contact Info and one in Billing.
2. Dynamic field behavior in the Billing Address block depending on the above checkboxes.

I’ve been digging through the WooCommerce Blocks documentation and hooks, but it’s not clear to me how to add custom fields and dynamically show/hide parts of the billing form like this, especially when basing the visiblity on another custom fields (the checkboxes).

Here’s a snippet of what I tried:

 'mytheme/business_purchase',
        'label' => __('Business purchase?', 'mytheme'),
        'location' => 'contact',
        'type' => 'checkbox',
        'optionalLabel' => __('Business purchase?', 'mytheme')
    ]);

    // 2) "Company name" text field in the address step
    // Shown & required only if "Business purchase?" is checked
    woocommerce_register_additional_checkout_field([
        'id' => 'mytheme/company_name',
        'label' => __('Nazwa firmy', 'mytheme'),
        'location' => 'address',
        'type' => 'text',
        // Make it required only when business_purchase is true
        'required' => [
            [
                'type' => 'object',
                'properties' => [
                    'checkout' => [
                        'properties' => [
                            'additional_fields' => [
                                'properties' => [
                                    'contact-mytheme/business_purchase' => [
                                        'const' => true,
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        // Hide if business_purchase is NOT checked
        'hidden' => [
            [
                'type' => 'object',
                'properties' => [
                    'checkout' => [
                        'properties' => [
                            'additional_fields' => [
                                'properties' => [
                                    'mytheme/business_purchase' => [
                                        'const' => false,
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ]);
  }
}

From the above, the “Business purchase?” checkbox is properly being added but it does not trigger the visibility of the text field (the field is not present at all). I think that doesn’t work because in the json-schema checkout properties, the additional_fields property doesn’t expose further properties and in turn does not allow to reference their values. Source

    "checkout": {
  "type": "object",
  "description": "Checkout preferences and settings",
  "properties": {
    "create_account": {
      "type": "boolean",
      "description": "Whether the customer checked the create account checkbox"
    },
    "customer_note": {
      "type": "string",
      "description": "Customer’s note or special instructions for the order"
    },
    "additional_fields": {
      "type": "object",
      "description": "Additional checkout fields, both applied to the contact or the order locations.",
      "additionalProperties": { "type": "string" },
      "patternProperties": {
        "^[a-zA-Z0-9_-]+/[a-zA-Z0-9_-]+$": {
          "type": "string",
          "description": "Custom fields with namespace identifiers"
        }
      }
    },
    "payment_method": {
      "type": "string",
      "description": "Selected payment method identifier"
    }
  }
},

so finally, if anybody has some guidance on:

1. Dynamically toggling visiblity of custom fields based on custom checkbox values.
2. Modifing the content of the native Billing Address block conditionally (also based on custom checkbox values).
3. Adding custom fields only to the billing block, and not to the shipping block.

that would be very helpful. I’m using a custom Sage 10 theme and don’t mind writing some JavaScript or React components if needed.

Thanks in advance!