Insertng HTML and jQuery into a page that uses the Defaut template

There are 2 options:

1. Copy the WooCommerce file into your theme, then make whatever changes you like. Since you’re using a default theme, you’d need to create a child theme. In this case, you’d copy /wp-content/plugins/woocommerce/templates/checkout/for-m-checkout.php (the whole file) into /wp-content/themes/yourchildthemename/woocommerce/checkout/form-checkout.php and do whatever you like – the child theme will also need a style.css to be recognized by WP and activated.

Always keep the WooCommerce comments at the top of the file – that way if WooCommerce makes changes to its default template it will warn you that your theme copy of its file is out of date, and you can update it so the site won’t break. This is usually the best solution for large changes.

2. Use a hook. WooCommerce provides tons of these; the best way to find them is to look through its template files (in this case the same form-checkout.php file) until you find do_action. In this case, there is an action called woocommerce_before_checkout_form. You can hook onto that action to inject the HTML and jQuery you need. Since hooks change much less often than templates, if there is a hook available, this is the easiest method because you won’t have to keep updating your copy of their template – plus you don’t have to create a child theme.