How to Change Checkout Page in WooCommerce? (Complete Guide)

To change the checkout page in WooCommerce, you can use the built-in settings under WooCommerce > Settings > Checkout. There, you can add custom code to your theme’s functions.php file to change, add, or even remove the checkout settings. You can also use plugins like Checkout Field Editor to edit your Woocommerce checkout page without any coding.

The WooCommerce checkout page is where your customers enter their details, pick a payment method, and complete their order. It’s the last step in their shopping process where all the items in their cart turn into a confirmed order.

The WooCommerce checkout page is one of the most critical parts of your online store. A smooth and user-friendly checkout process can boost conversions, while a poorly optimized page can result in abandoned carts. 

Luckily, WooCommerce provides numerous ways to customize the checkout page, whether you want to tweak the fields, redesign the layout, or streamline the user experience.

In this guide, we’ll walk you through how to change the checkout page in WooCommerce step-by-step. From simple settings to advanced coding, you’ll learn how to customize your WooCommerce checkout to meet your store’s needs.

Why Change the WooCommerce Checkout Page?

Before you step into the methods, it’s important to understand why customizing the WooCommerce checkout page matters:

1. Improve User Experience (UX): When you remove unnecessary fields or simplify the layout, you make it easier for customers to complete their purchase.
2. Match Your Brand Design: A customized checkout layout that aligns with your store’s design creates a consistent and professional impression.
3. Increase Conversions: Optimizing the checkout flow can reduce friction and cart abandonment.
4. Collect Useful Data: You can add custom fields to collect specific customer information.

Now let’s explore how to customize and modify the WooCommerce checkout page.

1. Customize WooCommerce Checkout Page Using Built-in Settings

WooCommerce provides basic options to make changes to the checkout page. Although these settings are limited, they’re a good place to start.

Here are the Steps to Edit Checkout Page via WooCommerce Settings:

Step 1: Access Checkout Settings:

• Go to your WordPress dashboard.
• Navigate to WooCommerce > Settings > Advanced.
• Select the Page Setup section.

Now, you’ll get the checkout page access.

Step 2: Assign a Checkout Page:

• Ensure the correct page is selected under the Checkout Page dropdown.
• If you want to change the checkout URL or use a custom page, you can assign it here.

Step 3: Payment Options Configuration:

• Go to WooCommerce > Settings > Payments.
• Enable or disable payment gateways and arrange their order.

Limitations:

While this method allows you to manage basic checkout settings, it doesn’t let you edit fields, layout, or design. For that, you’ll need other methods.

2. Edit WooCommerce Checkout Fields

• How to Add, Remove, or Rearrange Fields Without a Plugin

If you need to edit checkout fields (e.g., billing name, phone number, or shipping address), you can use WooCommerce hooks and filters.

Example 1: Remove Fields

To remove a field like ‘company name,’ add the following PHP code to your theme’s functions.php file.

For this, go to Appearance >> Theme File Editor  >> Theme Functions and add the following code:

add_filter( 'woocommerce_checkout_fields', 'custom_remove_checkout_fields' );

function custom_remove_checkout_fields( $fields ) {

    unset( $fields['billing']['billing_company'] );

    return $fields;

}

Example 2: Add Custom Fields

To add a new custom field (e.g., order notes) in your checkout page, navigate to Appearance >> Theme File Editor>> Theme Functions and use the following snippet:

// Add custom field to checkout

function custom_checkout_field( $fields ) {

    $fields['order']['order_notes'] = array(

        'type'        => 'textarea',

        'label'       => __('Order Notes'),

        'placeholder' => __('Add any special instructions here'),

        'class'       => array('form-row-wide'),

        'priority'    => 25,

    );

    return $fields;

}

add_filter( 'woocommerce_checkout_fields', 'custom_checkout_field' );

Now, paste it under all the code.

Example 3: Rearrange Checkout Fields

To rearrange the checkout fields, again to Appearance >> Theme File Editor>> Theme Functions. Then, copy the following snippet:

// Rearrange checkout fields in WooCommerce

