Customize Woo Checkout Blocks

Resolved jlanpheer
(@jlanpheer)

1 year, 7 months ago

I wanted to clarify what the current status of Woo Checkout blocks is. As i understand it, if the theme chosen is a block-based theme, the checkout page will use the Woo checkout block by default, is that correct? If so, all the fields in the block have a ‘padlock’ next to them, indicating that they cannot be changed?

I am simply trying to add billing company/organization to the checkout block. I don’t see a way to modify the block without getting dirty with npm to create a custom block, is that correct? Even further, when i try and switch to ‘classic checkout’, a message appears asking me to ‘Transform into Blocks’, with the only other option being ‘Learning More’. That’s not helpful because i’m switching to ‘classic checkout’ on purpose to NOT use blocks, yet that doesn’t seem to be an option.

I can probably simply go the straight shortcode route and get that to work, but i wanted to confirm if my understanding described above is correct or not? If i CAN add billing company/org to the checkout block, can you please point me to some documentation about this?

I’m a little confused and hope someone can explain the current state of things, thank you!

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Support Riaan K.
(@riaanknoetze)

1 year, 7 months ago
Hi there,

When it comes to adding additional fields to the checkout block, you have the following options:
- Using the classic shortcode checkout method: With this, most checkout editor plugins will be able to add fields (or you could use most checkout field editing documentation to add those using hooks). This process is fairly well documented.
- Using block-based checkout: There are fewer plugins available that allow fields to be added to the checkout block (you’ll want to verify these with the respective developers as to whether their plugin is block-compatible).
  
  If you’re looking to add these fields via custom coding in the checkout block, a great deal depends on the nature of these field types and whether there are advanced validation needed. For regular input fields, this is a great source to use: https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/additional-checkout-fields.md
  
  Finally, if you get stuck, I would strongly recommend checking in with the block devs in the WooCommerce Community Slack instance (specifically the #woocommerce-blocks-and-block-themes channel).
Plugin Support omarfpg a11n
(@omarfpg)

1 year, 7 months ago

Hi there @jlanpheer,

I wanted to clarify what the current status of Woo Checkout blocks is. As i understand it, if the theme chosen is a block-based theme, the checkout page will use the Woo checkout block by default, is that correct?

Not quite, since WooCommerce 8.3 the default is for the cart and checkout pages to be built with the Blocks, not the shortcodes (irregardless of the nature of the theme you’re using, as this is within your page, not within the site editor). You can switch this at any time if needed, too.

You can learn more about the status for the Cart and Checkout blocks here: https://woocommerce.com/document/cart-checkout-blocks-status/

I am simply trying to add billing company/organization to the checkout block.

If you’re using the Checkout Block there’s an option to enable the Company field when you select the checkout fields within the checkout block (you can use the List View to navigate this easier), like this:

Direct link to the image: https://snipboard.io/1fuxvt.jpg

I hope this helps!
-OP