These code snippets enables you to add custom HTML to 5 different checkout page blocks in 5 seperate locations.
- contact information block
- shipping method block
- payment options block
- additional information block
- order summary block
And here’s a visual guide.
Modify the value for the $content variable within the single quotes in the code to your own requirements.
Contact Information Block
Executes after the checkout-contact-information-block.
add_filter( 'render_block', 'wpsites_checkout_contact_information_block', 10, 2 );
function wpsites_checkout_contact_information_block( $block_content, $block ) {
if ( isset( $block['blockName'] ) && $block['blockName'] === 'woocommerce/checkout-contact-information-block' ) {
$content = '<div class="checkout-block-html">Custom HTML Checkout Contact Information Block</div>';
return $content;
}
return $block_content;
}Shipping Method Block
Executes before the checkout-shipping-method-block.
add_filter( 'render_block', 'wpsites_shipping_method_block', 10, 2 );
function wpsites_shipping_method_block( $block_content, $block ) {
if ( isset( $block['blockName'] ) && $block['blockName'] === 'woocommerce/checkout-shipping-method-block' ) {
$content = '<div class="checkout-block-html">Custom HTML Shipping Address Block</div>';
return $content;
}
return $block_content;
}Payment Options Block
Executes after the checkout-payment-block.
add_filter( 'render_block', 'wpsites_checkout_payment_block', 10, 2 );
function wpsites_checkout_payment_block( $block_content, $block ) {
if ( isset( $block['blockName'] ) && $block['blockName'] === 'woocommerce/checkout-payment-block' ) {
$content = '<div class="checkout-block-html">Custom HTML Checkout Payment Block</div>';
return $content;
}
return $block_content;
}Additional Information Block
Executes after the checkout-additional-information-block.
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 class="checkout-block-html">Custom HTML Additional Information Block</div>';
return $content;
}
return $block_content;
}Order Summary Block
Executes after the checkout-order-summary-block but before the Total
add_filter( 'render_block', 'wpsites_checkout_order_summary_block', 10, 2 );
function wpsites_checkout_order_summary_block( $block_content, $block ) {
if ( isset( $block['blockName'] ) && $block['blockName'] === 'woocommerce/checkout-order-summary-block' ) {
$content = '<div class="checkout-block-html">Custom HTML Checkout Totals Block</div>';
return $content;
}
return $block_content;
}Visual Guide
Right click and open image in new tab then click to see the full size image showing where the code outputs based on the block name .
Related Solutions :
Leave a Reply