Introduction
WooCommerce is transitioning from the traditional Classic Checkout (shortcode-based) to the modern Block Checkout (WooCommerce Blocks). However, this shift has led to some confusion among users regarding checkout field customization with the Checkout Field Editor for WooCommerce by Themehigh.
This guide will help you understand the key differences between Classic Checkout and Block Checkout, how our plugin integrates with both, and how to switch between them for a seamless experience.
Overview of Checkout Field Editor for WooCommerce
The Checkout Field Editor for WooCommerce allows store owners to personalize the checkout process by adding, editing, and removing fields. With this plugin, you can:
- Add new fields (Text, Select, Checkbox, Datepicker, etc.).
- Modify default WooCommerce checkout fields.
- Rearrange the order of fields.
- Control field visibility (show/hide based on conditions).
- Apply validation rules to required fields.
- Apply pricing rules to the fields and more.
However, the way these custom fields function depends on whether you are using Classic Checkout or Block Checkout.
Key Differences: Classic Checkout vs Block Checkout
| Feature | Classic Checkout | Block Checkout |
| Integration Method | Uses a shortcode [woocommerce_checkout] | Uses WooCommerce Blocks |
| Field Customization | Fields managed under the Classic Fields tab | Fields managed under the Block Fields tab |
| Field Placement | Directly inserted into checkout using filters | Requires adding fields within the Checkout Block |
| Compatibility | Works with most WooCommerce themes and plugins | Limited support with some third-party extensions |
| Flexibility | More customization options through hooks/filters | Easier UI-based customization but fewer customization hooks |
| Default Checkout Type | Used before WooCommerce 8.3 | Default checkout from WooCommerce 8.3 onwards |
| Switching Method | Add [woocommerce_checkout] shortcode | Insert the WooCommerce Checkout Block |
Classic Checkout
How Checkout Field Editor Works with Classic Checkout?
Classic Checkout relies on a shortcode ([woocommerce_checkout]) to generate the checkout page. Our plugin seamlessly integrates by modifying checkout fields through WordPress hooks and filters.
Adding or editing fields in Classic Checkout
- Go to WordPress Dashboard > WooCommerce > Checkout Field Editor.
- Click on the Classic Fields tab.
- Click Add New Field and configure the settings.
- Click Save Changes.
Your fields will now appear in the Classic Checkout.
Note: Fields added under Classic Fields do not work in Block Checkout.
Block Checkout
How Checkout Field Editor Works with Block Checkout
WooCommerce introduced Block Checkout to enhance performance and user experience. Unlike Classic Checkout, it does not use shortcodes but rather a Checkout Block where fields must be manually added.
Adding or editing fields in Block Checkout
- Go to WordPress Dashboard > WooCommerce > Checkout Field Editor.
- Click on the Block Fields tab (this is specifically for Block Checkout).
- Click Add New Field and configure the field properties. Currently, four field types are supported: Text, Checkbox, Select, and Radio.
- Click Save Changes.
Your fields will now be visible in the WooCommerce Checkout Block.
Note: Fields added under Block Fields do not appear in Classic Checkout.
How do you check if you are using Classic or Block Checkout?
- Go to WordPress Dashboard > Pages.
- Locate the Checkout Page and click Edit.
- If you see a Block Editor with a Checkout Block, you are using Block Checkout.
- If you see only a shortcode ([woocommerce_checkout]), you are using Classic Checkout.
How to Switch Between Classic and Block Checkout?
Switching from Block Checkout to Classic Checkout
If your checkout fields are not displaying correctly and you prefer Classic Checkout:
- Go to WordPress Dashboard > Pages.
- Locate the Checkout Page and click Edit.
- Click on List View and delete the existing Checkout Block.
- Add a Shortcode Block and insert: [woocommerce_checkout].
- Click Update to save changes.
Now, you can manage checkout fields under WooCommerce > Checkout Field Editor > Classic Fields.
Switching from Classic Checkout to Block Checkout
If you want to switch to WooCommerce’s new Block Checkout:
- Go to WordPress Dashboard > Pages.
- Locate the Checkout Page and click Edit.
- Delete the shortcode block if present.
- Click on Add Block (+) and insert the Checkout Block.
- Click Update to save changes.
Now, you can manage checkout fields under WooCommerce > Checkout Field Editor > Block Fields.
Common Issues & Troubleshooting
1. My checkout fields are not appearing.
- For Block Checkout: Go to Checkout Field Editor > Block Fields and ensure fields are added.
- For Classic Checkout: Check if the [woocommerce_checkout] shortcode is present on the checkout page.
2. I don’t see the option to switch to Classic Checkout.
If you installed WooCommerce 8.3 or later, the default checkout is Block Checkout. You must manually add the [woocommerce_checkout] shortcode to use Classic Checkout.
3. Can I use both Classic and Block Checkout together?
No, WooCommerce allows only one checkout type at a time. You must choose either Classic Checkout or Block Checkout.
Conclusion
Both Classic Checkout and Block Checkout provide ways to customize your WooCommerce checkout page, but they function differently:
✅ Classic Checkout is shortcode-based, highly customizable, and compatible with most plugins.
✅ Block Checkout is modern, optimized for speed, and uses a visual editor but has fewer customization options.
Our Checkout Field Editor for WooCommerce supports both checkout types, allowing you to select the best fit for your store.
Need More Help?
WooCommerce Checkout Blocks Documentation:
https://woocommerce.com/document/woocommerce-store-editing/customizing-cart-and-checkout/
Themehigh Support:
https://www.themehigh.com/docs/support/