checkoutwoocommerce
Customize WooCommerce Checkout Page Without Breaking It
October 16, 202612 min read·ShopMonitor Team
Loading…
When you customize WooCommerce checkout page fields or layout, the deciding factor is not the size of the change. It is the checkout your store uses: the classic shortcode or the Checkout block. They render the same customer journey through different APIs, so a field filter that works on one can be irrelevant on the other. Identify the checkout first before you edit WooCommerce checkout page structure.
Identify the checkout first. That one check prevents most wasted debugging.
Open Pages in the WordPress admin, find the page assigned as your checkout, and click Edit. You are looking for one of two setups: a shortcode block containing [woocommerce_checkout], which is the classic checkout, or a block named Checkout with inner blocks such as Contact information, Shipping address, and Payment options. That is the block checkout.
If the editor does not make it clear, open checkout in a browser and inspect the page source. The block version uses wrappers with class names beginning wp-block-woocommerce-checkout, and the classic version renders a form.checkout.woocommerce-checkout.
This is the fork in the road for every customization below.
Classic shortcode checkout compared with the Checkout block
| Change you need | Classic shortcode checkout | Checkout block |
|---|---|---|
| Field visibility and required status | woocommerce_checkout_fields filter | Toggles in the block sidebar |
| Adding a custom field | woocommerce_form_field on a checkout hook | Additional Checkout Fields API |
| Layout and section sequence | Template overrides and hooks | Drag inner blocks in the editor |
| Headings and labels | Filters or translation files | Edit text directly in the editor |
| Styling | Theme CSS | Global styles plus theme CSS |
| Payment gateways | Every gateway that supports WooCommerce | Gateways with block support only |
Current WooCommerce releases support both. The shortcode remains a sensible choice where the store depends on deep customization or an older payment gateway.
A classic filter cannot change the block
The block route needs neither custom code nor an extra plugin. If your store already uses the Checkout block, begin here for WooCommerce checkout page customization.
Edit your checkout page, click the outer Checkout block, then use the settings sidebar. It controls the common adjustments: company name, apartment or suite line, and phone can be hidden, optional, or required. Inner blocks control the structure, so you can rearrange sections, remove the order note block, and edit visible section headings on the page.
Standard WordPress blocks can also sit inside checkout. Use them for a concise returns note near payment or a shipping cut-off notice above the order summary.
The sidebar covers a defined set of jobs. Know that boundary before committing to this route.
Block checkout custom fields use the Additional Checkout Fields API, not the classic filter. Register the field on woocommerce_init, give its ID a namespace prefix, then choose one of three locations: contact, address, or order.
add_action( 'woocommerce_init', 'sm_register_checkout_fields' );
function sm_register_checkout_fields() {
if ( ! function_exists( 'woocommerce_register_additional_checkout_field' ) ) {
return;
}
woocommerce_register_additional_checkout_field(
array(
'id' => 'my-store/delivery-instructions',
'label' => __( 'Delivery instructions', 'my-store' ),
'location' => 'order',
'type' => 'text',
'required' => false,
)
);
}WooCommerce renders and validates the input, stores it on the order, and displays the value in the admin order screen. The function_exists guard also prevents a fatal error if WooCommerce is disabled.
Verify payment gateway support first
Code gives you the most exact control. Put it in the right place and it survives theme changes. Put it in the wrong place and the failure can stay invisible until checkout is needed. This section applies only to the classic shortcode checkout.
The classic checkout builds the form from a nested array. One filter passes that array to you before it is rendered. Its top level has four groups: billing, shipping, account, and order. Each group contains named fields. Each field has properties including label, placeholder, required, class, and priority.
Priority is easy to overlook. It controls a field’s order within its group, so you can move fields without editing a template.
Unset a field key to remove it. Set priority to move it:
add_filter( 'woocommerce_checkout_fields', 'sm_edit_checkout_fields' );
function sm_edit_checkout_fields( $fields ) {
// Remove fields this store does not need.
unset( $fields['billing']['billing_company'] );
unset( $fields['order']['order_comments'] );
// Move email and phone above the address block.
$fields['billing']['billing_email']['priority'] = 21;
$fields['billing']['billing_phone']['priority'] = 22;
return $fields;
}Always return $fields. A filter with no return gives WooCommerce an empty checkout form, which can take payment out of service immediately.
Treat tax and shipping fields as dependencies
Relabeling is one of the lowest-risk checkout changes. Clear wording often helps more than removing an input:
add_filter( 'woocommerce_checkout_fields', 'sm_relabel_checkout_fields' );
function sm_relabel_checkout_fields( $fields ) {
$fields['billing']['billing_phone']['label'] = 'Mobile number for delivery updates';
$fields['billing']['billing_phone']['placeholder'] = 'So the courier can reach you';
$fields['billing']['billing_address_2']['label'] = 'Apartment, floor, or company';
$fields['billing']['billing_address_2']['placeholder'] = 'Optional';
return $fields;
}The location determines whether the next update keeps your customization. From strongest to weakest:
wp-content/plugins/That location survives theme switches and theme updates.
Do not use the parent theme
Plugins trade some control for faster setup. These are commercial products, so confirm current pricing and compatibility on the vendor’s own site.
Checkout Field Editor
CheckoutWC
FunnelKit
Choose a plugin when non-developers need regular control, when a multi-step layout would be expensive to build, or when you need validated field types you do not want to maintain.
Choosing code or a plugin by situation
| Situation | Best fit |
|---|---|
| Remove or relabel a few fields once | Code |
| Non-technical staff change fields regularly | Field editor plugin |
| Multi-step layout with a summary sidebar | Checkout template plugin |
| One conditional field with custom validation | Code |
| Upsells and cart recovery alongside checkout changes | Funnel plugin |
Each plugin adds another possible payment-step conflict. Apply the testing checklist below to a plugin change as carefully as you would to custom code.
These five requests cover the changes stores ask for most often.
Company name and address line two are common candidates. Removing them is reasonable when your store does not need the data. Check downstream systems first: an invoice plugin may print company name, while a shipping integration may map address line two. A field another system expects can create broken exports without visibly breaking checkout.
Current WooCommerce releases let you make the phone field optional in address settings. The block checkout provides the same control in its sidebar. For the classic checkout, set $fields['billing']['billing_phone']['required'] = false; in the filter above. If you ship physical goods, consider keeping the field optional because couriers may use it for delivery updates.
For the classic checkout, render the input on a checkout hook and save it on the order:
add_action( 'woocommerce_after_order_notes', 'sm_delivery_date_field' );
function sm_delivery_date_field( $checkout ) {
woocommerce_form_field(
'sm_delivery_date',
array(
'type' => 'date',
'class' => array( 'form-row-wide' ),
'label' => 'Preferred delivery date',
'required' => false,
),
$checkout->get_value( 'sm_delivery_date' )
);
}
add_action( 'woocommerce_checkout_create_order', 'sm_save_delivery_date', 10, 2 );
function sm_save_delivery_date( $order, $data ) {
if ( ! empty( $_POST['sm_delivery_date'] ) ) {
$order->update_meta_data(
'_sm_delivery_date',
sanitize_text_field( wp_unslash( $_POST['sm_delivery_date'] ) )
);
}
}woocommerce_checkout_create_order saves the value through the order object, which is compatible with high-performance order storage. Custom fields are a frequent source of update regressions, so document what you add and where it is registered.
Turning checkout into numbered steps is the most invasive change here. It alters form markup and its validation JavaScript. A plugin or purpose-built one-page checkout template is usually safer. If the real goal is a shorter path to payment, review your cart redirect settings first, because they already determine whether customers see a cart page.
A payment icon, concise returns note, or delivery estimate close to the payment button is simple to add and does not change checkout logic. On the block checkout, insert a paragraph or image block in the payment section. On the classic checkout, use woocommerce_review_order_before_submit. Keep the message short rather than building a wall of badges.
Every checkout customization creates another failure point. At checkout, a small technical failure has an immediate commercial effect.
These four patterns cause a large share of the problems:
None of these necessarily produces an obvious alarm. Order volume can simply fall, the same signal as a checkout that breaks after an update for any other reason.
Run this complete list after each customization and after every WooCommerce, theme, or plugin update. The change rarely breaks on the day you make it. It breaks when another dependency changes.
The manual steps are covered in our walkthrough on how to test your checkout after changes, including test-card handling.
ShopMonitor can run your checkout path as a scheduled browser test and alert when a step fails. It uses a browser to move through the configured checkout and verify the order-received page. ShopMonitor verifies the browser checkout and thank-you path, not whether an email reached an inbox. Inbox delivery is a separate check.
ShopMonitor runs automated browser tests for checkout and forms, then alerts you when a configured path fails. No checkout code changes or plugins required.
No credit card required.
About the Author
Written by the team at Winning Solutions, the agency behind ShopMonitor. We help WooCommerce teams make safer checkout changes and identify browser-path failures after theme, plugin, and core updates.