How to Add Custom Scripts to the WooCommerce Checkout Page

To add custom scripts to the WooCommerce checkout page, hook into wp_footer and conditionally check is_checkout() together with the order-pay and order-received query vars — this scopes your script to the actual checkout form only, excluding the “Pay for Order” and “Thank You” pages that share the same endpoint.

Why You Can’t Just Paste a Script Tag Directly

• Raw script tags pasted into a page or product field are often stripped by the editor
• A trust badge, tracking pixel, or third-party widget frequently ships with both HTML and inline JS that needs a safe, reliable output point
• WordPress’s wp_footer hook is the standard, safe place to print markup and scripts near the end of the page

Step 1: Add the Conditional Script Snippet

/** Print a script only on the actual checkout form page */
add_action( 'wp_footer', 'print_script_on_checkout_only', 9999 );

function print_script_on_checkout_only() {

    global $wp;

    $is_pay_page      = ! empty( $wp->query_vars['order-pay'] );
    $is_received_page = isset( $wp->query_vars['order-received'] );

    if ( is_checkout() && ! $is_pay_page && ! $is_received_page ) {
        echo '<script>console.log("checkout page script loaded");</script>';
    }
}

Why Exclude order-pay and order-received

is_checkout() alone returns true not just on the main checkout form, but also on the “Pay for Order” page and the “Order Received” (Thank You) page, since all three share the checkout endpoint. Excluding those two query vars keeps your script from firing anywhere except the actual checkout form itself.

A Real-World Example: An SSL Trust Badge

A common use case is a third-party trust-seal widget that provides both an HTML snippet and inline JavaScript — swap the placeholder console.log line for that widget’s provided code inside the same conditional block.

Troubleshooting

Script Loads on Every Checkout-Related Page

If the script still fires on the Thank You page, double-check the query var checks are spelled exactly right (order-pay and order-received, with hyphens) and that the conditional logic uses AND rather than OR.

Script Doesn’t Load at All

Confirm the snippet is placed in your child theme’s functions.php, and that no plugin is stripping late-priority wp_footer callbacks — try lowering the priority number if a caching or minification plugin seems to be interfering.

Frequently Asked Questions

Conclusion

A conditional wp_footer hook is the reliable way to add custom scripts to the WooCommerce checkout page without them leaking onto the Pay for Order or Thank You pages. Adjust the query var checks if you need a slightly different scope.

See also How to Add a Custom Checkout Field in WooCommerce. Then read How to Change Product Quantity on the WooCommerce Checkout Page.

Prefer no code? All-in-One Utilities Woo Add-on adds over 50 WooCommerce features, so you can switch them on without code.