Which WooCommerce checkout are you editing?
WooCommerce has two checkouts, and the editor you open depends on which one the shop uses. Stores created on WooCommerce 8.3, from November 2023, start on the Cart and Checkout blocks. Older shops usually still print the classic shortcode.
Open the Checkout page in the editor. A Checkout block means blocks. The shortcode [woocommerce_checkout] means classic. Keep the cart on the same type. If you switch only the checkout, totals and the payment list can stop matching.
| What you see | Checkout type | Where you edit it |
|---|---|---|
| A Checkout block | Blocks | Appearance, Editor, Pages, Checkout |
| The shortcode [woocommerce_checkout] | Classic | Pages, then the Checkout page |
| No payment methods, plus a classic switch | Blocks with a gateway that does not support them | Payment Options block, or switch cart and checkout together |
- Blocks — fields are inner blocks in the site editor. PHP checkout-field filters do not run here.
- Classic shortcode — the page prints [woocommerce_checkout]. A field plugin or child-theme code changes it.
How to open the WooCommerce checkout page
On a block theme, go to Appearance, then Editor, then Pages, and open Checkout. On any other theme, go to Pages and edit the Checkout page. Then open WooCommerce, Settings, Advanced, and check Page setup. The Checkout dropdown must be the page you just edited, or buyers never see the change.
You can point that dropdown at a new page. On a block theme, add the Checkout block to it. On a classic theme, put the [woocommerce_checkout] shortcode on it. A page builder can style the wrapper. Do not build a second form in the builder, or WooCommerce will not create the order.
To go back to the classic checkout, open the Checkout block, choose Transform, then Classic Shortcode, and save. Do the same on the Cart page. The two pages have to stay a pair.
How to remove and reorder WooCommerce checkout fields
On the block checkout, select the field and remove it, or drag it in List View. You can drop company, address line 2, phone, order notes, the coupon box, and the terms block. You cannot delete the name, the country, or the payment step this way.
On the classic checkout, WooCommerce settings do not remove those core fields. Some themes hide company, address line 2, and phone under Appearance, Customizer, WooCommerce, Checkout. Anything else needs a field editor or code in a child theme. Do not edit the parent theme file. The next theme update puts the old checkout back.
On an Indian order, keep the phone field. Couriers and OTP checks read a 10-digit mobile from it. Keep country, state, and the six-digit PIN code, because shipping zones use them. Make company and address line 2 optional instead of deleting the state.
How to add a custom field on the WooCommerce checkout
A trust line or a short note can be a paragraph block. A value that must sit on the order, such as a delivery slot or a buyer GSTIN, has to be a real checkout field. Text you type in the site editor is not saved on the order.
On classic checkout, add the field with a checkout field editor, or with the woocommerce_checkout_fields filter in the child theme functions.php. You can also copy form-checkout.php to woocommerce/checkout/form-checkout.php in the child theme. Keep every WooCommerce action hook in that file. Drop a hook and the payment box disappears.
That PHP filter does not run on the block checkout. Use a plugin with a separate screen for block fields. The free Checkout Field Editor on WordPress.org says blocks accept text, select, radio, checkbox, email, and URL. A price on a field is a paid feature. If the field is in wp-admin but missing on the page, you saved it on the other checkout type.
Leave a buyer GSTIN optional. A shopper who must type a tax number to pay will leave. A business buyer can fill it when they need a GST invoice in WooCommerce. The invoice layout is a different screen from this form.
How to style the WooCommerce checkout without breaking mobile
Change colours and spacing in Appearance, Customize, Additional CSS, or with the block style controls. Do not set a fixed pixel width on the form. A 360px-wide phone will clip the payment box.
Keep the labels visible. Placeholder-only labels break autofill, and the buyer cannot see which box failed. Make the pay button tall enough to tap. After the last field, the button should already be on screen.
Check the page on a phone over a normal mobile connection, not in a narrow desktop window. If the coupon box, order notes, and a long terms paragraph push the button down, remove those blocks before you restyle.
WooCommerce checkout changes that raise completed orders
A valid form can still lose the sale. Test these changes on an Indian shop before you add more plugins.
- Guest checkout stays on. Forcing an account before payment is the leak you can count. Create the account after the order.
- Fewer required fields. Company and address line 2 stay optional. Name, mobile, state, and PIN code stay required.
- Payment methods the buyer already has. Show UPI, cards, net banking, and cash on delivery in the payment step. The gateway is a plugin on your WooCommerce hosting, not a switch inside the Checkout block.
- One trust line beside the button. Say that a GST invoice is available on request, and show the payment logos. Do not add a badge row that pushes the button down.
- The button is in thumb reach. On a phone, it is visible when the last field is filled.
How to test a WooCommerce checkout change
Edit the checkout on a staging copy, not on the live shop. Place one order for a cheap test product. Use cash on delivery or the gateway test mode so you do not take a real payment.
The change worked only when WooCommerce, Orders shows that order, the custom field is stored on it, and the customer email arrived. Then cancel the order. If the field is missing, you edited the other checkout type.
Keep cart, checkout, and my-account out of any full-page cache. A cached checkout can show another person’s cart. If the whole shop is slow, not just this form, move it to e-commerce hosting that can run WooCommerce.
Frequently Asked Questions
How do I customize the WooCommerce checkout page without code?
On a block theme, open Appearance, then Editor, then Pages, then Checkout, and edit the Checkout block. On a classic theme, edit the Checkout page under Pages. You can remove optional blocks such as company, address line 2, and order notes. A field that must save on the order still needs a plugin or child-theme code.
How do I remove unwanted fields from WooCommerce checkout?
On blocks, select the field and delete it, or drag it out of the Checkout block. On the classic shortcode, use a field editor or the woocommerce_checkout_fields filter in a child theme. Keep phone, state, and PIN code so Indian shipping zones still match.
What are WooCommerce checkout blocks?
Checkout blocks are the current WooCommerce checkout. The form is a Checkout block with inner blocks for the address, shipping, and payment. Shops started on WooCommerce 8.3 or later use them by default. The older page is the [woocommerce_checkout] shortcode.
Can I reorder checkout fields?
Yes. In the block editor, drag the inner blocks in List View. On classic checkout, a field editor reorders fields in wp-admin. Dragging blocks does not change the classic shortcode, and the classic field screen does not move block fields.
How do I add a custom field to checkout?
Install a field editor and create the field on the screen that matches your checkout, classic or blocks. On classic checkout you can also use the woocommerce_checkout_fields filter in the child theme. A paragraph in the site editor is not saved on the order.
Does checkout design affect conversion rate?
Yes. A forced account, extra required fields, and a pay button below the fold each cut completed orders. Turn on guest checkout, keep the address short, list UPI and cash on delivery, and keep the pay button on screen.
Which page does WooCommerce use as checkout?
WooCommerce, Settings, Advanced, Page setup names the Checkout page. Buyers see that page. The same screen names the Cart page. Keep the cart and the checkout on the same type, blocks or the classic shortcode.