Hi @siutek!
You can register a new field using the Additional Fields API.
Btw—this feature was introduced in WooCommerce 9.9 (released yesterday), so make sure to update your WooCommerce version first. : )
Hi @siutek,
Welcome to the WooCommerce forum, and thank you for reaching out! I understand you’re looking to add custom HTML before the place order button in the new block-based checkout, just like you did with the classic checkout. That kind of customization can be important for adding trust signals, extra info, or custom fields, so I can see why you’d want to bring it over.
Thanks so much to @babylon1999 for jumping in with a helpful answer! As mentioned, the new Additional Fields API is the way to go when working with the block checkout. You can learn more and follow the guide here: https://developer.woocommerce.com/docs/block-development/cart-and-checkout-blocks/additional-checkout-fields#using-the-api
Also, this API was added in WooCommerce 9.9, so please make sure you’re running the latest version before applying it.
Let us know if you need help getting started with the API or placing your HTML exactly where you need it. We’re happy to help!
This code will help you add HTML after the additional information block on the checkout page. Tested and works.
add_filter( 'render_block', 'wpsites_additional_information_block', 10, 2 );
function wpsites_additional_information_block( $block_content, $block ) {
if ( isset( $block['blockName'] ) && $block['blockName'] === 'woocommerce/checkout-additional-information-block' ) {
$content = '<div>Custom HTML After Additional Information Block</div>';
return $content;
}
return $block_content;
}
Thread Starter
siutek
(@siutek)
@wordpresssites Thanks! Your solution works perfectly!
@lovingbro , @babylon1999 I think I need to learn react! Thanks!
Hi @siutek,
Thank you for the update. I’m happy to hear that the solution worked perfectly for you!
A big shoutout to @wordpresssites for jumping in and sharing that helpful code. It’s great to see such collaboration in the community.
And yes, if you’re thinking about learning React, that’s a fantastic step, especially as more of WooCommerce (and WordPress in general) continues to move toward block-based and JavaScript-driven experiences. You might want to start with this resource from WordPress: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/.
If WooCommerce has been helpful for your store and you appreciate the support you’ve received here, we’d truly appreciate it if you could leave us a quick review: https://wordpress.org/support/plugin/woocommerce/reviews/#new-post
Wishing you all the best on your React learning journey!
