Classic Checkout vs Block Checkout

WooCommerce has two different checkout systems and Smart Phone Field currently supports one of them. This article explains the difference, which one you are likely using, and what our plans are for the other.

The Two Checkout Systems#

Classic checkout uses a PHP template and is embedded on a page using the [woocommerce_checkout] shortcode. It has been the standard WooCommerce checkout for many years and is what the vast majority of stores use today, including stores built with page builders.

Block checkout is a newer checkout built using the WordPress block editor (Gutenberg). It is inserted onto a page as a Gutenberg block rather than a shortcode and uses a different underlying architecture powered by the WooCommerce Store API.

Which One Does Smart Phone Field Support#

Smart Phone Field currently supports the classic shortcode checkout. If your checkout page uses [woocommerce_checkout], the plugin will work.

Which One Are You Using#

If you are not sure which checkout your store uses, the easiest way to check is to look at your checkout page in the WordPress editor:

1. Go to Pages in your WordPress admin
2. Open your checkout page
3. If you see a block labeled Checkout in the block editor, you are using the block checkout
4. If you see [woocommerce_checkout] as a shortcode, you are using the classic checkout

If you built your checkout using a page builder such as Bricks Builder, Elementor, Breakdance, Divi, or Oxygen, you are almost certainly using the classic checkout. Page builders embed the WooCommerce checkout using the shortcode, not the block.

Classic Checkout and Page Builders#

Smart Phone Field works with every page builder that uses the WooCommerce shortcode for checkout. This covers:

• Bricks Builder
• Elementor
• Breakdance
• Divi
• Oxygen
• Any other builder that uses [woocommerce_checkout]

If your checkout page was built in a page builder, you do not need to do anything differently. Install the plugin, activate it, and it will work with your existing checkout layout.

What About the Block Checkout#

The WooCommerce block checkout uses a completely different integration architecture. Plugins cannot hook into the block checkout the same way they hook into the classic checkout. Supporting the block checkout requires a separate implementation using the WooCommerce Additional Checkout Fields API and a compiled JavaScript bundle.

Smart Phone Field does not currently support the block checkout. If your store uses the block checkout, the plugin will not display the smart phone field on your checkout page.

Our Plans for Block Checkout Support#

We are planning to add block checkout support in a future release. This is a significant piece of development work given the architectural differences between the two checkout systems and we want to make sure it is done correctly before shipping it.

If block checkout support is important to you, contact us at contact@smartphonefield.com and let us know. Hearing from customers helps us prioritise what to build next.

Switching from Block Checkout to Classic Checkout#

If you are currently using the block checkout and want to use Smart Phone Field now, you can switch to the classic checkout. The process involves replacing the Checkout block on your checkout page with the [woocommerce_checkout] shortcode.

Before switching, note that the two checkout systems look and behave differently. The classic checkout uses your theme’s styling while the block checkout has its own styling system. You may need to restyle the classic checkout to match your site design after switching.

If you use a page builder, switching to the classic checkout is straightforward — simply embed the WooCommerce checkout shortcode in your page builder’s checkout page template.

We recommend testing on a staging site before making this change on a live store.