Fixing Custom Fields Not Showing on WooCommerce Checkout (Gutenberg vs Classic Editor)

Introduction

Custom checkout fields are essential for collecting additional customer data—like delivery instructions or custom notes. But since WooCommerce introduced the new Gutenberg block-based checkout, many users have noticed that their PHP code in functions.php no longer works.

In this guide, you’ll learn:

• Why PHP-based custom fields fail with the Gutenberg block checkout

• How to fix it using the Woo Checkout Field Editor Pro plugin

• How to add custom checkout fields with PHP if you’re using the classic editor (shortcode-based checkout)

By the end, you’ll know the right approach for your WooCommerce setup.

1. Why Custom Fields Don’t Show in Gutenberg Block Checkout

Gutenberg’s checkout system is built with React and REST API instead of traditional PHP templates. That means the PHP hooks like woocommerce_checkout_fields no longer apply.

When you add PHP code in functions.php, it affects only the classic (shortcode-based) checkout, not the block-based checkout. The block system requires JavaScript or plugin-based field rendering.

Technical Explanation:

• Classic checkout → Uses PHP templates rendered on the server.

• Block checkout → Uses JavaScript components rendered on the client side.

• Therefore, PHP filters/hooks cannot inject fields dynamically.

✅ Recommended Solution: Use a plugin that supports block checkout such as Woo Checkout Field Editor Pro.

📸 Visual Suggestion 1:

• Type: Diagram comparing PHP-based vs. React-based checkout

• Placement: Directly below this section’s explanation

• Alt text: “Diagram showing difference between WooCommerce Gutenberg block checkout (React-based) and classic checkout (PHP-based)”

2. Adding Custom Fields with Woo Checkout Field Editor Pro (For Block Checkout)

Since block checkout doesn’t process PHP hooks, you must use a plugin that’s compatible with the new checkout architecture.
The Woo Checkout Field Editor Pro plugin provides full compatibility with both block and classic modes.

Step-by-Step Instructions

Step 1: Install and Activate the Plugin

1. Go to your WordPress Dashboard → Plugins → Add New

2. Search for “Woo Checkout Field Editor Pro”

3. Click Install Now, then Activate

📸 Visual Suggestion 2:

• Type: Screenshot showing WordPress plugin search for “Woo Checkout Field Editor Pro”

• Placement: After Step 1

• Alt text: “Woo Checkout Field Editor Pro plugin installation in WordPress dashboard”

Step 2: Open the Plugin Settings

• Navigate to WooCommerce → Checkout Fields

• You’ll see sections for Billing, Shipping, and Additional Fields

📸 Visual Suggestion 3:

• Type: Screenshot of the Checkout Fields interface showing tabs for Billing, Shipping, Additional Fields

• Placement: After Step 2

• Alt text: “Woo Checkout Field Editor Pro plugin settings showing billing, shipping, and additional field options”

Step 3: Add a New Custom Field

1. Click Add Field

2. Choose the Field Type (text, select, checkbox, etc.)

3. Enter Label, Name, and Placeholder

4. Set visibility for Billing, Shipping, or Order section

5. Save your changes

📸 Visual Suggestion 4:

• Type: Screenshot showing the “Add New Field” popup in the plugin

• Placement: After Step 3

• Alt text: “Adding a new custom field in Woo Checkout Field Editor Pro with label and field type options”

Step 4: Verify on Checkout Page

Now, go to your site’s checkout page (with block checkout enabled). You’ll see your new custom field displayed automatically — no code required.

📸 Visual Suggestion 5:

• Type: Screenshot of checkout page showing the new custom field in Gutenberg block checkout

• Placement: After Step 4

• Alt text: “WooCommerce block checkout page displaying newly added custom field using Woo Checkout Field Editor Pro”

3. Adding Custom Fields Using PHP (For Classic Editor)

If your checkout page still uses the classic shortcode ([woocommerce_checkout]), you can add custom fields directly with PHP.

Step-by-Step Implementation

Step 1: Add Field Using woocommerce_checkout_fields Hook

Add the following code to your theme’s functions.php file or a custom plugin:

💡 Tip: Always use a unique field key like billing_custom_note.

📸 Visual Suggestion 6:

• Type: Code highlight box labeled “functions.php Example – Adding Custom Field”

• Placement: Inline with the above code

• Alt text: “Highlighted PHP code snippet adding a custom checkout field to WooCommerce classic checkout”

Step 2: Display Field Value in Order Details

Step 3: Save Field Value to Order Meta

📸 Visual Suggestion 7:

• Type: Screenshot showing the custom field on a classic checkout page

• Placement: After Step 3

• Alt text: “WooCommerce classic checkout showing added custom field created via PHP code in functions.php”

4. Comparison: Plugin vs. PHP Method

📸 Visual Suggestion 8:

• Type: Comparison table visual with icons (plugin vs code)

• Placement: Below the comparison table

• Alt text: “Comparison chart showing WooCommerce block vs classic checkout custom field methods”

5. Best Practices for Maintaining Checkout Customizations

• Always test on a staging site before applying to production.

• Use child themes to prevent overwriting custom PHP code.

• Regularly update plugins and WooCommerce to maintain compatibility.

• For performance and security, avoid multiple field editor plugins simultaneously.

Conclusion

When WooCommerce switched to Gutenberg-based checkout, traditional PHP methods stopped working — leaving many developers puzzled.
The solution is simple:

• Use Woo Checkout Field Editor Pro for block checkout

• Use PHP code for classic shortcode checkout

By choosing the right approach for your setup, you’ll ensure your custom fields display correctly and your checkout flow remains smooth and professional.

Final Visual Recommendation Summary

Zeeshan Mehmood

Zeeshan is a seasoned web developer with over 8+ years of experience, specializing in WordPress, Themosis, and Laravel. customized web solutions. Through his website, zeeshanwebexpert.com, Zeeshan offers professional web services, ensuring long-term solutions for clients.