How to customize checkout widget build as Gutenberg block using custom plugin

Hi @nabeelahmad2580

The new WooCommerce Checkout block uses a different architecture than the classic checkout, which is why your current implementation isn’t affecting the field visibility as expected.

However, to make your plugin compatible with the new Checkout block, you’ll need to:

1. Implement WooCommerce Blocks integration
2. Add JavaScript functionality to control field visibility

Here’s an example to update your plugin:

1. Add a new PHP class to handle the integration:

add_filter('woocommerce_blocks_checkout_block_registration', 
  array($this, 'register_checkout_block_integration'));

2. Create a JavaScript file to handle the field visibility:

registerCheckoutFilters('your-plugin-name', {
  additionalFields: (defaultFields, extensions) => {
    // Your field visibility logic here
  }
});

3. Enqueue the JavaScript file when the Checkout block is present:

add_action('wp_enqueue_scripts', array($this, 'enqueue_checkout_block_scripts'));

More info:

• https://developer.woocommerce.com/docs/cart-and-checkout-handling-scripts-styles-and-data/
• https://github.com/woocommerce/woocommerce-checkout-integration-example/blob/main/woocommerce-checkout-integration-example.php
• https://rudrastyh.com/woocommerce/checkout-block-payment-method-integration.html

If you are still having problems, we recommend asking development questions on the #developers channel of the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question. You can also seek help from the following:

• A local web developer
• Codeable.io
• WooExperts

I wish I could help more, but hopefully, this gets you going in the right direction to get the job done.