Developing Custom WooCommerce Checkout Page
Standard WooCommerce checkout is functional but template. Customization allows: simplify form (remove unneeded fields), add upsell blocks, implement single-page checkout, integrate custom shipping and payment methods.
Customization Approaches
WooCommerce hooks — least invasive. Rearrange, add, delete blocks without template override.
Template override — copy woocommerce/templates/checkout/form-checkout.php to your-theme/woocommerce/checkout/form-checkout.php and edit.
Page builders — CartFlows, FunnelKit — visual funnel constructors.
Checkout Hooks: Block Order
// Rearrange "Company Name" and "Phone" fields
add_filter('woocommerce_checkout_fields', function (array $fields): array {
// Remove unneeded fields
unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_address_2']);
// Make phone required
$fields['billing']['billing_phone']['required'] = true;
// Add "Delivery Comment" field
$fields['billing']['delivery_comment'] = [
'type' => 'textarea',
'label' => 'Delivery Comment',
'placeholder' => 'Door code, floor, preferred time...',
'required' => false,
'class' => ['form-row-wide'],
'priority' => 120,
];
return $fields;
});
// Save custom field
add_action('woocommerce_checkout_update_order_meta', function (int $order_id): void {
if (!empty($_POST['delivery_comment'])) {
update_post_meta($order_id, '_delivery_comment', sanitize_textarea_field($_POST['delivery_comment']));
}
});
Upsell Block
// Show upsell offer after shipping form
add_action('woocommerce_checkout_after_customer_details', function (): void {
$upsell_product_id = 456;
$product = wc_get_product($upsell_product_id);
if (!$product || !$product->is_purchasable()) return;
?>
<div class="checkout-upsell">
<label class="checkout-upsell__label">
<input type="checkbox" name="add_upsell_product" value="<?php echo $upsell_product_id; ?>" />
<span>Add "<?php echo esc_html($product->get_name()); ?>" for <?php echo $product->get_price_html(); ?></span>
</label>
</div>
<?php
});
// Add upsell to cart on checkout
add_action('woocommerce_checkout_create_order', function (WC_Order $order): void {
if (!empty($_POST['add_upsell_product'])) {
$product_id = (int) $_POST['add_upsell_product'];
$product = wc_get_product($product_id);
if ($product) {
WC()->cart->add_to_cart($product_id);
}
}
});
Typical timelines: checkout fields customization and upsell block — 2–3 days. Multi-step checkout with custom payment method — 5–7 days.