Add HTML/CSS/JS into WooCommerce Checkout

Sometimes you need to add some piece of code before or after your WooCommerce checkout page. You may want to add some CSS style-sheets or HTML codes. If your WordPress does not support this feature, follow the below steps.

This action will be done by adding a PHP code into functions.php of your main theme or child theme. Check your WordPress theme folder and check if your theme has a child theme since our preference is to edit the functions.php of your child theme.

After opening the functions.php, navigate the end of the file and paste the below code right before “?>” if you have it.

add_action('woocommerce_after_checkout_form', 'debounce_add_jscript_checkout');

function debounce_add_jscript_checkout() {
?>
PUT YOUR HTML/CSS/JS HERE
<?php
}

In the above piece of code, the inserted code will be placed after the checkout form. You may change woocommerce_after_checkout_form to woocommerce_before_checkout_form in order to move the code before the checkout form.

Please be careful with adding this piece of code since if you do not do everything right, your website could go down. Let us know if you need any help adding your code to the WooCommerce checkout page.

Was this helpful?