function custom_rearrange_checkout_fields( $fields ) {

    // Example: Move the 'order_comments' field below the 'billing_email' field

    $fields['order']['order_comments']['priority'] = 100;

    // Example: Move 'billing_phone' field before 'billing_email'

    $fields['billing']['billing_phone']['priority'] = 20;

    return $fields;

}

add_filter( 'woocommerce_checkout_fields', 'custom_rearrange_checkout_fields' );

And, paste the code here and update the file.

Using Plugins to Edit WooCommerce Checkout Fields

If you’re a non-technical users, plugins are the easiest way to customize checkout fields. Popular plugins include:

1. Checkout Field Editor (Official WooCommerce Plugin):

This plugin allows you to add, edit, and remove checkout fields with a drag-and-drop interface.

Steps to Use Checkout Field Editor Plugin:

• Install and activate the Checkout Field Editor plugin.
• Go to WooCommerce > Checkout Form.
• Add, edit, or remove fields using the interface.
• Save changes, and test the checkout page.

2. Flexible Checkout Fields:

This flexible checkout offers advanced customization options, including conditional fields and custom validations.

3. Change WooCommerce Checkout Layout

Now, to modify the layout of your WooCommerce checkout page, you can use a combination of CSS shortcodes, page builders, or custom page templates.

Method 1: Using Custom CSS

If you want to adjust the design, such as changing font sizes, colors, or spacing, add custom CSS:

To change the checkout page design, go to Appearance > Customize > Additional CSS.

/* Change the background color of checkout page */

.woocommerce-checkout {

    background-color: #f9f9f9;

}

/* Customize input fields */

.woocommerce-checkout input.input-text {

    border: 1px solid #ccc;

    padding: 10px;

}

Then, add the above WordPress shortcode to change the (e.g; background color) of your checkout.

Method 2: Override WooCommerce Checkout Template

If you want full control over the checkout page layout, you can override the WooCommerce checkout template.

Step 1: First, create a child theme (if you don’t have one) to protect your customizations from theme updates.

Step 2: Then, copy the checkout template:

wp-content/plugins/woocommerce/templates/checkout/form-checkout.php.

Step 3: Now, go to your child theme and just paste the copied file in

 wp-content/themes/your-child-theme/woocommerce/checkout/form-checkout.php.

Step 4: Finally, edit the form-checkout.php file in your child theme to change the layout, add custom content, or reorder fields.

This allows full control over your checkout page layout and content.

Note: Always use a child theme to prevent your changes from being overwritten during theme updates.

Method 3: Use Page Builder Plugins

You can also use plugins like Elementor or Divi to customize the checkout page visually.

Steps to Customize Checkout with Elementor:

1. Install and activate Elementor Pro.
2. Use the WooCommerce Checkout Widget to design your page.
3. Customize the layout, colors, and spacing using the drag-and-drop interface.

Optimize WooCommerce Checkout for UX and Conversions

When you improve your checkout page isn’t just about design—it’s also about optimizing for conversions.

Best Practices for Checkout Page Optimization:

1. Use a One-Page Checkout: Display all checkout fields on a single page by setting up a one page checkout. And, to create, you can even use the WooCommerce One Page Checkout plugins.
2. Remove Unnecessary Fields: Only ask for essential information to speed up the process.
3. Enable Guest Checkout: Allow your customers to checkout without creating an account.
4. Optimize Payment Options: It’s always better to offer multiple payment gateways for customer convenience.
5. Use a Clean and Responsive Design: You also need to ensure the checkout page works seamlessly on all devices.

FAQs

Conclusion

Customizing the WooCommerce checkout page can significantly improve your customers’ shopping experience and boost conversions. Whether you’re editing fields, changing the layout, or optimizing for UX, WooCommerce offers multiple ways to achieve your goals.

For beginners, using plugins like Checkout Field Editor or page builders like Elementor is the easiest option. For advanced users, PHP code snippets and template overrides provide full control.

With a well-optimized WooCommerce checkout page, you’ll turn more visitors into happy, paying customers.