Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to Customize the WooCommerce Checkout Blocks (Add Conditional Visibility)?

Managing checkout fields in WooCommerce has become much easier with the new Checkout Blocks. These blocks give your checkout page a modern look and better performance while also letting you control what information you collect from customers.

You can now add fields like a GSTIN number and even show or hide them automatically based on the customer’s country, just with a simple code snippet.

In this guide, we’ll show how to hide a custom field only when a customer selects a specific country as their billing country.

Solution: Customize the WooCommerce Checkout Blocks

The code below registers a custom field on the WooCommerce checkout page using the new Checkout Fields API. This field appears inside the billing address section of the Checkout Blocks and is visible for all countries except the United States (US). If the customer selects US as their billing country, the field is automatically hidden.

add_action( 'woocommerce_init', function() {
    if ( ! function_exists( 'woocommerce_register_additional_checkout_field' ) ) {
        return;
    }

    woocommerce_register_additional_checkout_field([
        'id'       => 'custom/gstin_number',
        'label'    => __( 'GSTIN Number', 'your-textdomain' ),
        'location' => 'address', // near billing/shipping
        'type'     => 'text',
        'order'    => 10,
        'hidden'   => [
            'type' => 'object',
            'properties' => [
                'customer' => [
                    'properties' => [
                        'billing_address' => [
                            'properties' => [
                                'country' => [
                                    'const' => 'US', // only show for US
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ]
    ]);
});

Output

If the billing country is any country except the US:
The “GSTIN Number” custom field is visible under the address section, allowing the customer to enter their GSTIN before placing the order.

Customize the WooCommerce Checkout Blocks

If the billing country is the United States (US):
The “GSTIN Number” field is hidden automatically. It will not appear anywhere on the checkout form.

If you’re just starting with Checkout Blocks and want to understand how custom fields are added in the first place not just shown or hidden check out our detailed guide on how to add additional checkout fields to WooCommerce checkout blocks.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Leave a Reply

Your email address will not be published. Required fields are marked *

Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible.

Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

By using our site, you acknowledge that you have read and understood our Privacy Policy and Terms & Conditions.