How to Customize the WooCommerce Checkout Page

I get why customizing the WooCommerce checkout page gets frustrating. You follow a tutorial, paste the code or install the plugin and nothing changes on your checkout. This usually happens because WooCommerce has 2 checkouts and each one needs a different method.

My advice is simple. I'd check which checkout your store uses, try the built-in settings next and add code or a plugin only for a change those settings can't make.

Before the steps, I want to ensure you can find your checkout type, because every method below depends on it.

Which Checkout Does Your Store Use?

You can find this on the page itself:

1. Go to Pages in your WordPress admin.
2. Open the Checkout page in the editor.
3. Look at what the page contains.

If you see a Checkout block with fields and an order summary, your store uses the Checkout block. A new WooCommerce 11.2.1 store starts with this block. If you see the [woocommerce_checkout] shortcode, your store uses the classic checkout.

What Each Method Can Change

This table shows the lightest method I'd try for each change on each checkout.

Customize the Checkout Block Without a Plugin

The Checkout block handles the small changes without any code. It is wise to start here, because a setting doesn't need updates or add a plugin to your checkout.

1. Go to Appearance > Editor > Templates > WooCommerce > Page: Checkout.
2. Click the Checkout block and open its settings.
3. Change what you need, then save the template.

These are the settings that matter most:

• Address fields: show or hide Company, Address line 2 and Phone, and make each one optional or required.
• Form step numbers: turn the numbers beside each checkout section on or off.
• Terms and conditions: require a checkbox before the order goes through.
• Return to Cart: show the link and choose the page it opens.
• Coupon form: remove it from the checkout totals.

The Site Editor also lets you rearrange and style the included blocks, but some inner blocks are locked. The settings don't include a way to add a new field, so that change needs the code or a plugin below.

Customize the Classic Checkout With Code

The classic checkout runs its fields through the woocommerce_checkout_fields filter. A filter is a WordPress hook that lets your code change a value before WooCommerce uses it.

This snippet removes the Company field and renames the phone label:

add_filter( 'woocommerce_checkout_fields', function ( $fields ) {
	unset( $fields['billing']['billing_company'] );
	$fields['billing']['billing_phone']['label'] = 'Mobile number';

	return $fields;
} );

You should put this in a child theme's functions.php or a code snippets plugin, because a parent theme update removes edits made to the parent. The fields are grouped under billing, shipping, account and order, and each field has its own label and settings.

This is where a tutorial can go wrong. WooCommerce applies this filter in its classic checkout class, and its Checkout block code doesn't use it. So the same snippet won't change a store on the Checkout block.

Add a Custom Field to the Checkout Block

The Checkout block has its own function for new fields, called woocommerce_register_additional_checkout_field(). This example adds a required delivery note to the order information section:

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

	woocommerce_register_additional_checkout_field( array(
		'id'       => 'my-store/delivery-note',
		'label'    => 'Delivery note',
		'location' => 'order',
		'type'     => 'text',
		'required' => true,
	) );
} );

Both snippets load and register their changes on WooCommerce 11.2.1, but you should still place a test order on your own store. The id needs a namespace and a field name, so replace my-store with something unique to your store.

The function gives you these choices, as WooCommerce's additional checkout fields documentation explains:

• Locations: contact, address and order.
• Types: text, select, checkbox and date.

If you'd rather avoid code, there are three no-code routes I'd look at:

• Checkout Field Editor (Checkout Manager) is free and works on both checkouts.
• Checkout Fields for Blocks is a smaller free plugin made for the block.
• Stackless adds checkbox, dropdown and text fields with optional fees. This is the plugin I lead at Gatilab, and this module is in the paid edition.

Please check before you buy WooCommerce's own Checkout Field Editor. Its product page says it works with the legacy checkout only and that native field customization is coming to the block.

Change the Checkout Layout and Colors

The layout is the hardest part to change by hand. The Site Editor can move and style blocks, and a classic checkout can use theme templates. Both routes get harder to maintain when WooCommerce changes its checkout.

A layout plugin is the simpler route for most stores. Stackless is a WooCommerce plugin with a Checkout Builder module, and I lead its development, so weigh my suggestion with that in mind. It gives you 5 ready-made layouts on both checkouts:

• Classic: customer details on the left and the order summary on the right.
• Split: the order summary on the left and the form on the right.
• Warm Split: a warm order panel beside a spacious white checkout.
• Focused: a single centered column with the summary above the form.
• Review First: a full-width order review, then details beside payment.

You can set the accent color, backgrounds, width and corner radius. The With my cart preview shows a layout on your real checkout only to you, so your live checkout stays as it is while you compare.

Checkout Builder only changes layout and colors. It doesn't add, remove or reorder fields, and it isn't in the free Lite edition. If you want to compare other options, I've covered them in my guide to the best WooCommerce checkout plugins.

Test Your Changes Before Going Live

A small checkout change can stop orders, so I'd test every change on a staging site first:

1. Open your checkout in a private window to see it as a customer does.
2. Place a test order with each payment method, including express buttons.
3. Try a coupon and a failed payment.
4. Check that new fields appear on the order screen and in customer emails.
5. Repeat the checkout on a phone.

FAQs on Customizing the WooCommerce Checkout

What is the WooCommerce checkout shortcode?

The classic checkout shortcode is [woocommerce_checkout]. New stores use the Checkout block instead, and the settings and code for that block are different.

Can I edit the WooCommerce checkout page without a plugin?

Yes, for small changes. The Checkout block lets you show or hide some fields, require a terms checkbox and change the Return to Cart link. Adding a new field needs code or a plugin.

Can I reorder the WooCommerce checkout fields?

The block settings don't include a full field reorder, and some inner blocks are locked. On the classic checkout, you can change field settings with the woocommerce_checkout_fields filter. I'd use a field plugin if you want this done without code.

Final Remarks

If you're still unsure where to begin, I'd open your Checkout page and find out which checkout you have. Then I'd make the one change your store needs on a staging site and place a test order. If that change is the layout, you can see all 5 layouts on the Stackless demo store first.