Add Custom HTML To Checkout Page Blocks

This lightweight plugin for WooCommerce checkout block users enables you to add HTML to different locations on your Gutenberg powered checkout page.

This plugin provides an easy-to-use admin interface under WooCommerce > Checkout Content to manage custom HTML content for different checkout block areas.

Features

• Easy Admin Interface: Manage custom content through WooCommerce admin menu
• Multiple Injection Points: Target specific checkout block locations
• HTML Support: Full HTML content support with proper escaping
• Responsive Design: Injected content inherits WooCommerce styling
• Dark Mode Compatible: Content adapts to WooCommerce’s dark mode
• No Theme Modifications: Works with any theme using WooCommerce Blocks

Installation

1. Install and activate the plugin through the Plugins menu in WordPress
2. Navigate to WooCommerce > Checkout Content to configure your custom content

Admin Configuration

1. Go to WooCommerce > Checkout Content in your WordPress admin
2. Enter custom HTML content in the textarea fields for each checkout block location
3. Click “Save Changes” to apply your content
4. Visit your checkout page to see the injected content

Checkout Block Locations

The plugin supports injecting custom content into the following WooCommerce Blocks checkout locations:

Order Meta (Below Checkout Summary)

• Block Identifier: orderMeta
• Location: Appears after the order summary/checkout totals section
• Best For: Order notes, special instructions, or additional order information
• Target Element: [data-block-name="woocommerce/checkout-order-summary-block"]

Shipping Packages (Inside Shipping Step)

• Block Identifier: shipping
• Location: Appears within the shipping options section
• Best For: Shipping policies, delivery information, or shipping-related promotions
• Target Element: [data-block-name="woocommerce/checkout-shipping-method-block"]

Local Pickup Packages (Inside Pickup Options)

• Block Identifier: localPickup
• Location: Appears within the local pickup options section
• Best For: Pickup location information, pickup policies, or store-specific content
• Target Element: [data-block-name="woocommerce/checkout-pickup-options-block"]

Discounts Meta (Below Coupon Input)

• Block Identifier: discounts
• Location: Appears after the coupon code input field
• Best For: Promotional messages, discount information, or coupon-related content
• Target Element: [data-block-name="woocommerce/checkout-coupon-block"]

Order Meta Example

<div class="custom-order-notice">
    <h4>Order Processing</h4>
    <p>Orders placed before 2 PM are processed same-day. Free shipping on orders over $50!</p>
</div>

Shipping Packages Example

<div class="shipping-info">
    <h4>Shipping Information</h4>
    <ul>
        <li>Standard shipping: 3-5 business days</li>
        <li>Express shipping: 1-2 business days</li>
        <li>Free shipping on orders over $75</li>
    </ul>
</div>

Local Pickup Example

<div class="pickup-info">
    <h4>Store Pickup</h4>
    <p><strong>Store Hours:</strong> Mon-Fri 9AM-6PM, Sat 10AM-4PM</p>
    <p><strong>Address:</strong> 123 Main St, City, State 12345</p>
    <p>Please bring your order confirmation email for pickup.</p>
</div>

Discounts Meta Example

<div class="coupon-promo">
    <h4>Special Offers</h4>
    <p>Use code <strong>SAVE10</strong> for 10% off your first order!</p>
    <p>Use code <strong>FREESHIP</strong> for free shipping on any order.</p>
</div>

CSS Classes

The plugin automatically applies the following CSS classes to injected content you can use to style your content :

• .checkout-custom-content – Main wrapper class
• .checkout-custom-content--{location} – Location-specific class (e.g., --orderMeta, --shipping)
• .checkout-custom-content__inner – Inner content wrapper

Screenshots

Include the settings and checkout page.