Block vs Classic Checkout in WooCommerce: What to Choose

Block checkout, or classic checkout? Your store uses one of them right now, and you may never have chosen it. In this tutorial, we'll see what each one is, how they look different, and what happens to your extensions. Then how to switch, how to customize each one, and which to pick. It's all stock WooCommerce, on our demo coffee shop, and we tested every step in a real store.

First, what they are. The block checkout is a page built from blocks. It's what a new WooCommerce store gets by default. The classic checkout is a shortcode. One line on the page, and WooCommerce builds the form from templates and hooks. Both take real orders, and both use the shipping rates you set up in WooCommerce. What changes is the form, and how you customize it.

Here's the block checkout. Everything is on one page, with the order summary beside it. It starts with the contact email, then the shipping address. Shipping options and payment options are cards you click. The coupon is inside the order summary, and the order note is a checkbox. Change the country to Canada, and the shipping changes to $15 right away, without reloading the page.

Now the classic checkout, on the same cart. It's a longer form, with billing details first, and the order table below. The shipping address stays hidden, until the customer selects Ship to a different address. Order notes are always open, as a text box. The coupon is a link at the top, and the payment methods are a list at the bottom. It updates the totals too. Pick Canada, and the shipping becomes $15.

To switch, open Pages, and edit your Checkout page. The editor takes a moment to open. Then you'll see the Checkout block, with the order summary on the right. Click the Checkout block, open the block switcher, and choose Classic Shortcode. Save the page. It now holds a Classic Checkout block, which shows the checkout shortcode. To go back, click Transform into blocks. Save again, and the block checkout returns. The cart works the same way. It's a separate page, so you switch it separately.

Now the part that catches people out, extensions. Here's a small demo extension, written the classic way. On the classic checkout, it adds a banner, a gift message box, and a pay by invoice option. Switch to the block checkout, and all three are gone. No error, no message, just missing. Extensions that use classic hooks, or payment methods built for the classic checkout, have to be updated for blocks.

WooCommerce can warn you, but only about what it can detect. Here, the extension says it doesn't support the block checkout yet. The warning lists the extension, and the payment method, with a Switch to classic checkout button. Now the extension says nothing. Only the payment method is still listed. So don't trust the editor alone. Open the checkout as a customer, and check every extension yourself.

When an extension supports blocks, it works here too. This updated demo adds its gift message to the block checkout. It appears under Additional order information. Type a message, and place the order. The message is saved on the order, just like it is in the classic checkout.

Customizing works differently too. In the block checkout, you use the editor. Click the Shipping address block. You can show or hide the company, the second address line, and the phone number. Turn on Company, and make the phone number required. Each step also has a line of text you can fill in. We'll add a short note under Contact information. Save the page, and the changes are live on the checkout.

The classic checkout is customized with code. A filter like this one changes the fields. This one removes the phone field. Add it to your theme, or to a small plugin, and the classic checkout drops the field. The same filter does nothing in the block checkout. There, you use the editor. For the layout, WooCommerce has a checkout form template. A theme can override it with its own copy.

So, which should you choose? For a new store, start with the block checkout. It's the default, and you edit it in the page editor. Choose the classic checkout when an extension you can't do without only works the classic way, or your team already customizes the checkout with code. Before you decide, list every plugin that touches your checkout. Ask each one about block support, or test it, as we did. You don't have to decide forever. Switching only takes a few clicks, so try it on a copy of your site first.

Mistake one. Putting the shortcode on the page, and leaving the block there as well. You get two checkouts on one page, with every field twice. Use one or the other, never both.

Mistake two. Building a new checkout page, and forgetting Page setup. The cart's checkout button still goes to the old page. Open WooCommerce, Settings, Advanced, and choose your new page as the Checkout page. Now the button leads to the new checkout.

Mistake three. Switching, and never placing a test order. Add a product as a customer, try each payment method, and place one test order. Then check that the fields you rely on, like a gift message, are on the order.

That's block checkout versus classic checkout. Block is the default, and easy to edit. Classic is for extensions and code that aren't ready for blocks. Check your extensions, switch in the page editor, and always test with a real order. Thanks for watching.