Blog · WebJi® India

Customize the WooCommerce Checkout Page

Quick answer

First check which checkout your store uses. The Checkout block is edited in the page or site editor, where you hide, reorder and configure fields; the classic shortcode is changed with the woocommerce_checkout_fields filter or a field editor. Keep phone, state and PIN required for Indian orders, and place a test order before going live.

For WooCommerce store owners in India who want a shorter, mobile-friendly checkout that still captures what couriers and GST invoices need.

✓ In business since 2005

✓ INR + GST billing

✓ 24/7 Email Support — avg reply < 60 min

Get Started View Plans

GuideWebJi®
knowledge

Read time: 5 min
Sections: 7
Updated: 14 Nov 2026
Written by: WebJi® team

Last editorial update: 14 November 2026.

Which WooCommerce checkout does your store use?

WooCommerce has two checkouts — the Checkout block and the classic [woocommerce_checkout] shortcode — and each is customised in a different place with different tools. Stores set up on WooCommerce 8.3 or later start on the block checkout; older stores often still run the shortcode.

Open the page set as Checkout under WooCommerce → Settings → Advanced → Page setup in the editor. If you see a Checkout block, you are on blocks. If you see the shortcode, you are on classic. Most “my change did nothing” problems come from editing one type while the store uses the other.

Block and classic checkout compared
Task	Block checkout	Classic shortcode
Where you edit	Appearance → Editor → Pages → Checkout (block themes) or the page editor	Pages → Checkout, plus child-theme code
Remove or reorder fields	Block settings and List View	Field editor plugin or PHP filter
Add a saved custom field	Additional Checkout Fields API or a block-aware plugin	`woocommerce_checkout_fields` filter or a field editor
Template overrides	Not used	`woocommerce/checkout/form-checkout.php` in a child theme

Keep Cart and Checkout on the same type. To return to classic, select the Checkout block, choose Transform → Classic Shortcode, save, and do the same on the Cart page. Setting up WooCommerce pages covers assigning them.

How do you customise the block checkout without code?

Select the Checkout block in the editor and use its inner blocks: each section — contact, address, shipping, payment, order notes, terms — can be configured, hidden or moved. Changes save to the page, so test them before publishing.

Open the Checkout page in the editor and expand List View to see the inner blocks.
Select the address block to make Company, Address line 2 and Phone hidden, optional or required.
Remove the Order Note or Coupon block if your shop does not need them.
Drag the Terms and Conditions block where it sits just above the pay button, and link your policy page.
Save, then open the checkout as a logged-out shopper with a product in the cart.

Core sections such as name, country and the payment step cannot be deleted. A paragraph or image added inside the block is display text only; nothing typed there is stored on the order.

How do you change classic checkout fields with code?

On the classic checkout, the woocommerce_checkout_fields filter in a child theme’s functions.php can remove, relabel, reorder or make fields optional. This filter has no effect on the block checkout.

add_filter( 'woocommerce_checkout_fields', function ( $fields ) {
    unset( $fields['billing']['billing_company'] );
    $fields['billing']['billing_address_2']['required'] = false;
    $fields['billing']['billing_phone']['priority']     = 25; // move phone up, after the name fields
    $fields['order']['order_comments']['label']         = 'Delivery instructions';
    return $fields;
} );

Put this in a child theme or a code-snippets plugin, never in the parent theme, which an update overwrites. If you override form-checkout.php in the child theme, keep every do_action() hook in the copy; removing one is how the payment box or order review disappears.

How do you add a custom field such as GSTIN or delivery slot?

A value that must be saved on the order needs a real checkout field: on blocks, register it with WooCommerce’s Additional Checkout Fields API; on classic, use a field editor plugin or PHP. The field then appears in the order screen and can be printed on emails and invoices.

add_action( 'woocommerce_init', function () {
    woocommerce_register_additional_checkout_field( array(
        'id'       => 'mystore/gstin',
        'label'    => 'GSTIN (optional, for a business invoice)',
        'location' => 'contact',
        'type'     => 'text',
        'required' => false,
    ) );
} );

Keep a GSTIN field optional. Most retail buyers do not have one, and a required tax number at payment loses the sale. Business buyers who fill it can receive a proper GST invoice from WooCommerce. If you prefer a plugin, check that its description says it supports the block checkout; many field editors still change only the classic form.

Which checkout fields should an Indian store keep?

Keep name, a 10-digit mobile number, address line 1, city, state and the six-digit PIN code required; make company and address line 2 optional. Couriers, cash-on-delivery confirmation calls and shipping zones all depend on those fields.

Phone: required, because couriers and COD verification use it.
State and PIN code: required, because WooCommerce shipping zones for India match on them.
Email: required for the order confirmation, even for guest buyers.
Company, address line 2, order notes: optional or hidden.

Which checkout changes increase completed orders?

Allow guest checkout, cut optional fields, show the payment methods Indian buyers expect, and keep the pay button visible on a phone. These matter more than colours or fonts.

Guest checkout

Enable it under WooCommerce → Settings → Accounts & Privacy. Offer account creation after the order, not before.

Familiar payments

UPI, cards, net banking and cash on delivery. See UPI payments on WooCommerce for the gateway side.

Mobile layout

No fixed-width CSS, visible labels rather than placeholder-only fields, and a tall pay button within thumb reach.

One trust line

Payment logos and a note that GST invoices are available, placed beside the button rather than above the form.

Shoppers who still drop off can be recovered with reminders; abandoned cart recovery for WooCommerce explains the options.

How do you test a checkout change safely?

Make the change on a staging copy, place a test order with cash on delivery or the gateway’s test mode, and confirm the order, its custom fields and the customer email all arrive. Then cancel the test order.

Exclude cart, checkout and my-account pages from any full-page cache; a cached checkout can show one shopper another person’s cart. If orders fail after your change, WooCommerce checkout not working lists the usual causes. If the checkout is correct but slow under load, WebJi® WooCommerce hosting is built for stores rather than brochure sites.

FAQ

Frequently asked questions

Why does my checkout field plugin show no change on the live page?

The plugin most likely edits the classic form while your store uses the Checkout block, or the reverse. Check which type the Checkout page contains, then either use a block-compatible plugin or switch both Cart and Checkout to the classic shortcode.

Can I build the checkout with Elementor or another page builder?

You can style the page around it, but the form itself must still be WooCommerce’s Checkout block, shortcode or the builder’s official WooCommerce checkout widget. A form built from generic builder fields will not create orders or talk to the payment gateway.

How do I show a custom checkout field in the order email?

Fields registered through the Additional Checkout Fields API appear in the admin order screen and order emails automatically. For classic fields added with PHP, you must save the value to order meta and add it to emails with a hook such as woocommerce_email_order_meta_fields, or use a field editor that does this.

Should I add a one-page checkout plugin?

The block checkout is already a single page with cart summary, address and payment together. A separate one-page plugin helps mainly when you want product selection and payment on the same landing page, such as a single-product store. Test any such plugin on staging with your payment gateway first.